@frankhoodbs/css-custom-properties-list v1.2.3
CSS Custom Properties List
A simple utility to fetch and list all CSS Custom Properties (often known as CSS Variables) defined in
the :root
selector of stylesheets from the same domain.
Features
- Domain Filtering: Only parses stylesheets from the same domain to avoid cross-origin issues.
- Focus on
:root
Selector: Specifically targets custom properties defined under the:root
selector.
Usage
Import the utility function:
import { cssCustomPropertiesList } from '@frankhoodbs/css-custom-properties-list';
To get a list of custom properties from all stylesheets in the document:
const propertiesList = cssCustomPropertiesList(document.styleSheets);
console.log(propertiesList);
This will return an array of arrays, where each inner array contains two strings: the custom property name and its value. For example:
[
['--primary-color', '#ff4500'],
['--font-size', '16px']
]
Utility Functions
isSameDomain(styleSheet: CSSStyleSheet)
Determines whether a given stylesheet is from the same domain as the current page.
isStyleRule(rule: CSSRule)
Checks if a given rule is a style rule.
cssCustomPropertiesList(styleSheets: StyleSheetList)
The main utility function which accepts a list of stylesheets and returns the custom properties as described above.
6 days ago
19 days ago
22 days ago
23 days ago
23 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago