Ensure Dart Sass file:// sources use relative paths
#3527
Conversation
colinrotherham
added
🐛 bug
|
The GOV.UK Design System website also uses Dart Sass but isn't built locally:
|
colinrotherham
force-pushed
the
source-map-sources
branch
from
357271c to
945b204
Compare
| @@ -14,15 +14,27 @@ export async function write (filePath, result) { | |||
| const writeTasks = [] | |||
|
|
|||
| // Files to write | |||
| /** @type {SourceMap | undefined} */ | |||
| const map = result.map ? JSON.parse(result.map.toString()) : undefined | |||
There was a problem hiding this comment.
We need map.sources a few lines down so parse to SourceMap here
Otherwise across Terser, Rollup and PostCSS we see source maps as:
- JavaScript
objecttypes that needJSON.stringify() - Class instances with
.toJSON()and.toString()methods - Preprepared
stringtype - Missing
undefinedtype
This can be seen via the AssetOutput @typedef in this file
| * Make source file:// paths relative (e.g. for Dart Sass) | ||
| * {@link https://sass-lang.com/documentation/js-api/interfaces/CompileResult#sourceMap} | ||
| */ | ||
| .map((path) => path.startsWith('file://') |
There was a problem hiding this comment.
PostCSS adds the Dart Sass entry point ../src/all.scss as a relative path
But all the other Dart Sass sources are absolute path file:// URLs
| // Add Autoprefixer prefixes to all source '*.scss' files | ||
| .flatMap(mapPathTo(['**/*.scss'], ({ dir: requirePath, name }) => [ | ||
| join(requirePath, `${name}.scss`), | ||
| join(requirePath, `${name}.scss.map`) // with source map |
There was a problem hiding this comment.
Service teams with source maps enabled will have been inspecting our Autoprefixer-transformed sources, not the original prefix-free *.scss source files
| inline: false, | ||
| prev: map | ||
| if (typeof options.map === 'object') { | ||
| options.map.prev = map |
There was a problem hiding this comment.
PostCSS will automatically discover source maps via sourceMappingURL comments but we prefer to pass them directly from Dart Sass here (like we did previously)
We transform Sass sources (Autoprefixer only) but didn’t source map the changes
Using types from Terser for the Source Map Revision 3 spec
This is consistent with our Node Sass output
colinrotherham
force-pushed
the
source-map-sources
branch
from
945b204 to
2b7dd08
Compare
In preparation for v4.6.0 release we noticed Dart Sass writes absolute file paths to source map sources:
You can see we last released source maps (via Node Sass) with relative paths:
dist/govuk-frontend-4.5.0.min.css.map
dist/govuk-frontend-4.5.0.min.js.map
But when building with Dart Sass we see absolute paths to
govuk-frontendincluded:Node Sass source maps
{ "sources": [ "components/accordion/_index.scss" "components/back-link/_index.scss", "components/breadcrumbs/_index.scss" ] }Dart Sass source maps
{ "sources": [ "file:///Users/username/path/to/govuk-frontend/src/govuk/components/accordion/_index.scss" "file:///Users/username/path/to/govuk-frontend/src/govuk/components/back-link/_index.scss", "file:///Users/username/path/to/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss" ] }This PR ensures we keep relative sources paths as we did with Node Sass