@casablanca-css/core

Core package of casablanca-css .

Setup

Install

npm install -D @casablanca-css/core
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 postcssNested from "postcss-nested";
import { defineConfig } from "vite";

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

See examples for other projects.

Usage

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