@tailwind-styled/runtime-css 2.0.0

package/dist/CssInjector.cjs

@@ -0,0 +1,96 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/CssInjector.tsx
+var CssInjector_exports = {};
+__export(CssInjector_exports, {
+  TwCssInjector: () => TwCssInjector,
+  useTwClasses: () => useTwClasses
+});
+module.exports = __toCommonJS(CssInjector_exports);
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path = __toESM(require("path"), 1);
+var import_react = __toESM(require("react"), 1);
+async function TwCssInjector({
+  cssDir,
+  route,
+  includeGlobal = true,
+  minify = true,
+  asLink = false
+}) {
+  const resolvedDir = cssDir != null ? cssDir : import_node_path.default.join(process.cwd(), ".next", "static", "css", "tw");
+  const cssChunks = [];
+  if (includeGlobal) {
+    const globalCss = loadCssFile(import_node_path.default.join(resolvedDir, "_global.css"));
+    if (globalCss) cssChunks.push(globalCss);
+  }
+  const targetRoute = route != null ? route : "/";
+  const routeFile = routeToFilename(targetRoute);
+  const routeCss = loadCssFile(import_node_path.default.join(resolvedDir, routeFile));
+  if (routeCss) cssChunks.push(routeCss);
+  if (cssChunks.length === 0) return import_react.default.createElement(import_react.default.Fragment, null);
+  const combined = cssChunks.join("\n");
+  const final = minify ? minifyCss(combined) : combined;
+  if (asLink) {
+    return import_react.default.createElement("link", {
+      rel: "stylesheet",
+      href: `/_next/static/css/tw/${routeFile}`,
+      crossOrigin: "anonymous"
+    });
+  }
+  return import_react.default.createElement("style", {
+    dangerouslySetInnerHTML: { __html: final },
+    "data-tw-route": targetRoute
+  });
+}
+function useTwClasses(classes) {
+  return classes;
+}
+function loadCssFile(filepath) {
+  try {
+    if (import_node_fs.default.existsSync(filepath)) {
+      return import_node_fs.default.readFileSync(filepath, "utf-8");
+    }
+  } catch (e) {
+  }
+  return null;
+}
+function routeToFilename(route) {
+  if (route === "/") return "index.css";
+  if (route === "__global") return "_global.css";
+  return `${route.replace(/^\//, "").replace(/\//g, "_")}.css`;
+}
+function minifyCss(css) {
+  return css.replace(/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g, "").replace(/\s+/g, " ").replace(/\s*{\s*/g, "{").replace(/\s*}\s*/g, "}").replace(/\s*;\s*/g, ";").trim();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TwCssInjector,
+  useTwClasses
+});

package/dist/CssInjector.d.cts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ * tailwind-styled-v4 — CSS Injector (React Server Component)
+ *
+ * Inject CSS yang sudah di-generate per-route langsung ke <head>.
+ * Dipakai di Next.js App Router layout atau page.
+ *
+ * Di server component — inject inline CSS, zero client JS.
+ * Streaming friendly — CSS di-emit bersamaan dengan HTML.
+ *
+ * Usage:
+ *   // app/layout.tsx
+ *   import { TwCssInjector } from "tailwind-styled-v4/css"
+ *   export default function Layout({ children }) {
+ *     return <html><head><TwCssInjector/></head><body>{children}</body></html>
+ *   }
+ */
+
+interface CssInjectorProps {
+    /** Override CSS directory. Default: .next/static/css/tw */
+    cssDir?: string;
+    /** Specific route to inject. Default: auto-detect dari headers */
+    route?: string;
+    /** Inject global CSS juga. Default: true */
+    includeGlobal?: boolean;
+    /** Minify inline CSS. Default: true */
+    minify?: boolean;
+    /** Add <link> tag instead of inline <style> untuk cached CSS */
+    asLink?: boolean;
+}
+/**
+ * Server Component — inject route-specific CSS into <head>.
+ * No client JS, no hydration overhead.
+ */
+declare function TwCssInjector({ cssDir, route, includeGlobal, minify, asLink, }: CssInjectorProps): Promise<React.ReactElement>;
+/**
+ * Lightweight hook to get current route's CSS classes.
+ * Useful for dynamic class injection in client components.
+ *
+ * Returns empty string on server (SSR) — CSS already injected by TwCssInjector.
+ */
+declare function useTwClasses(classes: string): string;
+
+export { TwCssInjector, useTwClasses };

