Plugin which let you write CSS based on component's state.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
test
.gitignore
.travis.yml
CHANGELOG.md
README.md
index.js
package.json

README.md

postcss-state-selector

Build Status npm version license

Plugin which let you write CSS based on component's state.
We need to call propsToClass here to work with React properly (example).

Installation

npm i postcss-state-selector

Example

module.exports = {
    plugins: [
        ...
        postcssStateSelector(),
        ...
    ],
};
/* Input example */
div[is-admin="true"][is-type="warning"] p[is-state="visible"] {
  color: black;
  background: yellow;
}

div[data-type="clear"] {
  color: blue;
}
/* Output example */
div.is-admin-true.is-type-warning p.is-state-visible {
  color: black;
  background: yellow;
}

div[data-type="clear"] {
   color: blue;
}

Options

modules

type: boolean
default: true

If you are not using CSS Modules set value to false.

postcssStateSelector({ modules: false })

Example of work

here