PostCSS plugin to automatically add in companion classes where pseudo-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.

Example:

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

yields

.some-selector:hover,
.some-selector.\:hover {
  text-decoration: underline;
}

This plugin is a port of rework-pseudo-classes written by Alex Sexton.

$ npm install postcss-pseudo-classes

require('postcss-pseudo-classes')({
  // default contains `:root`.
  blacklist: [],
  // (optional) create classes for a restricted list of selectors
  // N.B. the colon (:) is optional
  restrictTo: [':nth-child', 'hover'],
  // default is `false`. If `true`, will output CSS
  // with all combinations of pseudo styles/pseudo classes.
  allCombinations: true,
  // default is `true`. If `false`, will generate
  // pseudo classes for `:before` and `:after`
  preserveBeforeAfter: false
  // default is `\:`. It will be added to pseudo classes.
  prefix: '\\:'
});

• This plugin escapes parenthesis so :nth-child(5) would look like .class.\:nth-child\(5\) and can be used as a regular class: <button class=":nth-child(5)">howdy</button>.
• Pseudo-selectors with two colons are ignored entirely since they're a slightly different thing.
• Chained pseudo-selectors just become chained classes: :focus:hover becomes .\:focus.\:hover.

$ npm test

@ai

(MIT)