casablanca-css

Zero-Runtime CSS-in-JS powered by vite.

Features

• Generating simple CSS-Module files; No JS runtime codes!
• Work with any vite and postcss plugins
• Dynamic styling for styled JSX components
• Refer to other components in selector
• Reuse common styles with composes property

Setup

Install

npm install -D @casablanca-css/core
npm install -D postcss-nested  # recommended to support nested @-rule syntax
npm install -D @casablanca-css/styled  # install if you want styled-components-like API

Config package.json

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

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

Config plugins

For Vanilla-TS project

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

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

For React-TS project

// 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

css tag

import { css } from "@casablanca-css/core";
import { colors } from "./themes";

const button = css`
  color: ${colors.primary};
  border: 4px solid currentcolor;
`;

export const Button = () => <button className={button}>Click!</button>;

styled tag

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")};
`;