0.0.9 • Published 2 years ago

@nitedani/vite-plugin-compiled-react v0.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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[]
  }
}
0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago