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 = false
Whether 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 {
[...]
} |