vite-plugin-compiled-react
Vite plugin for https://github.com/atlassian-labs/compiled
The compiled.css files are temporarily created in the source directory, then removed after build. This way, the Vite css processing pipeline, postcss is applied to the extracted styles. For example, using Mantine:
input
css={{ color: "light-dark(green,red)"}}
output
._syaz1602{color:green}[data-mantine-color-scheme=dark]
._syaz1602{color:red}Usage:
import { compiled } from "@nitedani/vite-plugin-compiled-react";
export default defineConfig({
plugins: [react(), compiled({ extract: true })],
});const Component = () => (
<div
css={{
color: "red",
":hover": {
color: "blue",
},
}}
>
Hello
</div>
);Typescript:
// types.d.ts
import { CssFunction } from "@compiled/react";
export { };
declare module "react" {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// extends React's HTMLAttributes
css?: CssFunction | CssFunction[]
}
}