Auto resolving css-modules import and default import

[Yegorich555]

Feature Proposal

We have two imports ES6 and It looks smarter when resolving some imports will be work in the following automatic way:
import styles from 'someFiles.css' as css-module
import 'someFiles2.css' as default import (without css-module-specification)

Feature Use Case

The main idea is simplifying webpack config and avoiding misunderstanding in mixed project (when we have some files as css-modules and some-files as default-css).

Is implementing of this possible?

[alexander-akait]

import from 'someFiles2.css' invalid JS syntax, so it is impossible

[alexander-akait]

Closing due to inactivity.

[Yegorich555]

Sorry. I made mistake. Fixed in the first message:
import styles from 'someFiles.css' as css-module
import 'someFiles2.css' as default import (without css-module-specification)

[alexander-akait]

@Yegorich555 can you clarify what you want, hard to udnestand

[Yegorich555]

According to css-modules specification we have to use:
import styles from 'someFile' and use styles as object.

But for switching on css-modules rule we should configure this for exact-files (by regex pattern). Does it makes sense? Why can not it be resolved automatically? I'm not sure is it question for css-loader?
The different imports can provide different rules to us. And It seems can be resolved these without configuring css-loader at all.
import styles from 'someFile.css' it can be resolved as css-module
import 'someFile.css' it can be resolved as default css-import (without css-module-specification)

Why do I need this:

1. Avoiding the overwhelmed webpack configuration.
2. Such auto-resolving imports excludes headache in projects when we have some files like css-module and some files as plain-css (that should be only attached to the project)

Here you can see 2 config sections which I use in projects:

 {
    // rules for style-files
    test: /\.css$|\.scss$/,
    oneOf: [
      /* config .oneOf('normal-modules') - rule for [name].module.css files - rule for css-modules */
      {
        test: /\.module\.\w+$/,
        use: [
          isDevServer
            ? "style-loader" // it extracts style directly into html (MiniCssExtractPlugin works incorrect with hmr and modules architecture)
            : MiniCssExtractPlugin.loader, // it extracts styles into file *.css
          // TODO: improve plugin for splitting by files for dev purpose
          {
            loader: "css-loader", // it interprets @import and url() like import/require() and it resolves them (you can use [import *.css] into *.js).
            options: {
              modules: true
            }
          },
          {
            loader: "sass-loader", // it compiles Sass to CSS, using Node Sass by default
            options: {
              data: '@import "variables";', // inject this import by default in each scss-file
              includePaths: [path.resolve(__dirname, "src/styles")]
            }
          },
          "postcss-loader" // it provides adding vendor prefixes to CSS rules using values from Can I Use (see postcss.config.js in the project)
        ]
      },
      /* config .oneOf('normal') */
      {
        use: [
          isDevServer
            ? "style-loader" // it extracts style directly into html (MiniCssExtractPlugin works incorrect with hmr and modules architecture)
            : MiniCssExtractPlugin.loader, // it extracts styles into file *.css
          "css-loader", // it interprets @import and url() like import/require() and it resolves them (you can use [import *.css] into *.js).
          {
            loader: "sass-loader", // it compiles Sass to CSS, using Node Sass by default
            options: {
              data: '@import "variables";', // inject this import by default in each scss-file
              includePaths: [path.resolve(__dirname, "src/style")]
            }
          },
          "postcss-loader" // it provides adding vendor prefixes to CSS rules using values from Can I Use (see postcss.config.js in the project)
        ]
      }
    ]
  };

[Yegorich555]

How can css-config looks like:

{
    // rules for style-files
    test: /\.css$|\.scss$/,
    use: [
      isDevServer
        ? "style-loader" // it extracts style directly into html (MiniCssExtractPlugin works incorrect with hmr and modules architecture)
        : MiniCssExtractPlugin.loader, // it extracts styles into file *.css
      {
        loader: "css-loader", // it interprets @import and url() like import/require() and it resolves them (you can use [import *.css] into *.js).
        options: {
          modules: "auto"
        }
      },
      {
        loader: "sass-loader", // it compiles Sass to CSS, using Node Sass by default
        options: {
          data: '@import "variables";', // inject this import by default in each scss-file
          includePaths: [path.resolve(__dirname, "src/styles")]
        }
      },
      "postcss-loader" // it provides adding vendor prefixes to CSS rules using values from Can I Use (see postcss.config.js in the project)
    ]
};

[alexander-akait]

For webpack@5 CSS will be built-in so it is not high priority right now, but idea is good, do you want send a PR (PoC), we have this.resourcePath and can implement option for modules: { test: /\.module\.\w+$/ }. Shortly:

{
    // rules for style-files
    test: /\.css$|\.scss$/,
    use: [
      isDevServer
        ? "style-loader" // it extracts style directly into html (MiniCssExtractPlugin works incorrect with hmr and modules architecture)
        : MiniCssExtractPlugin.loader, // it extracts styles into file *.css
      {
        loader: "css-loader", // it interprets @import and url() like import/require() and it resolves them (you can use [import *.css] into *.js).
        options: {
          modules: {
            test: /\.module\.\w+$/,
          }
        }
      },
      {
        loader: "sass-loader", // it compiles Sass to CSS, using Node Sass by default
        options: {
          data: '@import "variables";', // inject this import by default in each scss-file
          includePaths: [path.resolve(__dirname, "src/styles")]
        }
      },
      "postcss-loader" // it provides adding vendor prefixes to CSS rules using values from Can I Use (see postcss.config.js in the project)
    ]
};

[Yegorich555]

Yes. Such config looks nice. I like it. What can I do for this?

[alexander-akait]

Need improve checking here https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L54

[codeyourwayup]

very good examplation

{
// rules for style-files
test: /.css$|.scss$/,
oneOf: [
/* config .oneOf('normal-modules') - rule for [name].module.css files - rule for css-modules */
{
test: /.module.\w+$/,
use: [
isDevServer
? "style-loader" // it extracts style directly into html (MiniCssExtractPlugin works incorrect with hmr and modules architecture)
: MiniCssExtractPlugin.loader, // it extracts styles into file *.css
// TODO: improve plugin for splitting by files for dev purpose
{
loader: "css-loader", // it interprets @import and url() like import/require() and it resolves them (you can use [import *.css] into .js).
options: {
modules: true
}
},
{
loader: "sass-loader", // it compiles Sass to CSS, using Node Sass by default
options: {
data: '@import "variables";', // inject this import by default in each scss-file
includePaths: [path.resolve(__dirname, "src/styles")]
}
},
"postcss-loader" // it provides adding vendor prefixes to CSS rules using values from Can I Use (see postcss.config.js in the project)
]
},
/ config .oneOf('normal') */
{
use: [
isDevServer
? "style-loader" // it extracts style directly into html (MiniCssExtractPlugin works incorrect with hmr and modules architecture)
: MiniCssExtractPlugin.loader, // it extracts styles into file *.css
"css-loader", // it interprets @import and url() like import/require() and it resolves them (you can use [import *.css] into *.js).
{
loader: "sass-loader", // it compiles Sass to CSS, using Node Sass by default
options: {
data: '@import "variables";', // inject this import by default in each scss-file
includePaths: [path.resolve(__dirname, "src/style")]
}
},
"postcss-loader" // it provides adding vendor prefixes to CSS rules using values from Can I Use (see postcss.config.js in the project)
]
}
]
};