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

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 all 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
58 changes: 23 additions & 35 deletions lib/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ const {
getOptions,
isUrlRequest,
urlToRequest,
getRemainingRequest,
getCurrentRequest,
stringifyRequest,
} = require('loader-utils');

Expand Down Expand Up @@ -40,7 +38,6 @@ module.exports = function loader(content, map) {

if (map.sources) {
map.sources = map.sources.map((source) => source.replace(/\\/g, '/'));
map.sourceRoot = '';
}
}
} else {
Expand Down Expand Up @@ -100,15 +97,30 @@ module.exports = function loader(content, map) {

plugins.push(icssParser(parserOptions));

/**
* > 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.
*/
const { resourcePath } = this;

postcss(plugins)
.process(content, {
// we need a prefix to avoid path rewriting of PostCSS
from: `/css-loader!${getRemainingRequest(this)
.split('!')
.pop()}`,
to: getCurrentRequest(this)
.split('!')
.pop(),
from: resourcePath,
Copy link
Member

Choose a reason for hiding this comment

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

It is dangerous using this, also it is invalid use resourcePath, because it is not resource path, it is request, maybe you can create problem repository?

Copy link
Author

Choose a reason for hiding this comment

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

It will take me a while to completely respond to this. If I am lucky, I can have something ready some time this week.

I need to understand more about the differences between when to use the request and when to use a file system path.

It is difficult to learn the details of the request syntax, because it does not exist on the website (https://webpack.js.org/concepts/) nor the documentation used to generate it (https://github.com/webpack/webpack.js.org). The closest we come is documentation on context: https://webpack.js.org/api/loaders/#the-loader-context.

There are some pages in the old wiki, but they don't go into a lot of detail and users looking for documentation might not expect to look in the deprecated docs repository wiki because they appear to have the same information at first glance and would expect the syntax to be documented on the site. In reality, the wiki contains information not present in the in the more up to date documentation: https://github.com/webpack/docs/wiki/loaders, https://github.com/webpack/docs/wiki/using-loaders.

The next post will probably be a big one.

Before I make it, I want to see if what I'm concerned about is still an issue or if I'm worried about nothing. My next step is to create the example repository that you requested as it will help illustrate what has been fixed and what still needs work. I can't rely only on the test suite just yet.

Copy link
Member

Choose a reason for hiding this comment

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

@npetruzzelli feel free to create minimum reproducible test repo, it is allow to me also identify the problem and how to fix it

Copy link
Author

@npetruzzelli npetruzzelli Dec 10, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Hi @evilebottnawi,

I've created the repository that illustrates the problem. I'll need some time to get some text and images together to support/describe it clearly instead of needing you to dig through multiple pull requests and issues across multiple repositories for a clear picture.

https://github.com/npetruzzelli-forks/webpack-loader-demos/tree/dfffa81b02fd14fe7ece517b4048abfb0d33b761

I plan to use this repository to demonstrate the eventual solution just by pointing to a different Webpack file, probably in a new branch.

Relevant information:

Copy link
Member

Choose a reason for hiding this comment

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

@npetruzzelli great, thanks, i will see tomorrow, very tired today

Copy link
Author

Choose a reason for hiding this comment

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

No rush! I know that feeling. Rest well.

Copy link
Member

Choose a reason for hiding this comment

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

Reproducible test repo is not very simple, i try around 30 minutes to understand structure. Also looks many things broken, js source maps also doesn't work in you example. Please simplify example.

to: resourcePath,
map: options.sourceMap
? {
prev: map,
Expand Down Expand Up @@ -241,31 +253,7 @@ module.exports = function loader(content, map) {
if (exportCode) {
exportCode = `exports.locals = ${exportCode};`;
}

let newMap = result.map;

if (sourceMap && newMap) {
// Add a SourceMap
newMap = newMap.toJSON();

if (newMap.sources) {
newMap.sources = newMap.sources.map(
(source) =>
source
.split('!')
.pop()
.replace(/\\/g, '/'),
this
);
newMap.sourceRoot = '';
}

newMap.file = newMap.file
.split('!')
.pop()
.replace(/\\/g, '/');
newMap = JSON.stringify(newMap);
}
const newMap = result.map;

const runtimeCode = `exports = module.exports = require(${stringifyRequest(
this,
Expand Down
5 changes: 0 additions & 5 deletions test/__snapshots__/sourceMap-option.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ Array [
"file": "basic.css",
"mappings": "AAAA;EACE,WAAW;CACZ",
"names": Array [],
"sourceRoot": "",
"sources": Array [
"/replaced/original/path/",
],
Expand Down Expand Up @@ -133,7 +132,6 @@ Array [
"file": "basic.css",
"mappings": "AAAA;EACE,WAAW;CACZ",
"names": Array [],
"sourceRoot": "",
"sources": Array [
"/replaced/original/path/",
],
Expand Down Expand Up @@ -166,7 +164,6 @@ Array [
"file": "basic.css",
"mappings": "AAAA;ECCE,WAAW;CACZ",
"names": Array [],
"sourceRoot": "",
"sources": Array [
"/replaced/original/path/",
"/replaced/original/path/",
Expand Down Expand Up @@ -201,7 +198,6 @@ Array [
"file": "basic.css",
"mappings": "AAAA;ECCE,WAAW;CACZ",
"names": Array [],
"sourceRoot": "",
"sources": Array [
"/replaced/original/path/",
"/replaced/original/path/",
Expand Down Expand Up @@ -236,7 +232,6 @@ Array [
"file": "basic.css",
"mappings": "AAAA;EACE,WAAW;CACZ",
"names": Array [],
"sourceRoot": "",
"sources": Array [
"/replaced/original/path/",
],
Expand Down
4 changes: 3 additions & 1 deletion test/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,9 @@ function compile(fixture, config = {}, options = {}) {
// eslint-disable-next-line no-param-reassign
config = {
mode: 'development',
devtool: config.devtool || 'sourcemap',

// Account for valid `false` values for devtool
devtool: config.devtool != null ? config.devtool : 'source-map',
context: path.resolve(__dirname, 'fixtures'),
entry: path.resolve(__dirname, 'fixtures', fixture),
output: outputConfig(config),
Expand Down