@casablanca-css/styled

Styled-API of casablanca-css .

Setup

Install

npm install -D @casablanca-css/core @casablanca-css/styled
npm install -D postcss-nested # recommended to support nested @-rule syntax

Config package.json

{
  ...
  "type": "module",
  ...
}

Env-var NODE_OPTIONS=--experimental-vm-modules is also required because casablanca-css uses vm.Module features.

Config plugins

// vite.config.ts
import { casablanca } from "@casablanca-css/core/vite";
import { casablancaStyled } from "@casablanca-css/styled/vite";
import react from "@vitejs/plugin-react";
import postcssNested from "postcss-nested";
import { defineConfig } from "vite";

export default defineConfig({
  css: {
    postcss: { plugins: [postcssNested()] },
    devSourcemap: true,
  },
  plugins: [react(), casablancaStyled(), casablanca()],
});

See examples for other projects.

Usage

import { styled } from "@casablanca-css/styled";
import { MyComponent } from "./components";
import { colors, baseButton } from "./themes";

export const Button = styled("button")`
  composes: ${baseButton};
  color: ${colors.primary};
`;

export const MyStyledComponent = styled(MyComponent)<{ state: "error" | "ok" }>`
  color: ${(props) => (props.state === "ok" ? "green" : "red")};
`;