vite-plugin-css-export

Qué es

vite-plugin-css-export es un plugin de Vite creado por shixuanhong que permite leer desde JavaScript las variables declaradas en tus hojas de estilo. Funciona con CSS plano y con los preprocesadores Sass, Less y Stylus. Las propiedades que pongas dentro de un bloque :export quedan disponibles como un objeto al importar el archivo de estilos con el sufijo ?export. Está escrito en TypeScript, es open source con licencia MIT y se mantiene de forma activa.

Para qué sirve

• Mantener una única fuente de verdad para los tokens de diseño (colores, tipografías, breakpoints) y consumirlos tanto en CSS como en JS.
• Pasar valores definidos en los estilos a librerías de JavaScript que los necesitan, como un color para una gráfica o una animación.
• Reutilizar variables de Sass, Less o Stylus en la lógica de cliente sin reescribirlas a mano.
• Compartir variables comunes entre varios resultados con la opción additionalData y combinarlas con CSS Modules.

Cuándo usarlo

Encaja en proyectos con Vite donde el diseño vive en CSS o en un preprocesador y necesitas esos mismos valores en JavaScript, evitando que se desincronicen al duplicarlos. Si ya defines los tokens directamente en JS (por ejemplo en la configuración de Tailwind o en un objeto de tema) puede que no te aporte; este plugin brilla cuando la fuente de verdad está en los estilos.

Ejemplo

Instalación:

npm install vite-plugin-css-export -D

Configurar el plugin en Vite:

// vite.config.ts
import { defineConfig } from 'vite';
import ViteCSSExportPlugin from 'vite-plugin-css-export';

export default defineConfig({
  plugins: [ViteCSSExportPlugin()],
});

Exportar variables desde CSS y leerlas en JS:

/* example.css */
:export {
  fontColor: #333;
  fontSize: 14px;
}

// main.ts
import cssResult from './example.css?export';
console.log(cssResult); // { fontColor: "#333", fontSize: "14px" }

Puntos clave

• Comparte variables entre estilos y JavaScript mediante el bloque :export.
• Compatible con CSS, Sass, Less y Stylus, incluyendo reglas anidadas y CSS Modules.
• Transforma nombres de propiedades con utilidades integradas (por ejemplo kebab-case a UpperCamelCase).
• Permite compartir datos comunes entre resultados con additionalData, y opciones como enableExportMerge y sharedDataExportName para CSS Modules.
• Ligero y sin dependencias de runtime: actúa en tiempo de compilación de Vite.

Ten en cuenta

• Es específico de Vite (compatible con Vite 5 a 8); no sirve para proyectos con Webpack u otros bundlers.
• Las variables salen como cadenas de texto ("14px"), no como números, así que conviene convertirlas antes de usarlas en cálculos.
• Si tu sistema de tokens ya vive en JavaScript, añadir este plugin puede ser una capa innecesaria.