PostCSS plugin to make :host selectors work properly with pseudo-classes

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.

$ npm install postcss-host

// 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.

Work on a branch

$ git clone https://github.com/vitkarpov/postcss-host.git
$ git checkout -b patch-1
$ npm install
$ npm test