Skip to content

fix: source map sources and file paths #753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
Closed

fix: source map sources and file paths #753

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e4497c6
Allow the user to opt out of legacy handling, but keep it as the defa…
npetruzzelli Aug 3, 2018
7f4f7a8
Address Lint errors and missing variable declaration.
npetruzzelli Aug 3, 2018
8cf05a9
Remove optional support of legacy handling.
npetruzzelli Aug 5, 2018
027c8ca
Update assertions used in tests for source maps.
npetruzzelli Aug 13, 2018
32e7f46
Clean up `from` and `to` arguments for PostCSS processing.
npetruzzelli Aug 23, 2018
c0669ab
Merge branch 'master' into source-map-uris
npetruzzelli Nov 30, 2018
ffdd935
Fix linting errors in `lib/loader.js`
npetruzzelli Nov 30, 2018
16c317a
Fix missing hyphen in default devtool value.
npetruzzelli Nov 30, 2018
68bd963
Account for valid falsey values passed for devtool option in test helper
npetruzzelli Nov 30, 2018
26680b0
Get the compiled source map object from within a test
npetruzzelli Nov 30, 2018
c2e272f
Remove use of OriginalSource, it did not contain information on the i…
npetruzzelli Nov 30, 2018
625ffb1
Don't set sourceRoot on source maps if the consuming developer did no…
npetruzzelli Nov 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions lib/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ var processCss = require("./processCss");
var getImportPrefix = require("./getImportPrefix");
var compileExports = require("./compile-exports");


