summaryrefslogtreecommitdiff
path: root/node_modules/@csstools/selector-specificity/README.md
diff options
context:
space:
mode:
authorlittleblack111 <littleblack11111@gmail.com>2023-10-14 15:05:55 +0800
committerlittleblack111 <littleblack11111@gmail.com>2023-10-14 15:05:55 +0800
commitc06f7ee0a40255214c477e13d9b956a7e07c2900 (patch)
treef5982a568ef8fab865d0142e71c7494fea3e4c1b /node_modules/@csstools/selector-specificity/README.md
parent3fd9400d4dccc25aa29b5702216732e0b7542073 (diff)
postcss,(plugins): nanocss, postcss-preset-env
Diffstat (limited to 'node_modules/@csstools/selector-specificity/README.md')
-rw-r--r--node_modules/@csstools/selector-specificity/README.md57
1 files changed, 57 insertions, 0 deletions
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
+
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/selector-specificity.svg" height="20">][npm-url]
+[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
+[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][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