@acolorbright/css-module-bem-loader

css-module-bem-loader

A webpack loader to transform a CSS module object with additional BEM features

Install

This CSS loader depends on webpack and css-loader to work.

npx install-peerdeps -D @acolorbright/css-module-bem-loader && npm install -DE @acolorbright/css-module-bem-loader

Configure

The css module BEM loader can only be used in combination with css-loader and has to be applied after css-loader and before style-loader in the webpack configuration. The loader only works with .module.css and .modules.scss files.

{
  test: /\.module\.css/,
  use: [
    'style-loader',
    '@acolorbright/css-module-bem-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          namedExport: false,
          mode: 'pure'
        }
      }
    }
  ]
}

Note that the loader doesn't work with the modules.namedExport css-loader option enabled. The module can be used with or without the css-loader option esModule

Usage

In order to use the loader correctly you need to make sure that a module's block classname is equal to the module's filename:

/* navigation.module.css */
.navigation {
  /* styles */
}

.navigation__links {
  /* styles */
}

.navigation--expanded {
  /* styles */
}

The transformed styles object applies scopes for your BEM classnames so that it's easier to select classnames without having to look up complex keys containing dashes and underscores:

import styles from './navigation.module.css'

/* get the block className */
styles.block

/* get an element className */
styles.element.links

/* get a modifier className */
styles.modifier.expanded

Since there's only one block selector, the block key returns a string. For the elements and modifiers the object provides two nested objects element and modifier which contain the relevant classnames without the block__ and block-- prefix.

In case the block classname doesn't contain any CSS rules, the block classname will return an empty string The BEM keys are being added on top of the original object keys, so it's still possible to use the module without the added keys