README
custom-property-extract
Extract CSS custom properties (a.k.a CSS variables) and their values from SCSS
, SASS
and CSS
stylesheets.
Since they can be overwritten in selectors, every custom property returns an array of all possible values directly extracted from the provided stylesheet. See Example to get a quick overview on how things work.
Install
Install custom-property-extract by running the following command:
npm install custom-property-extract
Usage
extract(sourceStyle, extractOptions)
const path = require('path');
const { extract } = require('custom-property-extract');
const customProperties = extract(path.resolve('./path/to/stylesheet.scss'), { syntax: 'scss' });
Alternatively, you can directly pass the content of the stylesheet in the sourceStyle
argument by
setting the source
option to "content"
:
const path = require('path');
const { extract } = require('custom-property-extract');
const style = `
:root {
--my-variable: blue;
}
`;
const customProperties = extract(style, {
syntax: 'scss',
source: 'content',
});
extractOptions
Name | Type | Required | Default | Description |
---|---|---|---|---|
mode |
{String} |
false |
"simple" |
Output mode ("simple" , "full" ) |
syntax |
{String} |
false |
"css" |
Syntax of the source stylesheet ("css" , "scss" , "sass" ) |
source |
{String} |
false |
"file" |
Type of the source ("file" , "content" ) |
prefix |
{Boolean} |
false |
true |
Determines whether to prefix custom properties with -- . |
Example
Consider the following CSS stylesheet:
@charset "UTF-8";
:root {
--color-primary: #ff017d;
--color-secondary: #000;
--color-background: white;
--color-foreground: var(--color-secondary);
--radius-round: 50% 50%;
--spacing-s: 5rem;
--shadow-xs: 1px 2px 3px 4px rgba(0,0,0,0.25), inset 4px 3px 2px 1px #fff;
--border-light: 1px solid rgba(0,0,0,0.15);
--amount-suffix-content: '€';
--margin-default: 0.5rem !important;
}
[data-theme="dark"] {
--color-primary: #cf689a;
--color-secondary: blue;
--color-background: var(--color-background);
}
[data-theme="dark"].nested {
--color-primary: blue;
--width-header: calc(100vh - (3rem / 2));
}
[data-lang="us"] {
--amount-suffix-content: '