scope-css
Scope each css rule with a selector, ie. nest into parent
Last updated 7 years ago
by dfcreative
.
MIT
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ cnpm install scope-css
SYNC missed versions from
official npm registry.
scope-css 
Prefix or nest each style selector in a css string. Useful to create namespaced css for components, themes, applications, modular css etc. Also it is tiny.
Usage
const scope = require('scope-css');
scope(`
.my-component {}
.my-component-element {}
`, '.parent');
/*
`
.parent .my-component {}
.parent .my-component-element {}
`
*/
API
css = scope(css, parent, options?)
Return css string with each rule prefixed with the parent selector. Note that parent selector itself will be ignored. Also each :host keyword will be replaced with parent value. Example:
scope(`
.panel {}
:host {}
:host .my-element {}
.panel .my-element {}
.my-element {}
`, '.panel');
/*
`
.panel {}
.panel {}
.panel .my-element {}
.panel .my-element {}
.panel .my-element {}
`
*/
Options can scope keyframes via { keyframes: bool|prefixStr } option, eg.
scope(`
.panel {
animation: infinite loading 4s;
}
@keyframes loading {
from { top: 0; }
to { top: 100px; }
}
`, '.panel', { keyframes: true })
/*
`
.panel {
animation: infinite panel-loading 4s;
}
@keyframes panel-loading {
from { top: 0; }
to { top: 100px; }
`)
*/
css = scope.replace(css, 'replacement $1$2')
Apply replace to css, where $1 is matched selectors and $2 is rules for the selectors. It does not do any self/host detection, so use it for more flexible replacements.
scope.replace(`
.my-component, .my-other-component {
padding: 0;
}
`, '$1');
// `.my-component, .my-other-component`
See also
Credits
Based on this question.
Current Tags
- 2.0.0 ... latest (2 months ago)
dfcreative
dy