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

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.

Requirements

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"

Install

$ npm i css-modules-require-hook

Usage

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

Available options

Providing additional options allows you to get advanced experience. See the variants below.

var hook = require('css-modules-require-hook');
hook({ /* options */ });

rootDir option

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.

use option

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.

createImportedName option

Alias for the createImportedName option from the postcss-modules-extract-imports plugin. This is optional. Won't work if you use option.

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

mode option

Alias for the mode option from the postcss-modules-local-by-default plugin. This is optional. Won't work if you use option.

Examples

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')
  ]
});