Class names that are not valid JS identifiers are excluded from Webpack bundle

[kevinkace]

CSS class names are exported differently in a webpack bundle depending if the class names are valid JS identifiers or not. Invalid class names are only included under .default.

.thing {
  display: block;
}
.thing-0 {
  display: block;
}

(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "thing", function() { return thing; });
var thing = "mc7c4fa8d1_thing";
/* harmony default export */ __webpack_exports__["default"] = ({
    "thing": "mc7c4fa8d1_thing",
    "thing-1": "mc7c4fa8d1_thing-1"
});

}),

Test repo: https://github.com/kevinkace/webpackTest

[tivac]

This came about because of the change to ES2015 exports in #282, seems like it's related to webpack/webpack#4742

[tivac]

I may need to revert the change to use ES2015 exports, will see which API is more annoying. Having to require("./file.css").default to get at all the exports when using - in selector names is not-great.

/cc @TrySound as the source of the request for ES2015 exports to hear another perspective.

[TrySound]

@kevinkace Using require().default is normal as es modules is standard which should be used all the time. Of course with es modules you don't need to access default explicitly, just import style from './style.css'; or better import * as style from './style.css';.

Maybe this should be a breaking change, but this is the right way.

[TrySound]

@tivac Not a bug. Just two different module systems.

[TrySound]

Webpack guys force to use es modules and rewrites loaders with them, so why should we step back?

[tivac]

Current plan is to add a cjs option to webpack plugin. When truthy the output will be commonjs-style module.exports instead of ES2015 modules.

Hoping to get this work completed tonight.

There are plenty of legitimate reasons to still use commonjs, so it needs to be supported in a reasonable & compatible way.

[TrySound]

Yeah, it's good, but disabled by default :)

[tivac]

This is in modular-css-webpack@4.4.0