Automatically compiles a CSS Module to a low-level interchange format called ICSS or Interoperable CSS.
One of the ways you can compile CSS Modules to the ICSS format is through the require hook. The require hook will bind itself to node's require and automatically compile files on the fly. This is similar to Babel's babel/register.
To use this tool we require postcss and few plugins to be installed on your project. See the list below:
"postcss": "4.x"
"postcss-modules-extract-imports": "0.x"
"postcss-modules-local-by-default": "0.x"
"postcss-modules-scope": "0.x"
$ npm i css-modules-require-hook
require('css-modules-require-hook');
Providing additional options allows you to get advanced experience. See the variants below.
var hook = require('css-modules-require-hook');
hook({ /* options */ });
Aliases are root
, d
.
Absolute path to your project's root directory. This is optional but providing it will result in better generated classnames. It can be obligatory, if you run require hook and build tools, like css-modulesify from different working directories.
Alias is u
.
Custom list of plugins. This is optional but helps you to extend list of basic postcss plugins. Also helps to specify options for particular plugins.
Alias for the createImportedName
option from the postcss-modules-extract-imports plugin. This is optional. Won't work if you use
option.
Custom function to generate class names. This is optional. Alias for the generateScopedName
option from the postcss-modules-scope plugin. Won't work if you use
option.
Alias for the mode
option from the postcss-modules-local-by-default plugin. This is optional. Won't work if you use
option.
If you want to add custom functionality, for example CSS Next plugin, you should provide the use
option.
var hook = require('css-modules-require-hook');
hook({
use: [
// adding CSS Next plugin
require('cssnext')(),
// adding basic css-modules plugins
require('postcss-modules-extract-imports'),
require('postcss-modules-local-by-default'),
require('postcss-modules-scope')
]
});