css-modules-require-hook

What is css-modules-require-hook?

The css-modules-require-hook package is a tool that allows you to use CSS Modules in Node.js by transforming CSS files into JavaScript objects. This is particularly useful for server-side rendering (SSR) and testing environments where you need to handle CSS files in a Node.js context.

What are css-modules-require-hook's main functionalities?

Basic Setup

This feature allows you to set up the css-modules-require-hook with a custom naming pattern for the generated CSS class names. The code sample demonstrates how to configure the hook and require a CSS file, which will be transformed into a JavaScript object.

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

hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]'
});

const styles = require('./styles.css');
console.log(styles);

Custom Preprocessor

This feature allows you to use a custom preprocessor like Sass. The code sample shows how to configure the hook to preprocess SCSS files using node-sass before transforming them into JavaScript objects.

const hook = require('css-modules-require-hook');
const sass = require('node-sass');

hook({
  extensions: ['.scss'],
  preprocessCss: (data, filename) => {
    return sass.renderSync({
      data,
      file: filename
    }).css;
  }
});

const styles = require('./styles.scss');
console.log(styles);

Custom CamelCase

This feature enables the conversion of CSS class names to camelCase in the resulting JavaScript object. The code sample demonstrates how to configure the hook to use camelCase and access the class names in camelCase format.

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

hook({
  camelCase: true
});

const styles = require('./styles.css');
console.log(styles);
console.log(styles.someClassName); // Access class names in camelCase

Other packages similar to css-modules-require-hook

babel-plugin-react-css-modules

babel-plugin-react-css-modules is a Babel plugin that allows you to use CSS Modules in React components with a more seamless integration. Unlike css-modules-require-hook, which is used in a Node.js context, this plugin is specifically designed for use with Babel and React.

postcss-modules

postcss-modules is a PostCSS plugin that enables the use of CSS Modules. It provides more flexibility and can be integrated into a broader PostCSS setup, making it suitable for build processes that already use PostCSS. Unlike css-modules-require-hook, it is not limited to Node.js environments.

css-modules-loader-core

css-modules-loader-core is a low-level library for loading and processing CSS Modules. It provides the core functionality needed to implement CSS Modules in various environments. While css-modules-require-hook is a higher-level tool for Node.js, css-modules-loader-core offers more granular control and can be used to build custom solutions.

README

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.

Usage

Requirements

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

Installation

$ npm i css-modules-require-hook

Tuning (options)

• 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 preprocessCss — 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.
• 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.
• array extensions — attach the hook to additional file extensions (for example ['.scss']).

Examples

Basically you need to load this module before you start loading css-modules. Otherwise you'll get an exception. 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')
  ]
});