rework-pseudo-classes

Automatically add in companion classes where psuedo-selectors are used. This allows you to add the class name to force the styling of a pseudo-selector, which can be really helpful for testing or being able to concretely reach all style states.

Installation

$ npm install rework-pseudo-classes

Example

rework(css)
  .use(pseudoclasses({
    blacklist: [], // default contains ‘:root’.
    allCombinations: true // default is false. If true, will output CSS with all combinations of pseudo styles/pseudo classes.
  }))
  .toString();

style.css

.some-selector:active {
  text-decoration: underline;
}

yields

.some-selector:active,
.some-selector.psuedo-active {
  text-decoration: underline;
}

Edge cases

• This plugin turns parenthesis into two hyphens -- so nth-child would look like .class.pseudo-nth-child--5--.
• Pseudo-selectors with two colons are ignored entirely since they're a slightly different thing.
• Chained psuedo-selectors just become chained classes: :focus:hover becomes .pseudo-focus.pseudo-hover.

Tests

$ npm test

License

(MIT)