webpack-contrib / style-loader

Style Loader
MIT License
1.65k stars 473 forks source link

Can not export selectors from `@import url(...)` #598

Closed wswmsword closed 1 year ago

wswmsword commented 1 year ago

Bug report

Actual Behavior

a.module.css:

@import url(./common.module.css);
.a {
   color: green;
}

common.module.css:

.common {
   color: yellow;
}

webpack.config.js:

module.export = {
  entry: {
    main: "./index.js",
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: "[path][name]__[local]--[hash:base64:5]",
              exportLocalsConvention: "camelCaseOnly",
            }
          }
        },
      ]
    }]
  },
};

index.js:

import a from "./a.css";
console.log(a.a); // "a-module__a--DFtIP"
console.log(a.common); // undefined

Expected Behavior

index.js:

import a from "./a.css";
console.log(a.a); // "a-module__a--DFtIP"
console.log(a.common); // common-module__common--M2JvH

How Do We Reproduce?

Here's an example repository.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 263.45 MB / 32.00 GB
  Binaries:
    Node: 18.14.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 111.0
    Safari: 16.3
  Packages:
    copy-webpack-plugin: ^11.0.0 => 11.0.0 
    css-loader: ^6.7.3 => 6.7.3 
    postcss-loader: ^7.1.0 => 7.1.0 
    style-loader: ^3.3.2 => 3.3.2 
  Global Packages:
    webpack-cli: 5.0.1
alexander-akait commented 1 year ago

That is expected, we don't reexport nested @import, sorry it is by CSS modules design, because you can have the common class inside a.module.css and common.module.css files and so they can overlap and it will be a problem (but yes, you have specific options and it won't happen to you), anyway we can't change logic because we align to CSS modules logic https://github.com/css-modules/icss, and I don't think we can change it here (and look like docs was not updated for a long time)

alexander-akait commented 1 year ago

Anyway feel free to feedback