CSS modules keeps the original className mapping

[pastelsky]

Consider this CSS modules setup with extract text plugin-

Section.css

.section__heading {
  /* styles */
}

Section.js

import styles from './section.css'

function Section() {
  return <section> <h1 className={ styles.section__heading }> H1 </h1> </section>
}

Current behavior

Currently, css-loader goes through the normal process of creating a module out of the import, and even storing the original name mapping. The resulting JS file looks similar to

build.js (current)

//  Module
"5mvV":
  (function(module, exports) {
    module.exports={
      "section__heading":"_3a24I",
    };
  }),
// Usage
className={ __webpack_require__("5mvV").default.section__heading }
// ...

Expected behaviour

Ideally, css loader should just inline the "hashed" classname wherever its being used.
One of the benefits of hashing classnames is reduction in file sizes in comparison with techniques such as BEM. But if the original mapping is stored, this purpose is defeated.

build.js (expected)

// The classname is inlined
className="_3a24I"

[michael-ciniawsky]

CSS Modules will be removed for 'css-loader soon and will become a separate plugin (postcss-loader`)

The css-loader will be able to export locals as Named ESM Exports in v1.0.0

export const className = 'Ä3825t';
// ... CSS Modules
//... Custom Exports (from other postcss-plugins)