vite-plugin-compiled-react

1.3.1 verified Mon Apr 27 auth: no javascript

Vite plugin for @compiled/react, a CSS-in-JS library from Atlassian Labs. v1.3.1, actively maintained. Integrates Compiled's static extraction with Vite's build and dev server. Supports per-environment CSS extraction (build/serve) and PostCSS config. Unlike runtime CSS-in-JS, Compiled extracts styles at build time for zero runtime overhead. Requires @compiled/react, vite, and @vitejs/plugin-react as peer dependencies. Ships TypeScript types.

Common errors

error Cannot find module 'vite-plugin-compiled-react' ↓

cause Package not installed or missing from dependencies.

fix

npm install --save-dev vite-plugin-compiled-react

error TypeError: compiled is not a function ↓

cause Default import used instead of named import.

fix

import { compiled } from 'vite-plugin-compiled-react'

Warnings

gotcha The @vitejs/plugin-react plugin must be added before the compiled plugin in the plugins array. ↓

fix Order plugins: [react(), compiled(...)] not [compiled(...), react()]

gotcha CSS extraction may not work with all SSR frameworks in development mode due to preloading differences. ↓

fix Disable extraction in dev: compiled({ extract: { build: true, serve: false } })

Install

npm install vite-plugin-compiled-react

yarn add vite-plugin-compiled-react

pnpm add vite-plugin-compiled-react

Imports

compiled

wrong

import compiled from 'vite-plugin-compiled-react'

correct

import { compiled } from 'vite-plugin-compiled-react'

Named export, not default. TypeScript supported out-of-box.

Quickstart

Minimal Vite config enabling Compiled with CSS extraction for both build and serve.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { compiled } from 'vite-plugin-compiled-react';

export default defineConfig({
  plugins: [
    react(),
    compiled({ extract: true })
  ]
});