package/dist/CssInjector.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ * tailwind-styled-v4 — CSS Injector (React Server Component)
+ *
+ * Inject CSS yang sudah di-generate per-route langsung ke <head>.
+ * Dipakai di Next.js App Router layout atau page.
+ *
+ * Di server component — inject inline CSS, zero client JS.
+ * Streaming friendly — CSS di-emit bersamaan dengan HTML.
+ *
+ * Usage:
+ *   // app/layout.tsx
+ *   import { TwCssInjector } from "tailwind-styled-v4/css"
+ *   export default function Layout({ children }) {
+ *     return <html><head><TwCssInjector/></head><body>{children}</body></html>
+ *   }
+ */
+
+interface CssInjectorProps {
+    /** Override CSS directory. Default: .next/static/css/tw */
+    cssDir?: string;
+    /** Specific route to inject. Default: auto-detect dari headers */
+    route?: string;
+    /** Inject global CSS juga. Default: true */
+    includeGlobal?: boolean;
+    /** Minify inline CSS. Default: true */
+    minify?: boolean;
+    /** Add <link> tag instead of inline <style> untuk cached CSS */
+    asLink?: boolean;
+}
+/**
+ * Server Component — inject route-specific CSS into <head>.
+ * No client JS, no hydration overhead.
+ */
+declare function TwCssInjector({ cssDir, route, includeGlobal, minify, asLink, }: CssInjectorProps): Promise<React.ReactElement>;
+/**
+ * Lightweight hook to get current route's CSS classes.
+ * Useful for dynamic class injection in client components.
+ *
+ * Returns empty string on server (SSR) — CSS already injected by TwCssInjector.
+ */
+declare function useTwClasses(classes: string): string;
+
+export { TwCssInjector, useTwClasses };

package/dist/CssInjector.js

@@ -0,0 +1,60 @@
+// src/CssInjector.tsx
+import fs from "fs";
+import path from "path";
+import React from "react";
+async function TwCssInjector({
+  cssDir,
+  route,
+  includeGlobal = true,
+  minify = true,
+  asLink = false
+}) {
+  const resolvedDir = cssDir != null ? cssDir : path.join(process.cwd(), ".next", "static", "css", "tw");
+  const cssChunks = [];
+  if (includeGlobal) {
+    const globalCss = loadCssFile(path.join(resolvedDir, "_global.css"));
+    if (globalCss) cssChunks.push(globalCss);
+  }
+  const targetRoute = route != null ? route : "/";
+  const routeFile = routeToFilename(targetRoute);
+  const routeCss = loadCssFile(path.join(resolvedDir, routeFile));
+  if (routeCss) cssChunks.push(routeCss);
+  if (cssChunks.length === 0) return React.createElement(React.Fragment, null);
+  const combined = cssChunks.join("\n");
+  const final = minify ? minifyCss(combined) : combined;
+  if (asLink) {
+    return React.createElement("link", {
+      rel: "stylesheet",
+      href: `/_next/static/css/tw/${routeFile}`,
+      crossOrigin: "anonymous"
+    });
+  }
+  return React.createElement("style", {
+    dangerouslySetInnerHTML: { __html: final },
+    "data-tw-route": targetRoute
+  });
+}
+function useTwClasses(classes) {
+  return classes;
+}
+function loadCssFile(filepath) {
+  try {
+    if (fs.existsSync(filepath)) {
+      return fs.readFileSync(filepath, "utf-8");
+    }
+  } catch (e) {
+  }
+  return null;
+}
+function routeToFilename(route) {
+  if (route === "/") return "index.css";
+  if (route === "__global") return "_global.css";
+  return `${route.replace(/^\//, "").replace(/\//g, "_")}.css`;
+}
+function minifyCss(css) {
+  return css.replace(/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g, "").replace(/\s+/g, " ").replace(/\s*{\s*/g, "{").replace(/\s*}\s*/g, "}").replace(/\s*;\s*/g, ";").trim();
+}
+export {
+  TwCssInjector,
+  useTwClasses
+};

package/dist/batchedInjector.cjs