module.exports = function(content, map) {
var callback = this.async();
var query = loaderUtils.getOptions(this) || {};
var moduleMode = query.modules;
var camelCaseKeys = query.camelCase;
var sourceMap = query.sourceMap || false;
var resourcePath;

if(sourceMap) {
if (map) {
Expand All @@ -33,10 +33,30 @@ module.exports = function(content, map) {
map = null;
}

/**
* > To ensure that PostCSS generates source maps and displays better syntax
* > errors, runners must specify the from and to options. If your runner
* > does not handle writing to disk (for example, a gulp transform), you
* > should set both options to point to the same file
* @see postcss [PostCSS Runner Guidelines]{@link https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#21-set-from-and-to-processing-options}
*
* `css-loader` isn't responsible for writing the map, so it doesn't have to
* worry about updating the map with a transformation that changes locations
* (suchs as map.file or map.sources).
*
* Changing the file extension counts as changing the location because it
* changes the path.
*
* PostCSS's `from` and `to` arguments are only concerned with the file
* system. They don't know about, care about, or understand the webpack
* loader's current request or remaining request.
*/
resourcePath = this.resourcePath;

processCss(content, map, {
mode: moduleMode ? "local" : "global",
from: loaderUtils.getRemainingRequest(this).split("!").pop(),
to: loaderUtils.getCurrentRequest(this).split("!").pop(),
from: resourcePath,
to: resourcePath,
query: query,
loaderContext: this,
sourceMap: sourceMap
Expand Down Expand Up @@ -112,13 +132,6 @@ module.exports = function(content, map) {
if(sourceMap && result.map) {
// add a SourceMap
map = result.map;
if(map.sources) {
map.sources = map.sources.map(function(source) {
return source.split("!").pop().replace(/\\/g, '/');
}, this);
map.sourceRoot = "";
}
map.file = map.file.split("!").pop().replace(/\\/g, '/');
map = JSON.stringify(map);
moduleJs = "exports.push([module.id, " + cssAsString + ", \"\", " + map + "]);";
} else {
Expand Down
3 changes: 1 addition & 2 deletions lib/processCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,7 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
]);

pipeline.process(inputSource, {
// we need a prefix to avoid path rewriting of PostCSS
from: "/css-loader!" + options.from,
from: options.from,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Break maps in many cases

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you referring to the existing test suite? It is expected that it broke. I held off on updating the test suite as the comments in this review would determine how it would need to be updated.

The existing test suite is still using assumptions about source maps prior to the fix in this PR. I currently have the feedback I need and I intend to update the test suite prior to setting up the test repo.

If it isn't the test suite, is there a specific scenario you can describe that I can look into?

to: options.to,
map: options.sourceMap ? {
prev: inputMap,
Expand Down
28 changes: 13 additions & 15 deletions test/sourceMapTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ describe("source maps", function() {
file: 'test.css',
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
Expand All @@ -70,7 +69,6 @@ describe("source maps", function() {
file: 'test.css',
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
Expand All @@ -83,79 +81,79 @@ describe("source maps", function() {
testMap("generate sourceMap (1 loader)", ".class { a: b c d; }", undefined, {
loaders: [{request: "/path/css-loader"}],
resource: "/folder/test.css",
resourcePath: "/folder/test.css",
request: "/path/css-loader!/folder/test.css",
query: "?sourceMap"
}, [
[1, ".class { a: b c d; }", "", {
file: 'test.css',
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sources: [ 'test.css' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
}]
]);
testMap("generate sourceMap (1 loader, relative)", ".class { a: b c d; }", undefined, {
loaders: [{request: "/path/css-loader"}],
resource: "/folder/test.css",
resourcePath: "/folder/test.css",
request: "/path/css-loader!/folder/test.css",
query: "?sourceMap"
}, [
[1, ".class { a: b c d; }", "", {
file: 'test.css',
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sources: [ 'test.css' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
}]
]);
testMap("generate sourceMap (1 loader, data url)", ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\"); }", undefined, {
loaders: [{request: "/path/css-loader"}],
resource: "/folder/test.css",
resourcePath: "/folder/test.css",
request: "/path/css-loader!/folder/test.css",
query: "?sourceMap"
}, [
[1, ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\"); }", "", {
file: 'test.css',
mappings: 'AAAA,SAAS,6WAA6W,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sources: [ 'test.css' ],
sourcesContent: [ '.class { background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 42 26\' fill=\'%23007aff\'><rect width=\'4\' height=\'4\'/><rect x=\'8\' y=\'1\' width=\'34\' height=\'2\'/><rect y=\'11\' width=\'4\' height=\'4\'/><rect x=\'8\' y=\'12\' width=\'34\' height=\'2\'/><rect y=\'22\' width=\'4\' height=\'4\'/><rect x=\'8\' y=\'23\' width=\'34\' height=\'2\'/></svg>"); }' ],
version: 3
}]
]);
testMap("generate sourceMap (1 loader, encoded data url)", ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\"); }", undefined, {
loaders: [{request: "/path/css-loader"}],
resource: "/folder/test.css",
resourcePath: "/folder/test.css",
request: "/path/css-loader!/folder/test.css",
query: "?sourceMap"
}, [
[1, ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\"); }", "", {
file: 'test.css',
mappings: 'AAAA,SAAS,mmBAAmmB,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sources: [ 'test.css' ],
sourcesContent: [ '.class { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E"); }' ],
version: 3
}]
]);
testMap("generate sourceMap (2 loaders)", ".class { a: b c d; }", undefined, {
loaders: [{request: "/path/css-loader"}, {request: "/path/sass-loader"}],
resource: "/folder/test.scss",
resourcePath: "/folder/test.scss",
request: "/path/css-loader!/path/sass-loader!/folder/test.scss",
query: "?sourceMap"
}, [
[1, ".class { a: b c d; }", "", {
file: 'test.scss',
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.scss' ],
sources: [ 'test.scss' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
}]
Expand All @@ -165,21 +163,21 @@ describe("source maps", function() {
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.scss' ],
sources: [ 'test.scss' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
}, {
loaders: [{request: "/path/css-loader"}, {request: "/path/sass-loader"}],
resource: "/folder/test.scss",
resourcePath: "/folder/test.scss",
request: "/path/css-loader!/path/sass-loader!/folder/test.scss",
query: "?sourceMap"
}, [
[1, ".class { a: b c d; }", "", {
file: 'test.scss',
mappings: 'AAAA,SAAS,SAAS,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.scss' ],
sources: [ 'test.scss' ],
sourcesContent: [ '.class { a: b c d; }' ],
version: 3
}]
Expand Down