PostCSS plugin to transform :matches() W3C CSS pseudo class to more compatible CSS (simpler selectors)
Clone or download
Latest commit adc8f08 Sep 18, 2018
Permalink
Failed to load latest commit information.
src Update dependencies May 11, 2017
test Update dependencies May 11, 2017
.babelrc Fix incorrect export May 15, 2017
.editorconfig Initial release Apr 30, 2015
.eslintignore Update dependencies May 11, 2017
.eslintrc.yml Update dependencies May 11, 2017
.gitignore Fixed: .class:matches(element) now produce element.class (#8) Sep 6, 2016
.travis.yml 4.0.0 Sep 18, 2018
CHANGELOG.md 4.0.0 Sep 18, 2018
LICENSE 3.0.0 May 11, 2017
README.md 4.0.0 Sep 18, 2018
package.json 4.0.0 Sep 18, 2018

README.md

postcss-selector-matches CSS Standard Status Build Status

PostCSS plugin to transform :matches() W3C CSS pseudo class to more compatible CSS selectors

http://dev.w3.org/csswg/selectors-4/#matches

Installation

$ npm install postcss-selector-matches

Usage

var postcss = require("postcss")

var output = postcss()
  .use(require("postcss-selector-matches"))
  .process(require("fs").readFileSync("input.css", "utf8"))
  .css

Using this input.css:

p:matches(:first-child, .special) {
  color: red;
}

you will get:

p:first-child, p.special {
  color: red;
}

Note that if you are doing crazy selector like p:matches(a) {} you are likely to get crazy results (like pa {}).

Options

lineBreak

(default: false)

Allows you to introduce a line break between generated selectors.


Changelog

License