PostCSS plugin to add companion classes to pseudo-classes for testing purposes (works with css modules)
npm install postcss-pseudo-companion-classes[PostCSS] plugin to add companion classes to pseudo-classes for testing purposes. This allows you to add the class name to force the styling of a pseudo-class,
which can be helpful for visual QA and building sticker sheets of all style states.
``css`
.some-selector:hover {
text-decoration: underline;
}$3
`css`
.some-selector:hover,
.some-selector.\:hover {
text-decoration: underline;
}
[PostCSS]: https://github.com/postcss/postcss
Step 1: Install plugin:
`sh`
npm install --save-dev postcss postcss-pseudo-companion-classes
or
`sh`
yarn add --dev postcss postcss-pseudo-companion-classes
Step 2: Check you project for existed PostCSS config: postcss.config.js
in the project root, section in package.json
or in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
Step 3: Add the plugin to plugins list:
`diff`
module.exports = {
plugins: [
+ require('postcss-pseudo-companion-classes'),
require('autoprefixer')
]
}
[official docs]: https://github.com/postcss/postcss#usage
| An array of pseudo-classes to skip when generating companion classes | [':before', ':after'] |
| restrictTo | Limit the companion classes to an array of pseudo-classes | |
| allCombinations | When multiple pseudo-classes are present (ie .selector:hover:focus), output classes for each combination
.selector:hover:focus,
.selector:hover.\\:focus,
.selector.\\:hover:focus,
.selector.\\:hover.\\:focus
| false |
| isModule | Wrap companion classes in :global() to prevent them from being renamed when CSS modules are being used | false
| | The prefix for the companion class | \\:` |