https://github.com/nsaunders/component-css-loader
A Webpack loader that applies a prefix to CSS class names, IDs, and animation names
https://github.com/nsaunders/component-css-loader
Last synced: about 1 month ago
JSON representation
A Webpack loader that applies a prefix to CSS class names, IDs, and animation names
- Host: GitHub
- URL: https://github.com/nsaunders/component-css-loader
- Owner: nsaunders
- License: mit
- Created: 2023-01-16T20:46:56.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T20:41:36.000Z (over 2 years ago)
- Last Synced: 2025-03-01T10:06:17.764Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 181 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](http://github.com/webpack-contrib/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**
```json
{
"moduleId": "button",
"css": ".container\n {\n /*...*/\n}"
}
```
**Output**
```css
.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](https://github.com/nsaunders/execute-module-loader).