https://github.com/vitkarpov/postcss-host

PostCSS plugin to make :host selectors work properly with pseudo-classes
https://github.com/vitkarpov/postcss-host

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/vitkarpov/postcss-host
• Owner: vitkarpov
• Created: 2015-02-09T09:07:17.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T18:45:00.000Z (over 2 years ago)
• Last Synced: 2025-03-06T15:44:17.248Z (about 2 months ago)
• Language: JavaScript
• Size: 130 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss-host

> [PostCSS](https://github.com/postcss/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

```css

:host:hover {

    ...

}

:host.bar {

    ...

}

```

you should write

```css

: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

```console

$ npm install postcss-host

```

## Usage

```js

// 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](test) for examples.

## Contributing

Work on a branch

```console

$ git clone https://github.com/vitkarpov/postcss-host.git

$ git checkout -b patch-1

$ npm install

$ npm test

```