@@ -0,0 +1,98 @@
+"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/batchedInjector.ts
+var batchedInjector_exports = {};
+__export(batchedInjector_exports, {
+  batchedInject: () => batchedInject,
+  flushBatchedCss: () => flushBatchedCss,
+  getBatchedCssStats: () => getBatchedCssStats,
+  isInjected: () => isInjected,
+  resetBatchedCss: () => resetBatchedCss,
+  syncInject: () => syncInject
+});
+module.exports = __toCommonJS(batchedInjector_exports);
+var injected = /* @__PURE__ */ new Set();
+var pending = [];
+var rafHandle = null;
+var styleEl = null;
+function getStyleElement() {
+  if (styleEl && document.head.contains(styleEl)) return styleEl;
+  styleEl = document.createElement("style");
+  styleEl.id = "__tw-runtime-css";
+  styleEl.setAttribute("data-tw-batched", "true");
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+function batchedInject(cssRule) {
+  if (typeof window === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  pending.push(cssRule);
+  if (rafHandle === null) {
+    rafHandle = requestAnimationFrame(flushBatchedCss);
+  }
+}
+function flushBatchedCss() {
+  rafHandle = null;
+  if (pending.length === 0 || typeof document === "undefined") return;
+  const el = getStyleElement();
+  const css = pending.join("\n");
+  pending.length = 0;
+  el.textContent += `
+${css}`;
+}
+function syncInject(cssRule) {
+  if (typeof document === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  getStyleElement().textContent += `
+${cssRule}`;
+}
+function isInjected(cssRule) {
+  return injected.has(cssRule);
+}
+function resetBatchedCss() {
+  injected.clear();
+  pending.length = 0;
+  if (rafHandle !== null) {
+    cancelAnimationFrame(rafHandle);
+    rafHandle = null;
+  }
+  if (styleEl && document.head.contains(styleEl)) {
+    document.head.removeChild(styleEl);
+    styleEl = null;
+  }
+}
+function getBatchedCssStats() {
+  return {
+    totalInjected: injected.size,
+    pendingCount: pending.length,
+    hasBatchScheduled: rafHandle !== null
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  batchedInject,
+  flushBatchedCss,
+  getBatchedCssStats,
+  isInjected,
+  resetBatchedCss,
+  syncInject
+});

package/dist/batchedInjector.d.cts

@@ -0,0 +1,57 @@
+/**
+ * tailwind-styled-v4 — Batched CSS Injector (Client Runtime)
+ *
+ * Menggantikan pattern inject-per-komponen yang menyebabkan banyak
+ * style recalculation saat banyak komponen mount bersamaan.
+ *
+ * Cara kerja:
+ *   - Semua CSS rules dari render cycle yang sama dikumpulkan
+ *   - Satu requestAnimationFrame = satu DOM style update
+ *   - Deduplication via Set<string> — rule yang sama tidak diinjeksi dua kali
+ *   - Fallback synchronous untuk SSR / server context
+ *
+ * Usage (internal, dipakai oleh stateEngine dan containerQuery):
+ *   import { batchedInject, flushBatchedCss } from "./batchedInjector"
+ *
+ *   // Queue a rule
+ *   batchedInject(".tw-s-abc123[data-active=\"true\"]{opacity:0.5}")
+ *
+ *   // Force flush (biasanya tidak perlu — RAF melakukan ini otomatis)
+ *   flushBatchedCss()
+ */
+/**
+ * Queue a CSS rule for batched injection.
+ * Multiple rules accumulated during one event loop tick are flushed together
+ * in one requestAnimationFrame → one style recalculation.
+ */
+declare function batchedInject(cssRule: string): void;
+/**
+ * Immediately flush all pending CSS rules to the DOM.
+ * Called automatically by RAF each frame. Can also be called manually
+ * after synchronous component setup where RAF timing is too late.
+ */
+declare function flushBatchedCss(): void;
+/**
+ * Synchronous inject — skips batching.
+ * Use for SSR / critical path where RAF is not available.
+ */
+declare function syncInject(cssRule: string): void;
+/**
+ * Check if a rule has already been injected (deduplication check).
+ */
+declare function isInjected(cssRule: string): boolean;
+/**
+ * Clear all injected rules and remove the style element.
+ * Useful for testing / SSR resets. Not for production use.
+ */
+declare function resetBatchedCss(): void;
+/**
+ * Get stats about the current injection state (for devtools).
+ */
+declare function getBatchedCssStats(): {
+    totalInjected: number;
+    pendingCount: number;
+    hasBatchScheduled: boolean;
+};
+
+export { batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject };

package/dist/batchedInjector.d.ts

@@ -0,0 +1,57 @@
+/**
+ * tailwind-styled-v4 — Batched CSS Injector (Client Runtime)
+ *
+ * Menggantikan pattern inject-per-komponen yang menyebabkan banyak
+ * style recalculation saat banyak komponen mount bersamaan.
+ *
+ * Cara kerja:
+ *   - Semua CSS rules dari render cycle yang sama dikumpulkan
+ *   - Satu requestAnimationFrame = satu DOM style update
+ *   - Deduplication via Set<string> — rule yang sama tidak diinjeksi dua kali
+ *   - Fallback synchronous untuk SSR / server context
+ *
+ * Usage (internal, dipakai oleh stateEngine dan containerQuery):
+ *   import { batchedInject, flushBatchedCss } from "./batchedInjector"
+ *
+ *   // Queue a rule
+ *   batchedInject(".tw-s-abc123[data-active=\"true\"]{opacity:0.5}")
+ *
+ *   // Force flush (biasanya tidak perlu — RAF melakukan ini otomatis)
+ *   flushBatchedCss()
+ */
+/**
+ * Queue a CSS rule for batched injection.
+ * Multiple rules accumulated during one event loop tick are flushed together
+ * in one requestAnimationFrame → one style recalculation.
+ */
+declare function batchedInject(cssRule: string): void;
+/**
+ * Immediately flush all pending CSS rules to the DOM.
+ * Called automatically by RAF each frame. Can also be called manually
+ * after synchronous component setup where RAF timing is too late.
+ */
+declare function flushBatchedCss(): void;
+/**
+ * Synchronous inject — skips batching.
+ * Use for SSR / critical path where RAF is not available.
+ */
+declare function syncInject(cssRule: string): void;
+/**
+ * Check if a rule has already been injected (deduplication check).
+ */
+declare function isInjected(cssRule: string): boolean;
+/**
+ * Clear all injected rules and remove the style element.
+ * Useful for testing / SSR resets. Not for production use.
+ */
+declare function resetBatchedCss(): void;
+/**
+ * Get stats about the current injection state (for devtools).
+ */
+declare function getBatchedCssStats(): {
+    totalInjected: number;
+    pendingCount: number;
+    hasBatchScheduled: boolean;
+};
+
+export { batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject };

package/dist/batchedInjector.js

@@ -0,0 +1,68 @@
+// src/batchedInjector.ts
+var injected = /* @__PURE__ */ new Set();
+var pending = [];
+var rafHandle = null;
+var styleEl = null;
+function getStyleElement() {
+  if (styleEl && document.head.contains(styleEl)) return styleEl;
+  styleEl = document.createElement("style");
+  styleEl.id = "__tw-runtime-css";
+  styleEl.setAttribute("data-tw-batched", "true");
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+function batchedInject(cssRule) {
+  if (typeof window === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  pending.push(cssRule);
+  if (rafHandle === null) {
+    rafHandle = requestAnimationFrame(flushBatchedCss);
+  }
+}
+function flushBatchedCss() {
+  rafHandle = null;
+  if (pending.length === 0 || typeof document === "undefined") return;
+  const el = getStyleElement();
+  const css = pending.join("\n");
+  pending.length = 0;
+  el.textContent += `
+${css}`;
+}
+function syncInject(cssRule) {
+  if (typeof document === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  getStyleElement().textContent += `
+${cssRule}`;
+}
+function isInjected(cssRule) {
+  return injected.has(cssRule);
+}
+function resetBatchedCss() {
+  injected.clear();
+  pending.length = 0;
+  if (rafHandle !== null) {
+    cancelAnimationFrame(rafHandle);
+    rafHandle = null;
+  }
+  if (styleEl && document.head.contains(styleEl)) {
+    document.head.removeChild(styleEl);
+    styleEl = null;
+  }
+}
+function getBatchedCssStats() {
+  return {
+    totalInjected: injected.size,
+    pendingCount: pending.length,
+    hasBatchScheduled: rafHandle !== null
+  };
+}
+export {
+  batchedInject,
+  flushBatchedCss,
+  getBatchedCssStats,
+  isInjected,
+  resetBatchedCss,
+  syncInject
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tailwind-styled/runtime-css",
+  "version": "2.0.0",
+  "description": "RSC-aware CSS injector for tailwind-styled-v4 — streaming-friendly, zero client JS",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types":   "./dist/CssInjector.d.ts",
+      "import":  "./dist/CssInjector.js",
+      "require": "./dist/CssInjector.cjs"
+    },
+    "./batched": {
+      "types":   "./dist/batchedInjector.d.ts",
+      "import":  "./dist/batchedInjector.js",
+      "require": "./dist/batchedInjector.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/CssInjector.tsx src/batchedInjector.ts --format cjs,esm --dts --out-dir dist --clean",
+    "dev":   "tsup src/CssInjector.tsx src/batchedInjector.ts --format cjs,esm --dts --out-dir dist --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "tsup": "^8",
+    "typescript": "^5",
+    "@types/react": "^19",
+    "@types/node": "^20"
+  }
+}