https://github.com/pascalduez/postcss-quantity-queries

PostCSS plugin enabling quantity-queries
https://github.com/pascalduez/postcss-quantity-queries

css postcss

Last synced: 7 days ago
JSON representation

PostCSS plugin enabling quantity-queries

• Host: GitHub
• URL: https://github.com/pascalduez/postcss-quantity-queries
• Owner: pascalduez
• License: unlicense
• Created: 2015-03-09T16:47:00.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2019-11-08T09:27:53.000Z (about 5 years ago)
• Last Synced: 2024-12-07T17:50:54.313Z (16 days ago)
• Topics: css, postcss
• Language: JavaScript
• Size: 105 KB
• Stars: 114
• Watchers: 5
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# postcss-quantity-queries

[![npm version][npm-image]][npm-url]

[![Build Status][travis-image]][travis-url]

[![Coverage Status][coveralls-image]][coveralls-url]

> [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

```js

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:

```css

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

```

input:

```css

ul > li:at-least(4) {

  color: rebeccapurple;

}

```

output:

```css

ul > li:nth-last-child(n+4),

ul > li:nth-last-child(n+4) ~ li {

  color: rebeccapurple;

}

```

### at-most

Target `count` items or less:

```css

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

```

input:

```css

ul > li:at-most(4) {

  color: rebeccapurple;

}

```

output:

```css

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`:

```css

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

```

input:

```css

ul > li:between(4, 6) {

  color: rebeccapurple;

}

```

output:

```css

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:

```css

:exactly(count) { ... }

```

input:

```css

ul > li:exactly(4) {

  color: rebeccapurple;

}

```

output:

```css

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) `:at-least(count) { … }` | Target `count` items or more

[#](#at-most) `:at-most(count) { … }` | Target `count` items or less

[#](#between) `:between(start, end) { … }` | Target a range of items between `start` and `end`

[#](#exactly) `: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.

```css

@at-least count [, selector] { ... }

```

```css

@at-most count [, selector] { ... }

```

```css

@between start end [, selector] { ... }

```

```css

@exactly count [, selector] { ... }

```

```css

ul > li {

  @at-least 4 span {

    color: rebeccapurple;

  }

}

ul > li {

  @between 4 6 {

    color: rebeccapurple;

  }

}

```

Check out the [tests](test/fixture) for more examples.

## Credits

* [Pascal Duez](https://github.com/pascalduez)

## Licence

postcss-quantity-queries is [unlicensed](http://unlicense.org/).

[PostCSS]: https://github.com/postcss/postcss

[Quantity Queries mixins]: https://github.com/danielguillan/quantity-queries

[Quantity Queries for CSS]: http://alistapart.com/article/quantity-queries-for-css

[Styling elements based on sibling count]: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3

[Daniel’s demo on CodePen]: http://codepen.io/danielguillan/pen/GgBOxm

[npm-url]: https://www.npmjs.org/package/postcss-quantity-queries

[npm-image]: http://img.shields.io/npm/v/postcss-quantity-queries.svg?style=flat-square

[travis-url]: https://travis-ci.org/pascalduez/postcss-quantity-queries?branch=master

[travis-image]: http://img.shields.io/travis/pascalduez/postcss-quantity-queries.svg?style=flat-square

[coveralls-url]: https://coveralls.io/r/pascalduez/postcss-quantity-queries

[coveralls-image]: https://img.shields.io/coveralls/pascalduez/postcss-quantity-queries.svg?style=flat-square

[depstat-url]: https://david-dm.org/pascalduez/postcss-quantity-queries

[depstat-image]: https://david-dm.org/pascalduez/postcss-quantity-queries.svg?style=flat-square

[license-image]: http://img.shields.io/npm/l/postcss-quantity-queries.svg?style=flat-square

[license-url]: UNLICENSE