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

Specifying options

require('css-modules-require-hook')({
  // Setting this allows you to specify custom PostCSS plugins
  // You may use functions or strings, which match to the modules with the same name
  use: [] // may use `u` for short
});