GitHub - css-modules/css-modules-require-hook at 552c64a920c6c0b67a6d47aac100e1a43ba781ef (original) (raw)

css-modules-require-hook

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

What is CSS Modules

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.

Features

Compiling in runtime, universal usage.

Requirements

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

Installation

$ npm i css-modules-require-hook

Usage

In this section I've tried to cover the common cases of usage.

Basic example

Basically to attach the require hook you need to require this module. If you need to adjust it see the tuning section below.

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

// var styles = require('./icon.css');

Adding custom PostCSS plugins

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

hook({ prepend: [ // adding CSS Next plugin cssnext(), ], });

Specify custom function to build generic names

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

// specify your custom function function generateScopedName(exportedName, path) {/* your code here */}

hook({ generateScopedName: generateScopedName, });

Using Stylus as a preprocessor

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

hook({ extensions: ['.styl'], preprocessCss: function (css, filename) { return stylus(css) .set('filename', filename) .render(); }, });

// var styles = require('./demo.styl');

Tuning (options)

To adjust the require hook you need to provide params to the exported function.

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

hook({ // append: [], // generateScopedName: function () {}, // or any other options // see the list below });

append array

Appends custom plugins to the end of the PostCSS pipeline.

prepend array

Prepends custom plugins to the beginning of the PostCSS pipeline.

use array

Provides the full list of PostCSS plugins to the pipeline. Providing this cancels append, prepend, createImportedName, generateScopedName options.

preprocessCss function

In rare cases you may want to precompile styles, before they will be passed to the PostCSS pipeline. You should use synchronous transformations, since require function is synchronous.

processCss function

In rare cases you may want to get compiled styles in runtime, so providing this option helps.

extensions array

Attach the require hook to additional file extensions (for example ['.scss']).

rootDir string

Provides 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.

to string

Provides to option to the LazyResult instance.

createImportedName function

Short alias for the postcss-modules-extract-imports plugin's createImportedName option.

generateScopedName function

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.

mode string

Short alias for the postcss-modules-local-by-default plugin's option.

Debugging

debug package is used for debugging. So to turn it on simply specify the DEBUG environment variable: