postcss-modules-extend-rule

postcss-modules-extend-rule

PostCSS plugin for using @extend at-rule with CSS Modules.

.myClass {
  @extend .someClass from 'module';
}

This package is using PostCSS Extend Rule plugin internally - extending it's behaviour to work with CSS Modules easily.

Motivation

TODO: Describe why composes isn't enough.

Installation

yarn add --dev postcss-modules-extend-rule

Usage

This package consists of two PostCSS plugins. To use it, your setup must allow both pre-bundling and post-bundling PostCSS processing. First, before the CSS Modules bundling, all modules must be tranformed with postcss-modules-extend-rule/pre plugin. Then, the final bundle must be processed with postcss-modules-extend-rule/post.

TODO: article on why it's needed

const { pre, post } = require('postcss-modules-extend-rule');
// or
const pre = require('postcss-modules-extend-rule/pre'); // use me before bundling happens
const post = require('postcss-modules-extend-rule/post'); // use me on the final CSS bundle

With webpack

Pre-bundling and post-bundling processing can be implemented in webpack environment by combining PostCSS Loader and PostCSSAssetsPlugin:

// in CSS loader chain
{
  loader: 'postcss-loader',
  options: {
    plugins: [require('postcss-modules-extend-rule/pre')]
  }
}

// in plugins
new PostCSSAssetsPlugin({
  test: /\.css$/,
  plugins: [require('postcss-modules-extend-rule/post')],
});

Example working setup can be fun in our test webpack.config.js.

TODO: article with details and other setups (e.g. style-loader)

Options

This package supports all options from PostCSS Extend Rule. Both pre and post plugins accept the same set of options.

postcssModuleExtends.pre({ onFunctionalSelector: 'warn' });

Caveats

Functional selectors

Functional selectors (e.g. %foo) are not supported yet. Contributions are very welcome!

License

MIT