{"id":13020,"library":"css-variables-parser","title":"CSS Variables Parser","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/nkt/css-variables-parser","tags":["javascript"],"install":[{"cmd":"npm install css-variables-parser","lang":"bash","label":"npm"},{"cmd":"yarn add css-variables-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-variables-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Optional custom parser for advanced CSS syntax handling.","package":"sugarss","optional":true}],"imports":[{"note":"CommonJS access requires destructuring; direct default import is not available.","wrong":"const parse = require('css-variables-parser').parse;","symbol":"parse","correct":"import { parse } from 'css-variables-parser';"},{"note":"All file parsing utilities are named exports from the main package. Only available in Node.js environments.","wrong":"import parseFile from 'css-variables-parser/parseFile';","symbol":"parseFile","correct":"import { parseFile } from 'css-variables-parser';"},{"note":"For CommonJS, destructure from the main package. This function is synchronous and Node.js-only.","wrong":"import { parseFileSync } from 'css-variables-parser/sync';","symbol":"parseFileSync","correct":"const { parseFileSync } = require('css-variables-parser');"}],"quickstart":{"code":"import { parse } from 'css-variables-parser';\n\nconst cssString = `\n  :root {\n    --color-primary: #ff0000;\n    --font-size-base: 16px;\n    --spacing-unit: 8px;\n  }\n  .my-component {\n    background-color: var(--color-primary);\n    font-size: var(--font-size-base);\n    padding: var(--spacing-unit);\n  }\n`;\n\nconst variables = parse(cssString);\nconsole.log('Parsed CSS Variables:', variables);\n// Expected output: { 'color-primary': '#ff0000', 'font-size-base': '16px', 'spacing-unit': '8px' }","lang":"javascript","description":"Demonstrates how to parse a CSS string to extract all defined custom properties and their values."},"warnings":[{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"When using ESM imports with `css-variables-parser` in a project that is configured as CommonJS, or vice-versa, module resolution issues may occur.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `const { parse } = require('css-variables-parser');` to `import { parse } from 'css-variables-parser';`.","cause":"Attempting to use CommonJS `require()` syntax in an ECMAScript Module (ESM) file or project.","error":"ReferenceError: require is not defined in ES module scope"},{"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.","cause":"The file path provided to `parseFile`, `parseFileSync`, or `parseFileAsync` does not exist or is incorrect.","error":"Error: ENOENT: no such file or directory"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}