@typestyles/rollup 0.0.0-unstable.5b7138167233

package/README.md

@@ -0,0 +1,85 @@
+# @typestyles/rollup
+
+Rollup and Rolldown plugin for `typestyles`.
+
+Supports:
+
+- Runtime mode (default): normal typestyles runtime behavior.
+- Build mode: emit static CSS and disable runtime style insertion in bundle.
+- Hybrid mode: emit static CSS for production while keeping runtime-friendly behavior in development.
+
+## Installation
+
+```bash
+pnpm add typestyles
+pnpm add -D @typestyles/rollup rollup
+```
+
+## Rollup usage
+
+```js
+// rollup.config.mjs
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import typestylesRollupPlugin from '@typestyles/rollup';
+
+export default {
+  input: 'src/main.js',
+  output: {
+    dir: 'dist',
+    format: 'es',
+  },
+  plugins: [
+    nodeResolve(),
+    typestylesRollupPlugin({
+      mode: 'build',
+      extract: {
+        modules: ['src/styles.ts', 'src/tokens.ts', 'src/animations.ts'],
+        fileName: 'typestyles.css',
+      },
+    }),
+  ],
+};
+```
+
+Then link the emitted CSS in your HTML:
+
+```html
+<link rel="stylesheet" href="/typestyles.css" />
+```
+
+## Rolldown usage
+
+Rolldown supports Rollup-compatible plugins, so you can use the same plugin:
+
+```js
+// rolldown.config.mjs
+import typestylesRollupPlugin from '@typestyles/rollup';
+
+export default {
+  input: 'src/main.ts',
+  output: {
+    dir: 'dist',
+    format: 'esm',
+  },
+  plugins: [
+    typestylesRollupPlugin({
+      mode: 'build',
+      extract: {
+        modules: ['src/styles.ts', 'src/tokens.ts'],
+      },
+    }),
+  ],
+};
+```
+
+## Options
+
+- `mode?: 'runtime' | 'build' | 'hybrid'`
+  - Default: `'runtime'`
+- `extract?: { modules: string[]; fileName?: string }`
+  - Required for `build` and `hybrid` if you want CSS extraction
+- `warnDuplicates?: boolean`
+  - Default: `true`
+- `root?: string`
+  - Project root for resolving `extract.modules`
+  - Default: `process.cwd()`

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => typestylesRollupPlugin,
+  extractNamespaces: () => extractNamespaces
+});
+module.exports = __toCommonJS(index_exports);
+var import_build_runner = require("@typestyles/build-runner");
+var STYLES_CREATE_RE = /styles\.create\(\s*['"]([^'"]+)['"]/g;
+var STYLES_COMPONENT_RE = /styles\.component\(\s*['"]([^'"]+)['"]/g;
+var TOKENS_CREATE_RE = /tokens\.create\(\s*['"]([^'"]+)['"]/g;
+var CREATE_THEME_RE = /(?:tokens\.)?createTheme\(\s*['"]([^'"]+)['"]/g;
+var KEYFRAMES_CREATE_RE = /keyframes\.create\(\s*['"]([^'"]+)['"]/g;
+var GLOBAL_STYLE_RE = /global\.style\(\s*['"]([^'"]+)['"]/g;
+var GLOBAL_FONT_FACE_RE = /global\.fontFace\(\s*['"]([^'"]+)['"]/g;
+var TYPESTYLES_IMPORT_RE = /(?:from\s+|import\s+|require\s*\(\s*)['"]typestyles['"]/;
+function extractNamespaces(code) {
+  const keys = [];
+  const prefixes = [];
+  for (const match of code.matchAll(STYLES_CREATE_RE)) {
+    prefixes.push(`.${match[1]}-`);
+  }
+  for (const match of code.matchAll(STYLES_COMPONENT_RE)) {
+    prefixes.push(`.${match[1]}-`);
+  }
+  for (const match of code.matchAll(TOKENS_CREATE_RE)) {
+    keys.push(`tokens:${match[1]}`);
+  }
+  for (const match of code.matchAll(CREATE_THEME_RE)) {
+    keys.push(`theme:${match[1]}`);
+  }
+  for (const match of code.matchAll(KEYFRAMES_CREATE_RE)) {
+    keys.push(`keyframes:${match[1]}`);
+  }
+  for (const match of code.matchAll(GLOBAL_STYLE_RE)) {
+    prefixes.push(match[1]);
+  }
+  for (const match of code.matchAll(GLOBAL_FONT_FACE_RE)) {
+    prefixes.push(`font-face:${match[1]}`);
+  }
+  return { keys, prefixes };
+}
+function typestylesRollupPlugin(options = {}) {
+  const { warnDuplicates = true, mode = "runtime", extract, root = process.cwd() } = options;
+  const moduleNamespaces = /* @__PURE__ */ new Map();
+  return {
+    name: "typestyles-rollup",
+    transform(code, id) {
+      if ((mode === "build" || mode === "hybrid") && code.includes("__TYPESTYLES_RUNTIME_DISABLED__")) {
+        return {
+          code: code.replace(/__TYPESTYLES_RUNTIME_DISABLED__/g, '"true"'),
+          map: null
+        };
+      }
+      if (!/\.[jt]sx?$/.test(id)) return null;
+      if (id.includes("node_modules")) return null;
+      if (!TYPESTYLES_IMPORT_RE.test(code)) return null;
+      const { keys, prefixes } = extractNamespaces(code);
+      if (keys.length === 0 && prefixes.length === 0) return null;
+      if (warnDuplicates) {
+        for (const [otherId, other] of moduleNamespaces) {
+          if (otherId === id) continue;
+          for (const prefix of prefixes) {
+            if (other.prefixes.includes(prefix)) {
+              const ns = prefix.slice(1, -1);
+              this.warn(
+                `Style namespace "${ns}" is also used in ${otherId}. Duplicate namespaces cause class name collisions.`
+              );
+            }
+          }
+        }
+      }
+      moduleNamespaces.set(id, { keys, prefixes });
+      return null;
+    },
+    async generateBundle() {
+      if (mode === "runtime") return;
+      if (!extract || !extract.modules.length) return;
+      try {
+        const css = await (0, import_build_runner.runTypestylesBuild)({
+          root,
+          modules: extract.modules
+        });
+        this.emitFile({
+          type: "asset",
+          fileName: extract.fileName ?? "typestyles.css",
+          source: css
+        });
+      } catch (error) {
+        this.error(
+          `[typestyles] Failed to extract CSS: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  extractNamespaces
+});

package/dist/index.d.cts

@@ -0,0 +1,46 @@
+import { Plugin } from 'rollup';
+
+interface TypestylesExtractOptions {
+    /**
+     * Modules that should be imported during build to register styles.
+     * Paths are resolved relative to `root`.
+     */
+    modules: string[];
+    /**
+     * Output CSS filename (emitted build asset). Defaults to "typestyles.css".
+     */
+    fileName?: string;
+}
+interface TypestylesRollupPluginOptions {
+    /** Warn about duplicate namespaces across modules. Defaults to true. */
+    warnDuplicates?: boolean;
+    /**
+     * Integration mode:
+     * - "runtime" (default): no static extraction.
+     * - "build": emit static CSS and disable runtime insertion.
+     * - "hybrid": emit static CSS and keep runtime-compatible dev behavior.
+     */
+    mode?: 'runtime' | 'build' | 'hybrid';
+    /**
+     * Build-time extraction options for "build" and "hybrid" modes.
+     */
+    extract?: TypestylesExtractOptions;
+    /**
+     * Project root used to resolve `extract.modules`.
+     * Defaults to process.cwd().
+     */
+    root?: string;
+}
+declare function extractNamespaces(code: string): {
+    keys: string[];
+    prefixes: string[];
+};
+/**
+ * Rollup plugin for typestyles runtime + optional static extraction.
+ *
+ * Rolldown supports Rollup-compatible plugins, so this plugin also works
+ * as a starting integration there.
+ */
+declare function typestylesRollupPlugin(options?: TypestylesRollupPluginOptions): Plugin;
+
+export { type TypestylesExtractOptions, type TypestylesRollupPluginOptions, typestylesRollupPlugin as default, extractNamespaces };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { Plugin } from 'rollup';
+
+interface TypestylesExtractOptions {
+    /**
+     * Modules that should be imported during build to register styles.
+     * Paths are resolved relative to `root`.
+     */
+    modules: string[];
+    /**
+     * Output CSS filename (emitted build asset). Defaults to "typestyles.css".
+     */
+    fileName?: string;
+}
+interface TypestylesRollupPluginOptions {
+    /** Warn about duplicate namespaces across modules. Defaults to true. */
+    warnDuplicates?: boolean;
+    /**
+     * Integration mode:
+     * - "runtime" (default): no static extraction.
+     * - "build": emit static CSS and disable runtime insertion.
+     * - "hybrid": emit static CSS and keep runtime-compatible dev behavior.
+     */
+    mode?: 'runtime' | 'build' | 'hybrid';
+    /**
+     * Build-time extraction options for "build" and "hybrid" modes.
+     */
+    extract?: TypestylesExtractOptions;
+    /**
+     * Project root used to resolve `extract.modules`.
+     * Defaults to process.cwd().
+     */
+    root?: string;
+}
+declare function extractNamespaces(code: string): {
+    keys: string[];
+    prefixes: string[];
+};
+/**
+ * Rollup plugin for typestyles runtime + optional static extraction.
+ *
+ * Rolldown supports Rollup-compatible plugins, so this plugin also works
+ * as a starting integration there.
+ */
+declare function typestylesRollupPlugin(options?: TypestylesRollupPluginOptions): Plugin;
+
+export { type TypestylesExtractOptions, type TypestylesRollupPluginOptions, typestylesRollupPlugin as default, extractNamespaces };

package/dist/index.js

@@ -0,0 +1,94 @@
+// src/index.ts
+import { runTypestylesBuild } from "@typestyles/build-runner";
+var STYLES_CREATE_RE = /styles\.create\(\s*['"]([^'"]+)['"]/g;
+var STYLES_COMPONENT_RE = /styles\.component\(\s*['"]([^'"]+)['"]/g;
+var TOKENS_CREATE_RE = /tokens\.create\(\s*['"]([^'"]+)['"]/g;
+var CREATE_THEME_RE = /(?:tokens\.)?createTheme\(\s*['"]([^'"]+)['"]/g;
+var KEYFRAMES_CREATE_RE = /keyframes\.create\(\s*['"]([^'"]+)['"]/g;
+var GLOBAL_STYLE_RE = /global\.style\(\s*['"]([^'"]+)['"]/g;
+var GLOBAL_FONT_FACE_RE = /global\.fontFace\(\s*['"]([^'"]+)['"]/g;
+var TYPESTYLES_IMPORT_RE = /(?:from\s+|import\s+|require\s*\(\s*)['"]typestyles['"]/;
+function extractNamespaces(code) {
+  const keys = [];
+  const prefixes = [];
+  for (const match of code.matchAll(STYLES_CREATE_RE)) {
+    prefixes.push(`.${match[1]}-`);
+  }
+  for (const match of code.matchAll(STYLES_COMPONENT_RE)) {
+    prefixes.push(`.${match[1]}-`);
+  }
+  for (const match of code.matchAll(TOKENS_CREATE_RE)) {
+    keys.push(`tokens:${match[1]}`);
+  }
+  for (const match of code.matchAll(CREATE_THEME_RE)) {
+    keys.push(`theme:${match[1]}`);
+  }
+  for (const match of code.matchAll(KEYFRAMES_CREATE_RE)) {
+    keys.push(`keyframes:${match[1]}`);
+  }
+  for (const match of code.matchAll(GLOBAL_STYLE_RE)) {
+    prefixes.push(match[1]);
+  }
+  for (const match of code.matchAll(GLOBAL_FONT_FACE_RE)) {
+    prefixes.push(`font-face:${match[1]}`);
+  }
+  return { keys, prefixes };
+}
+function typestylesRollupPlugin(options = {}) {
+  const { warnDuplicates = true, mode = "runtime", extract, root = process.cwd() } = options;
+  const moduleNamespaces = /* @__PURE__ */ new Map();
+  return {
+    name: "typestyles-rollup",
+    transform(code, id) {
+      if ((mode === "build" || mode === "hybrid") && code.includes("__TYPESTYLES_RUNTIME_DISABLED__")) {
+        return {
+          code: code.replace(/__TYPESTYLES_RUNTIME_DISABLED__/g, '"true"'),
+          map: null
+        };
+      }
+      if (!/\.[jt]sx?$/.test(id)) return null;
+      if (id.includes("node_modules")) return null;
+      if (!TYPESTYLES_IMPORT_RE.test(code)) return null;
+      const { keys, prefixes } = extractNamespaces(code);
+      if (keys.length === 0 && prefixes.length === 0) return null;
+      if (warnDuplicates) {
+        for (const [otherId, other] of moduleNamespaces) {
+          if (otherId === id) continue;
+          for (const prefix of prefixes) {
+            if (other.prefixes.includes(prefix)) {
+              const ns = prefix.slice(1, -1);
+              this.warn(
+                `Style namespace "${ns}" is also used in ${otherId}. Duplicate namespaces cause class name collisions.`
+              );
+            }
+          }
+        }
+      }
+      moduleNamespaces.set(id, { keys, prefixes });
+      return null;
+    },
+    async generateBundle() {
+      if (mode === "runtime") return;
+      if (!extract || !extract.modules.length) return;
+      try {
+        const css = await runTypestylesBuild({
+          root,
+          modules: extract.modules
+        });
+        this.emitFile({
+          type: "asset",
+          fileName: extract.fileName ?? "typestyles.css",
+          source: css
+        });
+      } catch (error) {
+        this.error(
+          `[typestyles] Failed to extract CSS: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    }
+  };
+}
+export {
+  typestylesRollupPlugin as default,
+  extractNamespaces
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@typestyles/rollup",
+  "version": "0.0.0-unstable.5b7138167233",
+  "description": "Rollup and Rolldown plugin for typestyles",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "rollup",
+    "rolldown",
+    "typestyles",
+    "plugin",
+    "css-in-js"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dbanksdesign/typestyles",
+    "directory": "packages/rollup"
+  },
+  "peerDependencies": {
+    "rollup": ">=4.0.0"
+  },
+  "dependencies": {
+    "@typestyles/build-runner": "0.0.0-unstable.5b7138167233"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^3.0.0",
+    "rollup": "^4.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external typestyles,@typestyles/build-runner",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}