{"id":22615,"library":"vite-plugin-compiled-react","title":"vite-plugin-compiled-react","description":"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.","status":"active","version":"1.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/nitedani/vite-plugin-compiled-react","tags":["javascript","@compiled/react","vite","typescript"],"install":[{"cmd":"npm install vite-plugin-compiled-react","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-compiled-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-compiled-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Compiled library for CSS-in-JS","package":"@compiled/react","optional":false},{"reason":"Vite build tool peer dependency","package":"vite","optional":false},{"reason":"Required Vite React plugin (must be added before compiled plugin)","package":"@vitejs/plugin-react","optional":false}],"imports":[{"note":"Named export, not default. TypeScript supported out-of-box.","wrong":"import compiled from 'vite-plugin-compiled-react'","symbol":"compiled","correct":"import { compiled } from 'vite-plugin-compiled-react'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { compiled } from 'vite-plugin-compiled-react';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    compiled({ extract: true })\n  ]\n});","lang":"typescript","description":"Minimal Vite config enabling Compiled with CSS extraction for both build and serve."},"warnings":[{"fix":"Order plugins: [react(), compiled(...)] not [compiled(...), react()]","message":"The @vitejs/plugin-react plugin must be added before the compiled plugin in the plugins array.","severity":"gotcha","affected_versions":"*"},{"fix":"Disable extraction in dev: compiled({ extract: { build: true, serve: false } })","message":"CSS extraction may not work with all SSR frameworks in development mode due to preloading differences.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install --save-dev vite-plugin-compiled-react","cause":"Package not installed or missing from dependencies.","error":"Cannot find module 'vite-plugin-compiled-react'"},{"fix":"import { compiled } from 'vite-plugin-compiled-react'","cause":"Default import used instead of named import.","error":"TypeError: compiled is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}