postcss-pseudo-any v1.0.1

postcss-pseudo-any

A PostCSS plugin for CSS authors who can't wait to use :matches() or :is(). Converts the :any() selector to :-moz-any() and :-webkit-any(), and lets you get on with things.

WTF

CSS level 4 contains a spec for :is() which was previously called :matches(), and previous to that was anticipated to be called :any(), and was actually implemented at some point, across most modern browsers in prefixed form as :-moz-any() and :-webkit-any().

Those prefixed forms are now considered deprecated (and slightly wrong in terms of specificity), and they lack some features projected for :is(); but the fact remains that no browser currently implements :is() or :matches(), while prefixed :-moz-any() and :-webkit-any() are well-supported.

Usage

Basically, start with a declaration using an :is(), :matches() or :any() selector:

.bar,
:is(.good),
:matches(.well),
[class^='base-']:any(a),
:any(p, ul, ol),
.foo {
  color: blue
}

This will be cloned and separated out, in to separate declarations with prefixed versions of the is/matches/any selectors isolated from any other selectors in that declaration:

:-moz-any(.good), 
:-moz-any(.well), 
[class^='base-']:-moz-any(a), 
:-moz-any(p, ul, ol) { 
  color: blue 
} 
 
:-webkit-any(.good), 
:-webkit-any(.well), 
[class^='base-']:-webkit-any(a), 
:-webkit-any(p, ul, ol) { 
  color: blue 
} 
 
.bar, 
.foo { 
  color: blue 
} 

Get Started

Installation

If you do not use PostCSS, add it according to official docs and set this plugin in settings; otherwise check your project for an existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json, or postcss in bundle config, and add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-pseudo-any')(options),
    require('autoprefixer')
  ]
}

Options