{"id":22626,"library":"vite-plugin-css-export","title":"vite-plugin-css-export","description":"A Vite plugin that exports CSS variable values (defined via `:export` pseudo-class) to JavaScript, enabling sharing of design tokens between CSS/SCSS/LESS and JS. Current stable version is 3.1.0, compatible with Vite 5–8 and Node >=20.19.0 (or >=22.12.0). Key differentiators: support for nested `:export` rules that produce nested JS objects, works with CSS pre-processors (Sass, Less, Stylus) and CSS Modules, and ships TypeScript declarations. Releases follow semver; v3.0.0 dropped Vite 4 support and requires ESM.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/shixuanhong/vite-plugin-css-export","tags":["javascript","vite","vite-plugin","vite-plugin-css-export","typescript"],"install":[{"cmd":"npm install vite-plugin-css-export","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-css-export","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-css-export","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required as a Vite plugin; tested with Vite >=5.0.0 <9.0.0.","package":"vite","optional":false}],"imports":[{"note":"Package is ESM-only since v3.0.0; CommonJS require will fail. Use import.","wrong":"const ViteCSSExportPlugin = require('vite-plugin-css-export')","symbol":"default (ViteCSSExportPlugin)","correct":"import ViteCSSExportPlugin from 'vite-plugin-css-export'"},{"note":"CSSExportedData is a type, not a value; must use `import type` or `--isolatedModules`. Available only if you define the interface yourself; the package exports no concrete type.","wrong":"import { CSSExportedData } from 'vite-plugin-css-export'","symbol":"CSSExportedData type (generated)","correct":"import type { CSSExportedData } from 'vite-plugin-css-export'"},{"note":"Must append `?export` to the import path. Without it, you get the default Vite CSS module output (class name mappings).","wrong":"import cssResult from './style.css'","symbol":"CSS module export (`?export` query)","correct":"import cssResult from './style.css?export'"}],"quickstart":{"code":"// vite.config.ts\nimport ViteCSSExportPlugin from 'vite-plugin-css-export'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [ViteCSSExportPlugin()]\n})\n\n// example.css\n:root { --primary: #007bff; }\n:export {\n  primaryColor: var(--primary);\n  fontSize: 16px;\n}\n\n// main.ts (after adding reference)\n/// <reference types=\"vite-plugin-css-export/client\" />\n\nimport exported from './example.css?export'\n\nconsole.log(exported.primaryColor) 'var(--primary)'\nconsole.log(exported.fontSize) '16px'","lang":"typescript","description":"Minimal Vite config with plugin, a CSS file exporting variables, and TS import using `?export` query to retrieve object."},"warnings":[{"fix":"Upgrade Vite to v5 or later, or pin to v2.x for Vite 4.","message":"vite-plugin-css-export v3 drops support for Vite 4 (requires Vite >=5).","severity":"breaking","affected_versions":">=3.0.0 <3.1.0"},{"fix":"Convert to ESM (use `import` or set `\"type\": \"module\"` in package.json).","message":"vite-plugin-css-export v3 is ESM-only; CommonJS require() throws ERR_REQUIRE_ESM.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Do not nest `:export` inside at-rules; use CSS custom properties evaluated at runtime if dynamic queries needed.","message":"The `:export` pseudo-class does not support `@media` or other at-rules; values are static at build time.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Import both: import classes from './styles.module.css' and exportedData from './styles.module.css?export'.","message":"When using CSS Modules, the `?export` import returns only the exported data, not CSS module class names.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use `sharedData: 'cssExportedData'` instead of `sharedDataExportName: 'cssExportedData'`.","message":"The `sharedDataExportName` option (for CSS Modules) was renamed to `sharedData` in v3.0.0.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Switch to ESM: rename file to .mts or set `\"type\": \"module\"` in package.json, then use `import ViteCSSExportPlugin from 'vite-plugin-css-export'`.","cause":"Using CommonJS `require()` with the ESM-only v3 package.","error":"Error: ERR_REQUIRE_ESM: require() of ES Module /node_modules/vite-plugin-css-export/dist/index.mjs from /project/vite.config.ts not supported."},{"fix":"Use default import: `import ViteCSSExportPlugin from 'vite-plugin-css-export'`.","cause":"Importing the default export incorrectly (e.g., named import).","error":"TypeError: ViteCSSExportPlugin is not a function"},{"fix":"Append `?export` to the import path: `import data from './styles.css?export'`.","cause":"Forgetting the `?export` query suffix on the CSS import.","error":"Module not found: Error: Can't resolve './styles.css?export'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}