PostCSS plugin enabling quantity-queries
JavaScript CSS Makefile
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
develop
src
test
.babelrc
.editorconfig
.eslintrc
.gitattributes
.gitignore
.travis.yml Don't CI test node 5 May 7, 2017
CHANGELOG.md
Makefile
README.md
UNLICENSE
index.js
package.json
yarn.lock

README.md

postcss-quantity-queries

npm version Build Status Coverage Status

PostCSS plugin enabling quantity-queries.

This plugin is derived from the Sass Quantity Queries mixins by Daniel Guillan.
For informations about quantity queries check those resources:
Quantity Queries for CSS
Styling elements based on sibling count
Daniel’s demo on CodePen

Installation

npm install postcss-quantity-queries --save-dev

Usage

const fs = require('fs');
const postcss = require('postcss');
const quantityQueries = require('postcss-quantity-queries');

const input = fs.readFileSync('input.css', 'utf8');

postcss()
  .use(quantityQueries)
  .process(input)
  .then(result => {
    fs.writeFileSync('output.css', result.css);
  });

API

at-least

Target count items or more:

:at-least(count) { ... }

input:

ul > li:at-least(4) {
  color: rebeccapurple;
}

output:

ul > li:nth-last-child(n+4),
ul > li:nth-last-child(n+4) ~ li {
  color: rebeccapurple;
}

at-most

Target count items or less:

:at-most(count) { ... }

input:

ul > li:at-most(4) {
  color: rebeccapurple;
}

output:

ul > li:nth-last-child(-n+4):first-child,
ul > li:nth-last-child(-n+4):first-child ~ li {
  color: rebeccapurple;
}

between

Target a range of items between start and end:

:between(start, end) { ... }

input:

ul > li:between(4, 6) {
  color: rebeccapurple;
}

output:

ul > li:nth-last-child(n+4):nth-last-child(-n+6):first-child,
ul > li:nth-last-child(n+4):nth-last-child(-n+6):first-child ~ li {
  color: rebeccapurple;
}

exactly

Target exactly count items:

:exactly(count) { ... }

input:

ul > li:exactly(4) {
  color: rebeccapurple;
}

output:

ul > li:nth-last-child(4):first-child,
ul > li:nth-last-child(4):first-child ~ li {
  color: rebeccapurple;
}

All pseudo-selector extensions

Selector Description
# :at-least(count) { … } Target count items or more
# :at-most(count) { … } Target count items or less
# :between(start, end) { … } Target a range of items between start and end
# :exactly(count) { … } Target exactly count items

At-rule API

There is also an at-rule API available, similar to pre-processors.
Although it might get deprecated at some point.
The recommended API is the pseudo-selectors one.

@at-least count [, selector] { ... }
@at-most count [, selector] { ... }
@between start end [, selector] { ... }
@exactly count [, selector] { ... }
ul > li {
  @at-least 4 span {
    color: rebeccapurple;
  }
}

ul > li {
  @between 4 6 {
    color: rebeccapurple;
  }
}

Check out the tests for more examples.

Credits

Licence

postcss-quantity-queries is unlicensed.