I use this module to display a documentation of my CSS Custom Properties defined in the :root. It runs in the browser runtime, maps the document.styleSheets object and returns an array of custom properties.
yarn add custom-properties
npm install custom-properties --save
Custom Properties for the examples.
:root {
--all-color-white: #hex;
--all-color-grey-400: #hex;
--all-color-grey-200: #hex;
--all-color-grey-100: #hex;
--all-color-grey-300: #hex;
--all-color-red-100: #hex;
--all-color-red-400: #hex;
--all-color-red-300: #hex;
--all-color-red-200: #hex;
}In the custom property --all-color-grey
all is index 0
color is index 1
grey is index 2
So, let's group all the custom properties by the sortIndex 2
import customProperties from 'custom-properties'
const allWithPrefix = customProperties.get('--all')
const properties = customProperties.groupIndex(allWithPrefix, 2)
/*
{
white: [
'--all-color-white',
],
grey: [
'--all-color-grey-400',
'--all-color-grey-200',
'--all-color-grey-100',
'--all-color-grey-300',
],
red: [
'--all-color-red-100',
'--all-color-red-400',
'--all-color-red-300',
'--all-color-red-200',
]
}
*/Sometimes, I need to sort the shades of colors to show in the documentation, it can be made with the sortIndex parameter
import customProperties from 'custom-properties'
const allWithPrefix = customProperties.get('--all')
const properties = customProperties.groupIndex(allWithPrefix, 2, 3)
/*
{
white: [
'--all-color-white',
],
grey: [
'--all-color-grey-400',
'--all-color-grey-300',
'--all-color-grey-200',
'--all-color-grey-100',
],
red: [
'--all-color-red-400',
'--all-color-red-300',
'--all-color-red-200',
'--all-color-red-100',
]
}
*/