Request to add support for filtering files ends with ".module(s).(css|less|sass)"

[roland-reed]

css-loader has an option modules, when it is set to true, only files match /\.module\.\w+$/i.test(filename) will be treated as CSS modules, but typings-for-css-modules-loader cannot filtering files like css-loader, is it possible to add support for this feature? Thanks in advance.

[bgever]

I have the same requirement to separate non-module and module based CSS file imports.

As a workaround, I use multiple webpack matchers for now:

    module: {
      rules: [
        {
          test: /(?<!\.style)\.css$/i,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    require('postcss-import'),
                    require('tailwindcss'),
                    require('autoprefixer'),
                  ],
                },
              },
            }
          ]
        },
        {
          test: /\.style\.css$/i, // Could be matching 'module' instead, but find the resulting TS definitions more readable.
          use: [
            'style-loader',
            {
              loader: '@teamsupercell/typings-for-css-modules-loader',
              options: {
                disableLocalsExport: true, // Because we use 'style-loader'.
              }
            },
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentHashDigestLength: 5,
                }
              }
            }
          ]
        },
        // etc
      ],
    },

I would like to do the following instead:

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            {
              loader: '@teamsupercell/typings-for-css-modules-loader',
              options: {
                disableLocalsExport: true, // Because we use 'style-loader'.
              }
            },
            {
              loader: 'css-loader',
              options: {
                modules: {
                  auto: (resourcePath) => resourcePath.endsWith('.style.css'),
                  localIdentHashDigestLength: 5,
                },
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    require('postcss-import'),
                    require('tailwindcss'),
                    require('autoprefixer'),
                  ],
                },
              },
            }
          ]
        },
        // etc
      ],
    },