README
postcss-host
PostCSS plugin to make :host selectors work properly with pseudo-classes
What is it about?
If you work with Shadow DOM and web components then you're probably familiar with :host
selector. It has some features.
Instead of
:host:hover {
...
}
:host.bar {
...
}
you should write
:host(:hover) {
...
}
:host(.bar) {
...
}
Postcss-host transforms the first into the second.
It might be useful when CSS is produced automatically by a preprocessor.
Installation
$ npm install postcss-host
Usage
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var postcssHost = require("postcss-host")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss([postcssHost])
.process(css, {
from: "src/index.css"
to: "dist/index.css"
})
.css
Checkout tests for examples.
Contributing
Work on a branch
$ git clone https://github.com/vitkarpov/postcss-host.git
$ git checkout -b patch-1
$ npm install
$ npm test