Have ideas to improve npm?Join in the discussion! »

    postcss-pseudo-any

    1.0.1 • Public • Published

    postcss-pseudo-any

    Build Status Build Status

    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.

    Data on support for the css-matches-pseudo feature across the major browsers from caniuse.com

    Usage

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

    .bar,
    :is(.good),
    :matches(.well),
    [class^='base-']:any(a),
    :any(pulol),
    .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(pulol{
      color: blue
    }
    :-webkit-any(.good), 
    :-webkit-any(.well), 
    [class^='base-']:-webkit-any(a), 
    :-webkit-any(pulol{
      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

    option name default value meaning
    matchModern true Whether the plugin should convert :is() and :matches selectors as well as :any()
    matchPrefixed false Whether the plugin should convert already prefixed :-moz-any() and :-webkit-any()selectors as well as non-prefixed ones

    Install

    npm i postcss-pseudo-any

    DownloadsWeekly Downloads

    209

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    64.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar