Reads a CSS file meant for 'global context' and prefixes each selector with a specified selector, wrapping the remainder in :global()
.SomeLibrary .wrapper {
width: 100%;
}
.SomeLibrary-blah li:nth-child(5) {
opacity: 0.5;
}
/* Becomes */
.myPrefix :global(.SomeLibrary .wrapper) {
width: 100%;
}
.myPrefix :global(.SomeLibrary-blah li:nth-child(5)) {
opacity: 0.5;
}
This is useful when using CSS Modules and you want to include something like CodeMirror, Leaflet and other libraries which has CSS which are globally scoped, but you want to at the very least contain it to within one of your classes.
As a CLI tool:
npm install -g prefixify-css
or, if you want to use it programatically:
npm install prefixify-css
$ prefixify
prefixify-css: Reads a CSS file meant for 'global context' and prefixes each selector with a specified selector, wrapping the remainder in :global()
The result is written to stdout.
Usage
$ prefixify <input> <selector>
Examples
$ prefixify leaflet.css '.leafletInput' > prefixed.css
$ prefixify - '.leafletInput' < cat /path/to/leaflet.css
Alternatively, you can run it through npx
without even having to install it:
$ npx prefixify-css myFile.css .mySelector
const prefixify = require('prefixify-css')
prefix({
content: '.CodeMirror { width: 100%; }',
selector: '.myClass',
})
.then((result) => {
// .myClass :global(.CodeMirror) { width: 100%; }
console.log(result)
})
.catch((error) => {
console.error(error)
})
MIT © Espen Hovlandsdal