{"id":15391349,"url":"https://github.com/pascalduez/postcss-quantity-queries","last_synced_at":"2025-04-06T16:11:39.940Z","repository":{"id":28396280,"uuid":"31910563","full_name":"pascalduez/postcss-quantity-queries","owner":"pascalduez","description":"PostCSS plugin enabling quantity-queries","archived":false,"fork":false,"pushed_at":"2019-11-08T09:27:53.000Z","size":108,"stargazers_count":114,"open_issues_count":5,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T14:10:05.684Z","etag":null,"topics":["css","postcss"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pascalduez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-09T16:47:00.000Z","updated_at":"2024-04-10T14:02:34.000Z","dependencies_parsed_at":"2022-08-26T20:20:38.961Z","dependency_job_id":null,"html_url":"https://github.com/pascalduez/postcss-quantity-queries","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-quantity-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-quantity-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-quantity-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-quantity-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pascalduez","download_url":"https://codeload.github.com/pascalduez/postcss-quantity-queries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509223,"owners_count":20950232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","postcss"],"created_at":"2024-10-01T15:10:49.416Z","updated_at":"2025-04-06T16:11:39.921Z","avatar_url":"https://github.com/pascalduez.png","language":"JavaScript","readme":"# postcss-quantity-queries\n\n[![npm version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Coverage Status][coveralls-image]][coveralls-url]\n\n\n\u003e [PostCSS] plugin enabling quantity-queries.\n\nThis plugin is derived from the Sass [Quantity Queries mixins] by Daniel Guillan.  \nFor informations about quantity queries check those resources:  \n[Quantity Queries for CSS][]  \n[Styling elements based on sibling count][]  \n[Daniel’s demo on CodePen][]  \n\n\n\n## Installation\n\n```\nnpm install postcss-quantity-queries --save-dev\n```\n\n\n\n## Usage\n\n```js\nconst fs = require('fs');\nconst postcss = require('postcss');\nconst quantityQueries = require('postcss-quantity-queries');\n\nconst input = fs.readFileSync('input.css', 'utf8');\n\npostcss()\n  .use(quantityQueries)\n  .process(input)\n  .then(result =\u003e {\n    fs.writeFileSync('output.css', result.css);\n  });\n```\n\n\n\n## API\n\n### at-least\n\nTarget `count` items or more:\n```css\n:at-least(count) { ... }\n```\ninput:\n```css\nul \u003e li:at-least(4) {\n  color: rebeccapurple;\n}\n```\noutput:\n```css\nul \u003e li:nth-last-child(n+4),\nul \u003e li:nth-last-child(n+4) ~ li {\n  color: rebeccapurple;\n}\n```\n\n\n\n### at-most\n\nTarget `count` items or less:\n```css\n:at-most(count) { ... }\n```\ninput:\n```css\nul \u003e li:at-most(4) {\n  color: rebeccapurple;\n}\n```\noutput:\n```css\nul \u003e li:nth-last-child(-n+4):first-child,\nul \u003e li:nth-last-child(-n+4):first-child ~ li {\n  color: rebeccapurple;\n}\n```\n\n\n\n### between\n\nTarget a range of items between `start` and `end`:\n```css\n:between(start, end) { ... }\n```\ninput:\n```css\nul \u003e li:between(4, 6) {\n  color: rebeccapurple;\n}\n```\noutput:\n```css\nul \u003e li:nth-last-child(n+4):nth-last-child(-n+6):first-child,\nul \u003e li:nth-last-child(n+4):nth-last-child(-n+6):first-child ~ li {\n  color: rebeccapurple;\n}\n```\n\n\n\n### exactly\n\nTarget exactly `count` items:\n```css\n:exactly(count) { ... }\n```\ninput:\n```css\nul \u003e li:exactly(4) {\n  color: rebeccapurple;\n}\n```\noutput:\n```css\nul \u003e li:nth-last-child(4):first-child,\nul \u003e li:nth-last-child(4):first-child ~ li {\n  color: rebeccapurple;\n}\n```\n\n### All pseudo-selector extensions\n\nSelector | Description\n---|---\n[#](#at-least) `:at-least(count) { … }` | Target `count` items or more\n[#](#at-most) `:at-most(count) { … }` | Target `count` items or less\n[#](#between) `:between(start, end) { … }` | Target a range of items between `start` and `end`\n[#](#exactly) `:exactly(count) { … }` | Target exactly `count` items\n\n## At-rule API\n\nThere is also an at-rule API available, similar to pre-processors.  \nAlthough it might get deprecated at some point.  \nThe recommended API is the pseudo-selectors one.\n\n```css\n@at-least count [, selector] { ... }\n```\n```css\n@at-most count [, selector] { ... }\n```\n```css\n@between start end [, selector] { ... }\n```\n```css\n@exactly count [, selector] { ... }\n```\n\n```css\nul \u003e li {\n  @at-least 4 span {\n    color: rebeccapurple;\n  }\n}\n\nul \u003e li {\n  @between 4 6 {\n    color: rebeccapurple;\n  }\n}\n```\n\nCheck out the [tests](test/fixture) for more examples.\n\n\n\n## Credits\n\n* [Pascal Duez](https://github.com/pascalduez)\n\n\n## Licence\n\npostcss-quantity-queries is [unlicensed](http://unlicense.org/).\n\n\n\n[PostCSS]: https://github.com/postcss/postcss\n[Quantity Queries mixins]: https://github.com/danielguillan/quantity-queries\n[Quantity Queries for CSS]: http://alistapart.com/article/quantity-queries-for-css\n[Styling elements based on sibling count]: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3\n[Daniel’s demo on CodePen]: http://codepen.io/danielguillan/pen/GgBOxm\n\n[npm-url]: https://www.npmjs.org/package/postcss-quantity-queries\n[npm-image]: http://img.shields.io/npm/v/postcss-quantity-queries.svg?style=flat-square\n[travis-url]: https://travis-ci.org/pascalduez/postcss-quantity-queries?branch=master\n[travis-image]: http://img.shields.io/travis/pascalduez/postcss-quantity-queries.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/pascalduez/postcss-quantity-queries\n[coveralls-image]: https://img.shields.io/coveralls/pascalduez/postcss-quantity-queries.svg?style=flat-square\n[depstat-url]: https://david-dm.org/pascalduez/postcss-quantity-queries\n[depstat-image]: https://david-dm.org/pascalduez/postcss-quantity-queries.svg?style=flat-square\n[license-image]: http://img.shields.io/npm/l/postcss-quantity-queries.svg?style=flat-square\n[license-url]: UNLICENSE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascalduez%2Fpostcss-quantity-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpascalduez%2Fpostcss-quantity-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascalduez%2Fpostcss-quantity-queries/lists"}