PostCSS or

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.

fieldset:or(:hover, > *:focus) {
  [...]
}

fieldset:hover,
fieldset > *:focus {
  [...]
}

Install

$ npm install postcss-or

Usage

Add postcss-or to your list of postcss plugins.

plugins: [
  'postcss-or',
]

Options

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.

.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'.

button:any(:active, :focus, :hover) {
  [...]
}

button:active,
button:focus,
button:hover {
  [...]
}