Registry / web-framework / vite-plugin-css-export

vite-plugin-css-export

library3.1.0jsnpmunverified

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.

web-framework devops

npm install vite-plugin-css-export

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-CSS-EX

vite-plugin-css-export

web-frameworkjavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

default (ViteCSSExportPlugin)

✓ import ViteCSSExportPlugin from 'vite-plugin-css-export'

✗ const ViteCSSExportPlugin = require('vite-plugin-css-export')

Package is ESM-only since v3.0.0; CommonJS require will fail. Use import.

CSSExportedData type (generated)

✓ import type { CSSExportedData } from 'vite-plugin-css-export'

✗ import { CSSExportedData } from 'vite-plugin-css-export'

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.

CSS module export (`?export` query)

✓ import cssResult from './style.css?export'

✗ import cssResult from './style.css'

Must append `?export` to the import path. Without it, you get the default Vite CSS module output (class name mappings).

Minimal Vite config with plugin, a CSS file exporting variables, and TS import using `?export` query to retrieve object.

// vite.config.ts import ViteCSSExportPlugin from 'vite-plugin-css-export' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ViteCSSExportPlugin()] }) // example.css :root { --primary: #007bff; } :export { primaryColor: var(--primary); fontSize: 16px; } // main.ts (after adding reference) /// <reference types="vite-plugin-css-export/client" /> import exported from './example.css?export' console.log(exported.primaryColor) 'var(--primary)' console.log(exported.fontSize) '16px'

Debug

Known issues

breakingvite-plugin-css-export v3 drops support for Vite 4 (requires Vite >=5).

fix

Upgrade Vite to v5 or later, or pin to v2.x for Vite 4.

affects: >=3.0.0 <3.1.0

breakingvite-plugin-css-export v3 is ESM-only; CommonJS require() throws ERR_REQUIRE_ESM.

fix

Convert to ESM (use `import` or set `"type": "module"` in package.json).

affects: >=3.0.0

gotchaThe `:export` pseudo-class does not support `@media` or other at-rules; values are static at build time.

fix

Do not nest `:export` inside at-rules; use CSS custom properties evaluated at runtime if dynamic queries needed.

affects: >=3.0.0

gotchaWhen using CSS Modules, the `?export` import returns only the exported data, not CSS module class names.

fix

Import both: import classes from './styles.module.css' and exportedData from './styles.module.css?export'.

affects: >=3.0.0

deprecatedThe `sharedDataExportName` option (for CSS Modules) was renamed to `sharedData` in v3.0.0.

fix

Use `sharedData: 'cssExportedData'` instead of `sharedDataExportName: 'cssExportedData'`.

affects: >=3.0.0

Errors

Common errors & fixes

Error: ERR_REQUIRE_ESM: require() of ES Module /node_modules/vite-plugin-css-export/dist/index.mjs from /project/vite.config.ts not supported.

Using CommonJS `require()` with the ESM-only v3 package.

fix

Switch to ESM: rename file to .mts or set `"type": "module"` in package.json, then use `import ViteCSSExportPlugin from 'vite-plugin-css-export'`.

TypeError: ViteCSSExportPlugin is not a function

Importing the default export incorrectly (e.g., named import).

fix

Use default import: `import ViteCSSExportPlugin from 'vite-plugin-css-export'`.

Module not found: Error: Can't resolve './styles.css?export'

Forgetting the `?export` query suffix on the CSS import.

fix

Append `?export` to the import path: `import data from './styles.css?export'`.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

viterequiredPeer dependency: required as a Vite plugin; tested with Vite >=5.0.0 <9.0.0.

Agent activity

8 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/shixuanhong/vite-plugin-css-export ↗

packagehttps://www.npmjs.com/package/vite-plugin-css-export ↗