Can't Live Edit CSS/SCSS Sources in Chrome Workspaces without file://

[niedfelj]

Do you want to request a feature or report a bug?

FEATURE

What is the current behavior?
Sourcemap from sub module css (from sass-loader) is stringified with absolute paths

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?
Would be great to be able to use Chrome 66 workspaces to live edit files, but Chrome requires that sourceMap has file:// at the beginning

If this is a feature request, what is motivation or use case for changing the behavior?
To use Chrome workspaces to live edit scss/css

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
webpack 4.8.3
node 8.10.0
MacOS 10.13.4

I was able to get the correct behaviour by doing the following on lines 117..132 in loader.js

		var moduleJs;
		if(sourceMap && result.map) {
			// add a SourceMap
			map = result.map;
			if(map.sources) {
				map.sources = map.sources.map(function(source) {
					return "file://"+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 {
			moduleJs = "exports.push([module.id, " + cssAsString + ", \"\"]);";
		}

Does it make sense to set this as an option or use another webpack default, for example in the output I'm also using

    output: {
      devtoolModuleFilenameTemplate(info) {
        const newPath =  'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
        return newPath
      },
    },

[alexander-akait]

@niedfelj seems you have invalid configuration webpack out of box work with workspaces

[niedfelj]

@evilebottnawi What should it be? I'm working with the new Shopify slate/slate-tools project. Opened this ticket with them also

Shopify/slate#447

[niedfelj]

Also reference this issue webpack/webpack#6400

[alexander-akait]

Looks like we can close this issue in favor webpack/webpack#6400

[niedfelj]

@evilebottnawi While they are related, they are not the same issue. css-loader is responsible for munging these sourceMaps, there is nothing webpack or that issue can do to resolve it by itself.

[alexander-akait]

@niedfelj how you imagine we will fix it in css-loader?

[niedfelj]

I guess with an option like sourceMapUrlPrefix or a similar callback function as mentioned above with devtoolModuleFilenameTemplate(info) (or maybe look for that output setting and use the same so they output the same file formats?

[alexander-akait]

@niedfelj we should first solve this in webpack, maybe add new api, which allow us using this, no new option(s)

[niedfelj]

Sounds good, can we leave this open as a tracking ticket?

…

On May 18, 2018, at 2:21 PM, Evilebot Tnawi ***@***.***> wrote: @niedfelj <https://github.com/niedfelj> we should first solve this in webpack, maybe add new api, which allow to us using this, no new option — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#717 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR-V2dUAF00X8yICGeAKOil6TLbkOiZks5tzxE3gaJpZM4UE19n>.

[alexander-akait]

@niedfelj 👍

[HairyRabbit]

:)

Anything update here?

Happen when I chain loader by 'postcss-loader'

use: [
  'style-loader?sourceMap',
  'css-loader?sourceMap',
  'postcss-loader?sourceMap'
]

Fix sources path and prepend file:/// looks fine for me:

[alexander-akait]

@HairyRabbit your problem already solved in last release and not related to top issue

[alexander-akait]

Close in favor #622 (comment)

Anyway you can setup editing in dev tools:

1. Open dev tools.
2. Click Filesystem in on left panel.
3. Click Add folder to workspace in left panel.
4. Add src/lib directory.
5. Change content of file.

Anyway we should respect devtoolModuleFilenameTemplate and other devtool options, close in favor #622 (comment). Thanks for issue