inline import duplication

[undoZen]

If I require('sub1.css') and require('sub2.css') which both @import url("./base.css") then I'll get rules in bass.css applied twice in my page, which may cause some problem.

Any plan to solve this?

[sokra]

For this we need to change the exports of the css-loader from a simple string to a description object/array.

Example:

/* style.css */
@import "import.css" medium and (media-query);

body { }

[
  [require.resolve("css!import.css"), "css from import.css", "medium and (media-query)"],
  [require.resolve("css!style.css"), "body {}"]
]

The style-loader need to handle this new format and keep track of which module id is already attached to the DOM ( + HMR + ref-counted style ).

The ExtractTextPlugin need to handle this format, merge duplicate modules and construct a css SourceMap...

Lot of changes required...

[jhnns]

Interesting, this could finally enable developers to write truly modular CSS with pre-processors. Currently it's not possible.

[necolas]

I had this problem too. Having a hard time using webpack to build CSS bundles properly. The dream would be to mirror the ability to generate commons/chunks bundles as with the JS.

[necolas]

Also consider using the CSS 'module' pattern that is common in npm-land and used in modules like https://github.com/reworkcss/rework-npm. Then this would work with all the existing modules on npm rather than introducing a new syntax.

Using @import "module" is not valid CSS because it lacks the .css extension, so it's appropriate to infer it is a module require.

[jhnns]

I'm not sure, but I think the CSS module pattern is already applied.

If you're writing

@import "my-module";

.some-style {}

webpack generates (roughly)

module.exports = require("./my-module.css") + ".some-style {}";

The problem is that pre-processors compile everything down to one big chunk. But with LESS's reference feature it is at least possible to generate a css-file for each module without including the common stuff again.

[necolas]

That's resolving my-module to ./my-module.css, which is not the same thing as looking up my-module in the moduleDirectories. My suggestion is that since @import "my-module" is not valid CSS, webpack should not treat it as a relative path but as a module name instead (as rework-npm does).

[jhnns]

Yes, that would be cool. Currently you need to append ~ to load from modulesDirectories.

Related discussion: webpack-contrib/less-loader#3

[sokra]

I have a working prototype for this. Just need to do some more testing before release...

It seems like #sourceMappingURL comments are not supported in <style> tags. 😢 So you only get CSS SourceMaps for the extract-text-webpack-plugin...

[sokra]

published...

Now an @imported module is only added once to the DOM. In addition to that the order stays correct for @imported modules.

This also works with the extract-text-webpack-plugin. It includes modules only once. And it can create CSS SourceMaps...

[jhnns]

Coool @sokra

[undoZen]

great work!

I'm using less now. Wondering does less-loader generate css source map and
does this css-loader keep the source map come with the (maybe less
generated) css file?
On 8 Sep, 2014 11:17 pm, "Johannes Ewald" notifications@github.com wrote:

Coool @sokra https://github.com/sokra

—
Reply to this email directly or view it on GitHub
#17 (comment).

[necolas]

This is great! Thanks Tobias. Only thing that is different from using require now is that combining the common-chunks plugin, css-loader, and extract-text-webpack-plugin doesn't produce a common css bundle. Where's the right place to file a feature request for that?