Auto CSS Modules Webpack Plugin

Automatically detect and mark CSS modules for webpack.

Read this in other languages: English, 简体中文

Installation

For npm

npm install --save-dev auto-css-modules-webpack-plugin

For yarn

yarn add -D auto-css-modules-webpack-plugin

Usage

For a complete example, please check examples

config with css-loader

webpack.config.js

const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        oneOf: [
          {
            // enable cssModules for specific resourceQuery
            resourceQuery: /modules/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 0,
                  // Enable CSS Modules features and setup options for them.
                  modules: {
                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
                    // ... Other options
                  }
                }
              }
            ]
          },
          {
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 0,
                }
              }
            ]
          },
        ],
      },
    ],
  },
  // Add this plugin
  plugins: [new AutoCSSModulesWebpackPlugin()]
};

The following statements will be marked as CSS Modules

import styles from './index.css'
// Or
const styles = require('./index.css')
// Or
const styles = _anyFunctionWrap(require('./index.css'))
// Or
const styles = require('./index.css').default

Options

You can pass an options object to AutoCSSModulesWebpackPlugin. Allowed values are as follows:

Name	Type	Default	Description
queryFlag	{string}	'modules'	The resource query will add to the request string
extraExtnames	{string[]}	[]	More extnames are needed to consider as style file

Default extname list is ['.css', '.less', '.sass', '.scss', '.stylus', '.styl'], cannot be overwrite currently.

How it works

Because the usage scenario of CSS Modules always needs import or require a CSS file then bind it to a variable, so we can analyze the ast of the file, when it matches this pattern, add a query to the request string.

For example, import styles from './index.css' will be converted to import styles from'./index.css?modules'

And a hook parser.hooks.program inside webpack allows us to modify the ast of the file before it actually parses the dependencies.

Then we can use resourceQuery to pass different options to the loader, one for normal CSS and one for CSS Modules.

Thanks

Inspired by @umijs/babel-plugin-auto-css-modules

License

MIT