Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drwpow/postcss-scoped-styles
https://github.com/drwpow/postcss-scoped-styles
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/drwpow/postcss-scoped-styles
- Owner: drwpow
- License: mit
- Created: 2022-02-25T20:51:09.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-25T21:20:55.000Z (almost 3 years ago)
- Last Synced: 2024-10-15T00:31:06.539Z (2 months ago)
- Language: TypeScript
- Size: 16.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# postcss-scoped-styles
Scope every selector within CSS with a class. Can either be a unique, randomized class per CSS file (default), or can be a class of your choosing.
Fast, lightweight, and zero dependencies.
## Installation
```
npm i postcss-scoped-styles
```
```js
// postcss.config.mjs
import postcssScopedStyles from 'postcss-scoped-styles';
export default {
plugins: [postcssScopedStyles()],
};
```
Any and all selectors you use will now be scoped:
```diff
- h1 {
+ h1.gZHu1x {
font-size: 32px;
}
- .button {
+ .button.gZHu1x {
color: blue;
}
- #text-input {
+ #text-input.gZHu1x {
font-family: monospace;
}
```
However, you may opt out of this with the `:global()` selector (i.e. will remain as-written):
```diff
- :global(.button:hover) {
+ .button:hover {
color: blue;
}
```
It’s also important to note that `html` and `body` **won’t** be scoped either, as they can only appear in the document once (it also makes selecting them easier).
## Options
**scopedClass**
By default, a random 6-character class is added for each CSS document. You may customize that by providing a `scopedClass()` function that returns a string:
```js
// postcss.config.mjs
import postcssScopedStyles from 'postcss-scoped-styles';
export default {
plugins: [
postcssScopedStyles({
scopedClass({ uuid, selector }) {
return `my-scoped-class-${uuid}`; // .my-scoped-class-c10a6a
},
}),
],
};
```
The callback provides `uuid` and `selector` in an object param for extra context, but you don’t have to use these to generate the class. `uuid` is the random string that would have been applied on its own. It will be randomized on every pass, but it will stay consistent within each CSS document.