vite-plugin-compiled-react

Vite plugin for https://github.com/atlassian-labs/compiled

PostCSS config is supported when extraction is enabled. CSS extraction can be enabled for build and serve separately. extract: { build: true, serve: true } or a shorthand extract: true

Your SSR framework may not support preloading extracted CSS in development mode.

Usage:

npm i @compiled/react
npm i -D vite-plugin-compiled-react

import { compiled } from "vite-plugin-compiled-react";

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

const Component = () => (
  <div
    css={{
      color: "red",
      ":hover": {
        color: "blue",
      },
    }}
  >
   Hello
  </div>
);

Typescript should work out of the box.