The require hook compiles CSS Modules in runtime. This is similar to Babel's babel/register.

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Learn more in the article CSS Modules - Welcome to the Future by Glen Maddern.

Compiling in runtime, universal usage.

To use this tool we require Node.js v0.12.x (or higher) and several modules to be installed.

• postcss version 4 or higher
• postcss-modules-extract-imports
• postcss-modules-local-by-default
• postcss-modules-scope

$ npm i css-modules-require-hook

• function createImportedName — short alias for the postcss-modules-extract-imports plugin's createImportedName option.
• function generateScopedName — short alias for the postcss-modules-scope plugin's option. Helps you to specify the custom way to build generic names for the class selectors.
• function processCss — in rare cases you may want to get compiled styles in runtime, so providing this option helps.
• string rootDir — absolute path to the project directory. Providing this will result in better generated class names. It can be obligatory, if you run require hook and build tools (like css-modulesify) from different working directories.
• string to — provides to option to the LazyResult instance.
• array use — custom subset of postcss plugins.

Basically you need to require this plugin before other requires for your styles will occur. For example:

icon.css

.icon
{
  composes: fa fa-hand-peace-o from 'font-awesome/css/font-awesome.css';
}

server.js

require('css-modules-require-hook');

var styles = require('./icon.css');
var html = '<i class="' + styles.icon + '"></i>';
// send it somehow :)

You'll get:

<i class="_icon_font-awesome-css-font-awesome__fa _icon_font-awesome-css-font-awesome__fa-hand-peace-o"></i>'

In rare cases you may want to tune the require hook for better experience.

var hook = require('css-modules-require-hook');
var path = require('path');

hook({
  // setting root to the parent directory
  rootDir: path.join(__dirname, '..')
});

If you want to add any postcss plugins to the pipeline - you should use 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')
  ]
});