https://github.com/sms-system/postcss-scopes
PostCSS plugin that automagic adds scopes to CSS
https://github.com/sms-system/postcss-scopes
css css-modules html postcss postcss-scopes
Last synced: 4 months ago
JSON representation
PostCSS plugin that automagic adds scopes to CSS
- Host: GitHub
- URL: https://github.com/sms-system/postcss-scopes
- Owner: sms-system
- License: mit
- Created: 2016-06-24T02:02:09.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-08T16:14:58.000Z (almost 10 years ago)
- Last Synced: 2025-07-03T20:05:49.348Z (12 months ago)
- Topics: css, css-modules, html, postcss, postcss-scopes
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-scopes
[PostCSS](https://github.com/postcss/postcss) plugin that automagic adds scopes to CSS
## Features
- Nested scopes
- Support for pseudo-elements on scoped elements
- Global classes inside the scopes, using `global` attribute, or automatically by matching pattern in `globalPatterns` option
- Automatic html recomposition, which doesn't break initial code
- Easy integration into an existing project
## What is it ?
Imagine that you have HTML like this:
```html
Main title
Block Title
```
and CSS:
```css
.title {
background: #da9a9a;
}
.block .title {
color: #da9a9a;
}
```
If we try to display this markup, we get a problem:
`.block .title` inherited styles from root `.title`, but we don't want this.
**And what to do ?**
Just add attribute `scoped` to element with class `.block`,
```html
Main title
Block Title
```
and all classes inside it automagically become isolated.
After the transformation HTML and CSS become like this:
```html
Main title
Block Title
```
```css
.title {
background: #da9a9a;
}
.block .title_scope1 {
color: #da9a9a;
}
```
## Options
| Option | Description |
| :-------------------------------------------------------------- | :----------------------------------------------------------------------- |
| **optimiseCss**
Type: `Boolean`, default: `true` |
Remove unused classes after processing |
| **globalPatterns**
Type: `Array` |
Array of RegExp patterns matching global classes |
| **html**
Type: `String` |
Initial html |
| **getHTML**
Type: `Function`, arguments `html` |
The function takes an argument compiled html for further processing |
## Example
```js
postcss([
scopes({
globalPatterns: ['^js-'],
html: `
Main title
Block Title
`,
getHTML: function (html) {
console.log(html)
}
})
]).process(`
.title {
background: #da9a9a;
}
.js-title-class {
text-decoration: underline;
}
.block .title {
color: #da9a9a;
}`
)
```
## Support
Please [open an issue](https://github.com/sms-system/postcss-scopes/issues/new) for support.