Static extract

README.md

@@ -97,6 +97,41 @@ const sheet = css.make({
 });
 ```
 
+### css.extend
+
+```tsx
+import { css } from "@swan-io/css";
+
+const input = css.extend({
+  colors: {
+    red: "#fa2c37",
+    blue: "#2c7fff",
+    green: "#00c950",
+  },
+});
+
+type CustomInput = typeof input;
+
+declare module "@swan-io/css" {
+  export interface Input extends CustomInput {}
+}
+```
+
+```tsx
+import "./theme";
+
+import { createRoot } from "react-dom/client";
+// …
+```
+
+```tsx
+const sheet = css.make(({ colors }) => ({
+  box: {
+    backgroundColor: colors.blue,
+  },
+}));
+```
+
 ### cx
 
 Concatenate the generated classes from left to right, with subsequent styles overwriting the property values of earlier ones.
@@ -119,6 +154,18 @@ const Component = ({ inline }: { inline: boolean }) => (
 );
 ```
 
+## CSS extraction
+
+```tsx
+import swanCss from "@swan-io/css/vite-plugin";
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
+
+export default defineConfig(({ command }) => ({
+  plugins: [react(), command === "build" && swanCss()],
+}));
+```
+
 ## Links
 
 - ⚖️ [**License**](./LICENSE)

example/.gitignore

@@ -1,5 +1,6 @@
 *.local
 .DS_Store
+.vite-inspect
 dist
 dist-ssr
 node_modules

example/package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "19.1.7",
     "@vitejs/plugin-react-swc": "4.0.0",
     "typescript": "5.9.2",
-    "vite": "7.1.2"
+    "vite": "7.1.2",
+    "vite-plugin-inspect": "11.3.2"
   }
 }

example/src/App.tsx

@@ -1,13 +1,36 @@
-import { css } from "@swan-io/css";
+import { css, cx } from "@swan-io/css";
+import { useState } from "react";
 import { useSheetLogger } from "./useSheetLogger";
 
-const sheet = css.make({
+const sheet = css.make(({ colors }) => ({
   title: {
-    color: "red",
+    color: colors.red,
+    ":hover": {
+      color: colors.blue,
+    },
   },
-});
+  extra: {
+    color: colors.green,
+  },
+}));
 
 export const App = () => {
+  const [checked, setChecked] = useState(false);
+
   useSheetLogger(); // log sheet on "l" keypress
-  return <h1 className={sheet.title}>Hello world</h1>;
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <>
+      <h1 className={cx(sheet.title, checked && sheet.extra)}>Hello world</h1>
+
+      <span>
+        <input checked={checked} type="checkbox" onChange={handleOnChange} />
+        Add extra className
+      </span>
+    </>
+  );
 };

example/src/index.tsx

@@ -1,3 +1,5 @@
+import "./theme";
+
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 

example/src/theme.ts

@@ -0,0 +1,15 @@
+import { css } from "@swan-io/css";
+
+const input = css.extend({
+  colors: {
+    red: "#fa2c37",
+    blue: "#2c7fff",
+    green: "#00c950",
+  },
+});
+
+type CustomInput = typeof input;
+
+declare module "@swan-io/css" {
+  export interface Input extends CustomInput {}
+}

example/src/useSheetLogger.ts

@@ -6,8 +6,9 @@ export const useSheetLogger = () => {
       if (event.code === "KeyL") {
         const id = "swan-stylesheet";
 
-        const sheet = document.querySelector<HTMLStyleElement>(
-          `style[id="${id}"]`,
+        const sheet = (
+          document.querySelector<HTMLLinkElement>(`link[id="${id}"]`) ??
+          document.querySelector<HTMLStyleElement>(`style[id="${id}"]`)
         )?.sheet;
 
         if (sheet != null) {

example/vite.config.ts

@@ -1,7 +1,13 @@
+import swanCss from "@swan-io/css/vite-plugin";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
+import inspect from "vite-plugin-inspect";
 
 export default defineConfig(({ command }) => ({
   build: { sourcemap: true },
-  plugins: [react()],
+  plugins: [
+    react(),
+    command === "build" && inspect({ build: true }),
+    command === "build" && swanCss(),
+  ],
 }));

package.json

@@ -10,10 +10,21 @@
     "url": "git+https://github.com/swan-io/css.git"
   },
   "packageManager": "pnpm@10.14.0",
-  "source": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.mjs",
+      "default": "./dist/vite-plugin.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -43,18 +54,32 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "@swc/core",
-      "esbuild"
+      "esbuild",
+      "oxc-resolver"
     ]
   },
   "prettier": {
     "plugins": [
       "prettier-plugin-organize-imports"
     ]
   },
+  "peerDependencies": {
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@emotion/hash": "^0.9.2",
     "@react-native/normalize-colors": "^0.81.0",
     "csstype": "^3.1.3",
+    "magic-string": "^0.30.17",
+    "node-html-parser": "^7.0.1",
+    "oxc-parser": "^0.82.1",
+    "oxc-resolver": "^11.6.1",
+    "oxc-walker": "^0.4.0",
     "postcss-value-parser": "^4.2.0"
   },
   "devDependencies": {