postcss-state-selector v1.0.0

postcss-state-selector

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

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: booleandefault: true

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

postcssStateSelector({ modules: false })