• Operating System: Linux
• Node Version: v10.17.0
• NPM Version: n/a, Yarn 1.15.2
• webpack Version: 4.41.2
• css-loader Version: 3.2.0

Expected Behavior

css-loader should produce correct output:

.outer-box__outerBox--1rUd7j4- .inner-box__innerBox--19HrVC2M.shared__box--3DFGfIs1 {background-color: lime;}

Actual Behavior

css-loader produces incorrect output:

.outer-box__outerBox--1rUd7j4- .inner-box__innerBox--19HrVC2Mshared__box--3DFGfIs1 {background-color: lime;}

Code

See below.

How Do We Reproduce?

Full repro case here:https://git.cryto.net/joepie91/icss-loader-test

Runyarn webpack to produce output with Webpack + css-loader (incorrect output), runyarn browserify-extract to produce output with Browserify + icssify (correct output).

Both output to the same files, so you can switch between them. Opentest/index.html in a browser to see the result.

The bug is caused by theimport handling using the JS/HTML-formatted (space-delimited) export, rather than a CSS-formatted (dot-delimited) export.

This means that when using a composed identifier (which consists of two space-delimited class names) as an imported identifier, the resulting selector rule will be broken (see code snippets above).

This can be fixed byreplacing spaces with dots in the case of ICSS imports.