@bramus/specificity

Changes & Additions

• ⬆️ Update css-tree to 3.0.0
• 🐛 Fix calculation of :any / :-moz-any / :-webkit-any pseudo classes
• 🐛 Do not crash when nth-[last-]-child() has no children
• ✨ Expose new calculateForAST method
• ✨ Add test for & selector
• ✨ Add tests to test standalone behavior
• ✨ Added benchmarks

Thanks to @bartveneman for contributing some of these changes and additions.

Changes & Additions

• ✨ Add view-transition specificity calculation
• 🐛 Do not throw when :is/:any/:matches do not contain children
• 🐛 Fix case sensitivity issue

Thanks to @bartveneman for contributing these changes and additions.

Changes & Additions

• ✨ Support ::slotted()
• ✨ Support :host() and :host-context()

Changes & Additions

• ✨ Also accept single CSSTree Selector ASTs as input into calculate

The main change in this next iteration of @bramus/specificity is that everything is now exposed as part of a newly introduced Specificity class. The class represents specificity value, and also holds several static methods to calculate and work with specificities.

Changes & Additions

• ✨ Introduce and use a Specificity class
• ✨ Support SelectorLists
• ♻️ Import only selector-parser from css-tree (reducing bundle size)
• ✨ Expose new utility functions for comparing, sorting, and filtering (static or standalone)
• ✨ Add Type Definitions
• ✨ Expose the CLI script
• 🚑 Fix CJS build

Code Example

import Specificity from '@bramus/specificity';

// ✨ Calculate specificity for each Selector in the given Selector List
const specificities = Specificity.calculate('header:where(#top) nav li:nth-child(2n), #doormat');

// 🚚 The values in the array are instances of the Specificity class
const specificity = specificities[0]; // Instance of Specificity

// 🛠 From an instance you can get the value in various formats
specificity.value; // { a: 0, b: 1, c: 3 }
specificity.a; // 0
specificity.b; // 1
specificity.c; // 3
specificity.toString(); // "(0,1,3)"
specificity.toArray(); // [0, 1, 3]
specificity.toObject(); // { a: 0, b: 1, c: 3 }

// 💡 From an instance you can also get the selector (as a String)
specificity.selectorString(); // "header:where(#top) nav li:nth-child(2n)"

// 💻 These instances also play nice with JSON.stringify()
console.log(JSON.stringify(specificity));
// {
//    "selector": 'header:where(#top) nav li:nth-child(2n)',
//    "asObject": { "a": 0, "b": 1, "c": 3 },
//    "asArray": [0, 1, 3],
//    "asString": "(0,1,3)",
// }

// 🔀 Need to compare against another instance? That's possible!
specificity.isEqualTo(specificities[1])); // false
specificity.isGreaterThan(specificities[1])); // false
specificity.isLessThan(specificities[1])); // true

Changing since 2.0.0-beta.9

• REFACTOR: No longer expose calculate or any of the utility methods from the main file. Instead, provide them as static methods on Specificity which is now the default export.
• REFACTOR: All utility methods that required one single array before, now work with an arbitrary number of arguments
• REFACTOR: Rename ascending/descending to sortAsc/sortDesc
• REMOVE: No longer expose standalone sort

Changes since 2.0.0-beta.8

• ♻️ Rename Specificity.equals to Specificity.isEqualTo