From c06f7ee0a40255214c477e13d9b956a7e07c2900 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sat, 14 Oct 2023 15:05:55 +0800 Subject: postcss,(plugins): nanocss, postcss-preset-env --- .../@csstools/selector-specificity/README.md | 57 ++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 node_modules/@csstools/selector-specificity/README.md (limited to 'node_modules/@csstools/selector-specificity/README.md') diff --git a/node_modules/@csstools/selector-specificity/README.md b/node_modules/@csstools/selector-specificity/README.md new file mode 100644 index 00000000..3868d7d0 --- /dev/null +++ b/node_modules/@csstools/selector-specificity/README.md @@ -0,0 +1,57 @@ +# Selector Specificity + +[npm version][npm-url] +[Build Status][cli-url] +[Discord][discord] + +## Usage + +Add [Selector Specificity] to your project: + +```bash +npm install @csstools/selector-specificity --save-dev +``` + +```js +import parser from 'postcss-selector-parser'; +import { selectorSpecificity } from '@csstools/selector-specificity'; + +const selectorAST = parser().astSync('#foo:has(> .foo)'); +const specificity = selectorSpecificity(selectorAST); + +console.log(specificity.a); // 1 +console.log(specificity.b); // 1 +console.log(specificity.c); // 0 +``` + +_`selectorSpecificity` takes a single selector, not a list of selectors (not : `a, b, c`). +To compare or otherwise manipulate lists of selectors you need to call `selectorSpecificity` on each part._ + +### Comparing + +The package exports a utility function to compare two specificities. + +```js +import { selectorSpecificity, compare } from '@csstools/selector-specificity'; + +const s1 = selectorSpecificity(ast1); +const s2 = selectorSpecificity(ast2); +compare(s1, s2); // -1 | 0 | 1 +``` + +- if `s1 < s2` then `compare(s1, s2)` returns a negative number (`< 0`) +- if `s1 > s2` then `compare(s1, s2)` returns a positive number (`> 0`) +- if `s1 === s2` then `compare(s1, s2)` returns zero (`=== 0`) + +## Prior Art + +- [keeganstreet/specificity](https://github.com/keeganstreet/specificity) +- [bramus/specificity](https://github.com/bramus/specificity) + +For CSSTools we always use `postcss-selector-parser` and want to calculate specificity from this AST. + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/selector-specificity + +[Selector Specificity]: https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity -- cgit v1.2.3