component-css-loader

Overview

This Webpack loader applies a prefix to each class name, ID, and animation name that appears within a given style sheet. While similar functionality could be achieved using e.g. postcss-loader, the unique feature of this loader is that the prefix is supplied in the source content rather than within the Webpack configuration. Thus, a unique prefix can be applied to each style sheet module, allowing independent scoping.

Example

Input

{
  "moduleId": "button",
  "css": ".container\n {\n  /*...*/\n}"
}

Output

.button___container {
  /*...*/
}

Options

prefix: string

A custom prefix to apply to classes, IDs, and animation names. Wrap the name of each field you would like to include in square brackets.

For example, given the default value [moduleId]___, the loader will replace the [moduleId] placeholder with the value of the moduleId field in the JSON input.

css: string

A custom field name for CSS content. Defaults to css.

FAQ

The JSON content format is inconvenient and doesn't look like code I would normally write.

Indeed, the JSON content that this loader accepts as input would typically be the output produced by another loader, such as execute-module-loader.