Option for esModule to export named exports instead of default export

[billyjanitsch]

• Operating System: macOS
• Node Version: 12.13.1
• NPM Version: 6.13.4
• webpack Version: 4.41.4
• css-loader Version: 3.4.0

Expected Behavior / Situation

When the new esModule option is enabled, I hoped that each CSS class name would be exported as a named export:

.foo {color: red}
.bar {color: blue}

export const foo = 'abc'
export const bar = 'def'

Actual Behavior / Situation

Instead, an object of class names to hashes is exported as a default export:

export default {foo: 'abc', bar: 'def'}

This means that tree-shaking + inlining is very limited. For example, this is able to tree-shake:

import css from './styles.css'
console.log(css.foo)

function(e,t,r){"use strict";r.r(t);console.log("foo-3TUTh")}

But this is not able to tree-shake or inline:

import css from './styles.css'
function fn() {
  return css.foo
}
console.log(fn)

function(e,r,t){"use strict";t.r(r);var n={foo:"foo-3TUTh",bar:"bar-1JkxR"};console.log((function(){return n.foo}))}

Modification Proposal

If esModule used named exports, tree-shaking + inlining would always work as expected.

This would significantly reduce bundle size for apps using CSS modules.

[alexander-akait]

hm, i think we should open issue in webpack, we should concat modules in this case too

[GeorgeTaveras1231]

hm, i think we should open issue in webpack, we should concat modules in this case too

@evilebottnawi Sorry I'm missing a lot of context but am interested in learning. Can you elaborate on your comment? Why should concatenating modules on webpack be necessary?

[alexander-akait]

@GeorgeTaveras1231 We should improve concatenated module plugin, unfortunately I did not look deep into this problem, so I can not give information where it is better to do.

Also esModule generated module syntax, we need the exportNamed option for that, and maybe switch on that behavior in future, also it is require to patch style-loader/mini-css-extract-plugin and other, it is very big work.

[jdb8]

@GeorgeTaveras1231 I just tried running your example using the same version of webpack (4.41.4) and in my output bundle I actually do see successful tree-shaking: this is with esModule: true in both mini-css-extract-plugin and css-loader.

Files I used: https://gist.github.com/jdb8/8049b6952898795be68dd6290e57bdfa

I wonder if this has been fixed somewhere, or if I'm missing something? Did you run your original example in production mode with the two esModule option flags set?

[alexander-akait]

Implemented on css-loader side, but we should improve it on style-loader and mini-css-extract-plugin side

[alexander-akait]

Implemented in mini-css-extract-plugin,
issue for style-loader webpack-contrib/style-loader#483