Registry / serialization / css-variables-parser

css-variables-parser

JSON →
library1.0.1jsnpmunverified

The `css-variables-parser` library provides a focused utility for extracting CSS custom properties (variables) from CSS code. It offers both string-based parsing via the `parse` function and file-based parsing functionalities, including asynchronous (`parseFileAsync`, `parseFile`) and synchronous (`parseFileSync`) methods. The current stable version is 1.0.1. This library is specifically designed for scenarios requiring programmatic access to CSS variables, such as dynamic theme generation, build-time CSS processing, or integration with component libraries. A key differentiator is its optional support for custom CSS parsers, enabling integration with preprocessors like SugarSS. Its release cadence appears to be driven by specific bug fixes or minor feature enhancements rather than frequent major updates, reflecting its role as a dedicated parsing utility within the broader JavaScript ecosystem.

npm install css-variables-parser
INSTALL
IMPORT
SIG · CSS-VARIABLES-PARS
C
css-variables-parser
serializationjavascriptv1.0.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

parse
import { parse } from 'css-variables-parser';
const parse = require('css-variables-parser').parse;
CommonJS access requires destructuring; direct default import is not available.
parseFile
import { parseFile } from 'css-variables-parser';
import parseFile from 'css-variables-parser/parseFile';
All file parsing utilities are named exports from the main package. Only available in Node.js environments.
parseFileSync
const { parseFileSync } = require('css-variables-parser');
import { parseFileSync } from 'css-variables-parser/sync';
For CommonJS, destructure from the main package. This function is synchronous and Node.js-only.

Demonstrates how to parse a CSS string to extract all defined custom properties and their values.

import { parse } from 'css-variables-parser'; const cssString = ` :root { --color-primary: #ff0000; --font-size-base: 16px; --spacing-unit: 8px; } .my-component { background-color: var(--color-primary); font-size: var(--font-size-base); padding: var(--spacing-unit); } `; const variables = parse(cssString); console.log('Parsed CSS Variables:', variables); // Expected output: { 'color-primary': '#ff0000', 'font-size-base': '16px', 'spacing-unit': '8px' }
Debug
Known issues
gotchaThe `parseFile`, `parseFileSync`, and `parseFileAsync` functions are designed for Node.js environments and will not work in a browser context due to their reliance on file system access.
fix
For browser environments, ensure you pass CSS as a string to the `parse` function. Pre-process CSS files on the server or during a build step if variables need to be extracted client-side.
affects: >=1.0.0
gotchaWhen using ESM imports with `css-variables-parser` in a project that is configured as CommonJS, or vice-versa, module resolution issues may occur.
fix
Ensure your project's module system (ESM or CommonJS) aligns with how you import the library. For CommonJS, use `require()`. For ESM, use `import {} from '...'`. If using an older Node.js version, ensure 'type': 'module' is set in your package.json for ESM or stick to CommonJS syntax.
affects: >=1.0.0
Errors
Common errors & fixes
ReferenceError: require is not defined in ES module scope
Attempting to use CommonJS `require()` syntax in an ECMAScript Module (ESM) file or project.
fix
Change your import statement from `const { parse } = require('css-variables-parser');` to `import { parse } from 'css-variables-parser';`.
Error: ENOENT: no such file or directory
The file path provided to `parseFile`, `parseFileSync`, or `parseFileAsync` does not exist or is incorrect.
fix
Verify that the file path is correct and accessible from where your Node.js application is running. Use absolute paths or `path.resolve()` for robustness.
Upgrade
Version history
1.0.1latest on npm
Audit
Dependencies
sugarssoptionalOptional custom parser for advanced CSS syntax handling.
Agent activity
6 hits · last 30 days
node
6
Resources
css-variables-parser — npm install css-variables-parser · libregistry