Skip to content
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

Jump to bottom

fix: source map sources and file paths #753

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 4 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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
53 changes: 44 additions & 9 deletions lib/loader.js
View file
Open in desktop
Expand Up @@ -2,18 +2,39 @@
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var path = require("path");
var loaderUtils = require("loader-utils");
var processCss = require("./processCss");
var getImportPrefix = require("./getImportPrefix");
var compileExports = require("./compile-exports");

/**
* If the file was "renamed" (for the purposes of source maps), then honor it,
* otherwise just use the resourcePath.
* @param {String} resourcePath - The absolute file system path for the sass file.
* @param {Object|null} map - An existing source map, if any.
* @return {String} - The effective path to use for the `from` argument.
*/
function processFrom(resourcePath, map) {
var effectiveResourcePath;
if (map && map.file && typeof map.file === 'string' && path.dirname(map.file) === '.') {
Copy link
Member

Choose a reason for hiding this comment

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

path.dirname(map.file) === '.' checks for a relative path here ? I'm not sure I'm following.. 😛 . In case my understanding is correct here, there is also path.isAbsolute(filepath) available

Copy link
Author

Choose a reason for hiding this comment

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

I've done some thinking on it and here I may be trying to be too clever. What I originally was thinking of shouldn't be something that css-loader is responsible for. I can provide more details on what I was thinking if you'd like.

I'll try cleaning this up in my next commit.

		from: this.resourcePath,
		to: this.resourcePath,

will be enough.

// Something else has already changed the file name or extension, so
// honor it for the purpose of creating the next source map.
effectiveResourcePath = path.join(path.dirname(resourcePath), map.file);
Copy link
Member

Choose a reason for hiding this comment

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

Please provide an example for effectiveResourcePath here :)

} else {
effectiveResourcePath = resourcePath;
}
Copy link
Member

Choose a reason for hiding this comment

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

nitpick 🐦 \n after the else block

return effectiveResourcePath;
}

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 processCssFrom;
var processCssTo;

if(sourceMap) {
if (map) {
Expand All @@ -33,10 +54,31 @@ 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.
*/
processCssFrom = processFrom(this.resourcePath, map);
Copy link
Member

Choose a reason for hiding this comment

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

var from = getFrom(this.resourcePath, map)
var to = from

processCssTo = processCssFrom;

processCss(content, map, {
mode: moduleMode ? "local" : "global",
from: loaderUtils.getRemainingRequest(this).split("!").pop(),
to: loaderUtils.getCurrentRequest(this).split("!").pop(),
from: processCssFrom,
Copy link
Member

Choose a reason for hiding this comment

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

{
  ...,
  // TODO use shorthand in next major
  from: from,
  to: to
}

to: processCssTo,
query: query,
loaderContext: this,
sourceMap: sourceMap
Expand Down Expand Up @@ -112,13 +154,6 @@ module.exports = function(content, map) {
if(sourceMap && result.map) {
// add a SourceMap
map = result.map;
if(map.sources) {
npetruzzelli marked this conversation as resolved.
Show resolved Hide resolved
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
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
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