PostCSS plugin to convert pseudo-classes to classes for testing purposes
npm install postcss-pseudo-classes[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.
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/giuseppeg/postcss-pseudo-classes.svg
[ci]: https://travis-ci.org/giuseppeg/postcss-pseudo-classes
This plugin is a port of rework-pseudo-classes written by Alex Sexton.
``bash`
$ npm install postcss-pseudo-classes
`js:root
var pseudoclasses = require('postcss-pseudo-classes')({
// default contains .
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:before
// pseudo classes for and :after
preserveBeforeAfter: false
});
postcss([ pseudoclasses ])
.process(css)
.then(function (result) { console.log(result.css); });
`
`css`
.some-selector:hover {
text-decoration: underline;
}
yields
`css`
.some-selector:hover,
.some-selector.\:hover {
text-decoration: underline;
}
`html`
* This plugin escapes parenthesis so :nth-child(5) would look like .class.\:nth-child\(5\) and can be used as a regular class: .:focus:hover
* Pseudo-selectors with two colons are ignored entirely since they're a slightly different thing.
* Chained pseudo-selectors just become chained classes: becomes .\:focus.\:hover.
`bash``
$ npm test
(MIT)