@frankhoodbs/css-custom-properties-list

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

1. Domain Filtering: Only parses stylesheets from the same domain to avoid cross-origin issues.
2. 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.