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.

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

fix: source map sources and file paths #753

Closed
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
15 changes: 0 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -294,21 +294,6 @@ They are not enabled by default because they expose a runtime overhead and incre
}
```

#### Opting out of legacy source maps behavior

To receive source maps as URLs relative to `loader.resourcePath`, set the `legacySourceMaps` option to `false`.


```javascript
{
loader: 'css-loader',
options: {
legacySourceMaps: false,
sourceMap: true
}
}
```

### `camelCase`

By default, the exported JSON keys mirror the class names. If you want to camelize class names (useful in JS), pass the query parameter `camelCase` to css-loader.
Expand Down
55 changes: 20 additions & 35 deletions lib/loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,32 +54,26 @@ module.exports = function(content, map) {
map = null;
}

if (query.legacySourceMaps !== false) {
processCssFrom = loaderUtils.getRemainingRequest(this).split("!").pop();
processCssTo = loaderUtils.getCurrentRequest(this).split("!").pop();
} else {

/**
* > 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);
processCssTo = processCssFrom;
}
/**
* > 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",
Expand Down Expand Up @@ -160,15 +154,6 @@ module.exports = function(content, map) {
if(sourceMap && result.map) {
// add a SourceMap
map = result.map;
if (query.legacySourceMaps !== false) {
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
10 changes: 1 addition & 9 deletions lib/processCss.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,16 +179,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
parserPlugin(parserOptions)
]);

var postCssFrom;
if (options.query.legacySourceMaps !== false) {
// we need a prefix to avoid path rewriting of PostCSS
postCssFrom = "/css-loader!" + options.from;
} else {
postCssFrom = options.from;
}

pipeline.process(inputSource, {
from: postCssFrom,
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