Post CSS plugin for simplifying or selectors (,). Instead of duplicating a selector for a few changes use the or() pseudo-class in your selector. Similar to the is() or where() pseudo classes, but allows hierarchies to be included.
| Before | After |
fieldset:or(:hover, > *:focus) {
[...]
} |
fieldset:hover,
fieldset > *:focus {
[...]
} |
$ npm install postcss-or
Add postcss-or to your list of postcss plugins.
plugins: [
'postcss-or',
]The first parameters is an options object with the following values.
-
{boolean} preserveWhitespace = falseWhether to preserve the whitespace in between the pseudo class options. -
{string} pseudoClass = 'or'The name of the at rule.
plugins: [
['postcss-or', {
preserveWhitespace: true,
pseudoClass: 'any',
}],
]With preserveWhite set to true.
| Before | Disabled | Enabled |
.panel:or(.panel-border, .panel-content.panel-border) {
[...]
} |
.panel.panel-border,
.panel.panel-content.panel-border {
[...]
} |
.panel.panel-border,
.panel .panel-content.panel-border {
[...]
} |
With pseudoClass set to 'any'.
| Before | After |
button:any(:active, :focus, :hover) {
[...]
} |
button:active,
button:focus,
button:hover {
[...]
} |