@tailwind-styled/next 2.0.0

package/dist/chunk-QYSYW6TK.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+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);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __require,
+  __esm,
+  __export,
+  __toCommonJS,
+  __privateGet,
+  __privateAdd,
+  __privateSet
+};

package/dist/index.cjs

@@ -0,0 +1,288 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  withTailwindStyled: () => withTailwindStyled
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/withTailwindStyled.ts
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path = __toESM(require("path"), 1);
+var LOADER_PATH = require.resolve("./turbopackLoader");
+var WEBPACK_LOADER_PATH = require.resolve("./webpackLoader");
+function withTailwindStyled(opts = {}) {
+  return (nextConfig = {}) => {
+    var _a, _b, _c;
+    const cwd = process.cwd();
+    const isDev = process.env.NODE_ENV !== "production";
+    const hasReactCompiler = nextConfig.reactCompiler === true || ((_a = nextConfig.experimental) == null ? void 0 : _a.reactCompiler) === true;
+    if (hasReactCompiler && isDev) {
+      console.log("[tailwind-styled-v4] React Compiler detected \u2192 hoist disabled");
+    }
+    const {
+      scanDirs = ["src"],
+      safelistOutput = "src/app/__tw-safelist.css",
+      autoClientBoundary = true,
+      hoist = !hasReactCompiler,
+      atomic = false,
+      routeCssDir = import_node_path.default.join(cwd, ".next", "static", "css", "tw"),
+      zeroConfig = true,
+      plugins = [],
+      devtools = isDev,
+      staticVariants = !isDev,
+      deadStyleElimination = !isDev
+    } = opts;
+    const routeCss = opts.routeCss !== void 0 ? opts.routeCss : !isDev;
+    if (zeroConfig) {
+      try {
+        const { bootstrapZeroConfig } = require("@tailwind-styled/compiler");
+        bootstrapZeroConfig(cwd);
+      } catch (e) {
+      }
+    }
+    const safelistAbsPath = import_node_path.default.isAbsolute(safelistOutput) ? safelistOutput : import_node_path.default.resolve(cwd, safelistOutput);
+    if (!import_node_fs.default.existsSync(safelistAbsPath)) {
+      try {
+        import_node_fs.default.mkdirSync(import_node_path.default.dirname(safelistAbsPath), { recursive: true });
+        import_node_fs.default.writeFileSync(
+          safelistAbsPath,
+          "/* Auto-generated by tailwind-styled-v4 \u2014 DO NOT EDIT */\n"
+        );
+      } catch (e) {
+      }
+    }
+    if (plugins.length > 0) {
+      try {
+        const { use } = require("@tailwind-styled/plugin");
+        for (const plugin of plugins) use(plugin);
+        console.log(
+          `[tailwind-styled-v4] ${plugins.length} plugin(s): ${plugins.map((p) => p.name).join(", ")}`
+        );
+      } catch (e) {
+        console.warn("[tailwind-styled-v4] Plugin init failed:", e);
+      }
+    }
+    const loaderOpts = {
+      mode: opts.mode,
+      addDataAttr: (_b = opts.addDataAttr) != null ? _b : isDev,
+      autoClientBoundary,
+      hoist,
+      atomic,
+      routeCss,
+      staticVariants
+    };
+    return __spreadProps(__spreadValues({}, nextConfig), {
+      experimental: __spreadValues({}, nextConfig.experimental),
+      // Next.js 16+: turbopack moved to top-level
+      // FIX TURBOPACK: pattern "*.{tsx,ts,jsx,js}" terlalu lebar — ikut match
+      // node_modules/next/dist/client/*.js.tsx dan trigger "Missing module type".
+      // Solusi: scope pattern ke scanDirs saja, jangan catch-all.
+      // `as` field dihapus — tidak perlu karena loader output tetap TSX-compatible.
+      turbopack: __spreadProps(__spreadValues({}, nextConfig.turbopack), {
+        rules: __spreadValues(__spreadValues({}, Object.fromEntries(
+          scanDirs.flatMap((dir) => [
+            [
+              `{./${dir},./src,./app,./pages,./components}/**/*.tsx`,
+              {
+                loaders: [{ loader: LOADER_PATH, options: loaderOpts }]
+              }
+            ],
+            [
+              `{./${dir},./src,./app,./pages,./components}/**/*.ts`,
+              {
+                loaders: [{ loader: LOADER_PATH, options: loaderOpts }]
+              }
+            ]
+          ])
+        )), (_c = nextConfig.turbopack) == null ? void 0 : _c.rules)
+      }),
+      webpack(webpackConfig, webpackOpts) {
+        var _a2, _b2, _c2, _d;
+        const alreadyRegistered = webpackConfig.module.rules.some(
+          (r) => r._tailwindStyledMarker === true
+        );
+        if (!alreadyRegistered) {
+          webpackConfig.module.rules.push({
+            _tailwindStyledMarker: true,
+            test: /\.(tsx|ts|jsx|js)$/,
+            exclude: /node_modules/,
+            use: [
+              {
+                loader: WEBPACK_LOADER_PATH,
+                options: __spreadProps(__spreadValues({}, loaderOpts), {
+                  mode: (_a2 = opts.mode) != null ? _a2 : webpackOpts.dev ? "runtime" : "zero-runtime",
+                  addDataAttr: (_b2 = opts.addDataAttr) != null ? _b2 : webpackOpts.dev
+                })
+              }
+            ]
+          });
+        }
+        if (devtools && webpackOpts.dev) {
+          webpackConfig.resolve = (_c2 = webpackConfig.resolve) != null ? _c2 : {};
+          webpackConfig.resolve.alias = __spreadProps(__spreadValues({}, (_d = webpackConfig.resolve.alias) != null ? _d : {}), {
+            "tailwind-styled-v4/devtools": import_node_path.default.resolve(__dirname, "../../devtools/src/index.tsx")
+          });
+        }
+        return typeof nextConfig.webpack === "function" ? nextConfig.webpack(webpackConfig, webpackOpts) : webpackConfig;
+      },
+      generateBuildId: async () => {
+        try {
+          const { generateSafelistCss } = require("@tailwind-styled/compiler");
+          generateSafelistCss(
+            scanDirs.map((d) => import_node_path.default.resolve(cwd, d)),
+            import_node_path.default.isAbsolute(safelistOutput) ? safelistOutput : import_node_path.default.resolve(cwd, safelistOutput)
+          );
+          console.log("[tailwind-styled-v4] \u2713 Safelist CSS generated");
+        } catch (e) {
+          console.warn("[tailwind-styled-v4] Safelist skipped:", e);
+        }
+        if (plugins.length > 0) {
+          try {
+            const { getGlobalRegistry, runBuildHooks } = require("@tailwind-styled/plugin");
+            await runBuildHooks(getGlobalRegistry());
+            console.log("[tailwind-styled-v4] \u2713 Plugin build hooks complete");
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Plugin build hooks failed:", e);
+          }
+        }
+        if (routeCss) {
+          try {
+            const {
+              generateAllRouteCss,
+              getCollectorSummary,
+              runElimination
+            } = require("@tailwind-styled/compiler");
+            const results = await generateAllRouteCss({ cwd, outputDir: routeCssDir, minify: true });
+            console.log(getCollectorSummary());
+            if (deadStyleElimination) {
+              let totalSaved = 0;
+              for (const result of results) {
+                const routeFile = import_node_path.default.join(
+                  routeCssDir,
+                  result.route === "/" ? "index.css" : `${result.route.replace(/\//g, "_")}.css`
+                );
+                if (import_node_fs.default.existsSync(routeFile)) {
+                  const inputCss = import_node_fs.default.readFileSync(routeFile, "utf-8");
+                  const { css, report } = runElimination({ dirs: scanDirs, cwd, inputCss });
+                  import_node_fs.default.writeFileSync(routeFile, css);
+                  totalSaved += report.bytesSaved;
+                }
+              }
+              if (totalSaved > 0) {
+                console.log(
+                  `[tailwind-styled-v4] \u2713 Dead styles eliminated: ~${(totalSaved / 1024).toFixed(1)}KB saved`
+                );
+              }
+            }
+            const totalKb = results.reduce((s, r) => s + r.sizeBytes, 0) / 1024;
+            console.log(
+              `[tailwind-styled-v4] \u2713 Route CSS: ${results.length} routes, ${totalKb.toFixed(1)}KB`
+            );
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Route CSS skipped:", e);
+          }
+        }
+        if (plugins.length > 0) {
+          try {
+            const {
+              getGlobalRegistry,
+              generateTokenCss,
+              generateUtilityCss,
+              applyCssHooks
+            } = require("@tailwind-styled/plugin");
+            const registry = getGlobalRegistry();
+            let pluginCss = [generateTokenCss(registry), generateUtilityCss(registry)].filter(Boolean).join("\n\n");
+            pluginCss = applyCssHooks(pluginCss, registry);
+            if (pluginCss.trim()) {
+              const outPath = import_node_path.default.join(cwd, "public", "__tw-plugins.css");
+              import_node_fs.default.mkdirSync(import_node_path.default.dirname(outPath), { recursive: true });
+              import_node_fs.default.writeFileSync(outPath, pluginCss);
+              console.log("[tailwind-styled-v4] \u2713 Plugin CSS \u2192 public/__tw-plugins.css");
+            }
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Plugin CSS skipped:", e);
+          }
+        }
+        const { incremental = true, styleBuckets = true, incrementalVerbose = false } = opts;
+        if (incremental) {
+          try {
+            const { getIncrementalEngine, getBucketEngine } = require("@tailwind-styled/compiler");
+            const engine = getIncrementalEngine({ verbose: incrementalVerbose });
+            engine.buildEndSync();
+            const stats = engine.getStats();
+            console.log(
+              `[tailwind-styled-v4] \u2713 Incremental: ${stats.changedFiles}/${stats.totalFiles} files changed | +${stats.addedRules} -${stats.removedRules} rules | ${stats.buildTimeMs}ms`
+            );
+            if (styleBuckets) {
+              const buckets = getBucketEngine();
+              const allNodes = engine.getAllNodes();
+              for (const node of allNodes) buckets.add(node);
+              const css = buckets.emit();
+              const outPath = import_node_path.default.join(cwd, "public", "__tw-atomic.css");
+              import_node_fs.default.mkdirSync(import_node_path.default.dirname(outPath), { recursive: true });
+              import_node_fs.default.writeFileSync(outPath, css);
+              const bStats = buckets.stats();
+              console.log(
+                `[tailwind-styled-v4] \u2713 Bucket CSS \u2192 public/__tw-atomic.css | ${bStats.totalNodes} rules`
+              );
+            }
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Incremental engine flush skipped:", e);
+          }
+        }
+        if (typeof nextConfig.generateBuildId === "function") return nextConfig.generateBuildId();
+        return null;
+      }
+    });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withTailwindStyled
+});

package/dist/index.d.cts

@@ -0,0 +1,45 @@
+import { TwPlugin } from '@tailwind-styled/plugin';
+import { NextConfig } from 'next';
+
+/**
+ * tailwind-styled-v4 — withTailwindStyled v3
+ *
+ * Next.js plugin dengan full v3 integration:
+ *  - Plugin system
+ *  - DevTools overlay
+ *  - Static variant compilation
+ *  - Dead style elimination
+ *  - Route CSS bundling
+ *  - React Compiler compat
+ *  - Idempotency guard
+ */
+
+interface TailwindStyledNextOptions {
+    mode?: "zero-runtime" | "runtime";
+    addDataAttr?: boolean;
+    scanDirs?: string[];
+    safelistOutput?: string;
+    autoClientBoundary?: boolean;
+    hoist?: boolean;
+    routeCss?: boolean;
+    routeCssDir?: string;
+    atomic?: boolean;
+    zeroConfig?: boolean;
+    /** v3: plugins array */
+    plugins?: TwPlugin[];
+    /** v3: DevTools overlay. Default: true in dev */
+    devtools?: boolean;
+    /** v3: pre-compile all variant combos. Default: true in prod */
+    staticVariants?: boolean;
+    /** v3: remove unused variant CSS at build. Default: true in prod */
+    deadStyleElimination?: boolean;
+    /** v4: incremental CSS compiler — only recompile changed files. Default: true */
+    incremental?: boolean;
+    /** v4: style bucket system — deterministic CSS ordering. Default: true */
+    styleBuckets?: boolean;
+    /** v4: verbose logging untuk incremental engine. Default: false */
+    incrementalVerbose?: boolean;
+}
+declare function withTailwindStyled(opts?: TailwindStyledNextOptions): (nextConfig?: NextConfig) => NextConfig;
+
+export { type TailwindStyledNextOptions, withTailwindStyled };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import { TwPlugin } from '@tailwind-styled/plugin';
+import { NextConfig } from 'next';
+
+/**
+ * tailwind-styled-v4 — withTailwindStyled v3
+ *
+ * Next.js plugin dengan full v3 integration:
+ *  - Plugin system
+ *  - DevTools overlay
+ *  - Static variant compilation
+ *  - Dead style elimination
+ *  - Route CSS bundling
+ *  - React Compiler compat
+ *  - Idempotency guard
+ */
+
+interface TailwindStyledNextOptions {
+    mode?: "zero-runtime" | "runtime";
+    addDataAttr?: boolean;
+    scanDirs?: string[];
+    safelistOutput?: string;
+    autoClientBoundary?: boolean;
+    hoist?: boolean;
+    routeCss?: boolean;
+    routeCssDir?: string;
+    atomic?: boolean;
+    zeroConfig?: boolean;
+    /** v3: plugins array */
+    plugins?: TwPlugin[];
+    /** v3: DevTools overlay. Default: true in dev */
+    devtools?: boolean;
+    /** v3: pre-compile all variant combos. Default: true in prod */
+    staticVariants?: boolean;
+    /** v3: remove unused variant CSS at build. Default: true in prod */
+    deadStyleElimination?: boolean;
+    /** v4: incremental CSS compiler — only recompile changed files. Default: true */
+    incremental?: boolean;
+    /** v4: style bucket system — deterministic CSS ordering. Default: true */
+    styleBuckets?: boolean;
+    /** v4: verbose logging untuk incremental engine. Default: false */
+    incrementalVerbose?: boolean;
+}
+declare function withTailwindStyled(opts?: TailwindStyledNextOptions): (nextConfig?: NextConfig) => NextConfig;
+
+export { type TailwindStyledNextOptions, withTailwindStyled };

package/dist/index.js

@@ -0,0 +1,240 @@
+import {
+  __require,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-QYSYW6TK.js";
+
+// src/withTailwindStyled.ts
+import fs from "fs";
+import path from "path";
+var LOADER_PATH = __require.resolve("./turbopackLoader");
+var WEBPACK_LOADER_PATH = __require.resolve("./webpackLoader");
+function withTailwindStyled(opts = {}) {
+  return (nextConfig = {}) => {
+    var _a, _b, _c;
+    const cwd = process.cwd();
+    const isDev = process.env.NODE_ENV !== "production";
+    const hasReactCompiler = nextConfig.reactCompiler === true || ((_a = nextConfig.experimental) == null ? void 0 : _a.reactCompiler) === true;
+    if (hasReactCompiler && isDev) {
+      console.log("[tailwind-styled-v4] React Compiler detected \u2192 hoist disabled");
+    }
+    const {
+      scanDirs = ["src"],
+      safelistOutput = "src/app/__tw-safelist.css",
+      autoClientBoundary = true,
+      hoist = !hasReactCompiler,
+      atomic = false,
+      routeCssDir = path.join(cwd, ".next", "static", "css", "tw"),
+      zeroConfig = true,
+      plugins = [],
+      devtools = isDev,
+      staticVariants = !isDev,
+      deadStyleElimination = !isDev
+    } = opts;
+    const routeCss = opts.routeCss !== void 0 ? opts.routeCss : !isDev;
+    if (zeroConfig) {
+      try {
+        const { bootstrapZeroConfig } = __require("@tailwind-styled/compiler");
+        bootstrapZeroConfig(cwd);
+      } catch (e) {
+      }
+    }
+    const safelistAbsPath = path.isAbsolute(safelistOutput) ? safelistOutput : path.resolve(cwd, safelistOutput);
+    if (!fs.existsSync(safelistAbsPath)) {
+      try {
+        fs.mkdirSync(path.dirname(safelistAbsPath), { recursive: true });
+        fs.writeFileSync(
+          safelistAbsPath,
+          "/* Auto-generated by tailwind-styled-v4 \u2014 DO NOT EDIT */\n"
+        );
+      } catch (e) {
+      }
+    }
+    if (plugins.length > 0) {
+      try {
+        const { use } = __require("@tailwind-styled/plugin");
+        for (const plugin of plugins) use(plugin);
+        console.log(
+          `[tailwind-styled-v4] ${plugins.length} plugin(s): ${plugins.map((p) => p.name).join(", ")}`
+        );
+      } catch (e) {
+        console.warn("[tailwind-styled-v4] Plugin init failed:", e);
+      }
+    }
+    const loaderOpts = {
+      mode: opts.mode,
+      addDataAttr: (_b = opts.addDataAttr) != null ? _b : isDev,
+      autoClientBoundary,
+      hoist,
+      atomic,
+      routeCss,
+      staticVariants
+    };
+    return __spreadProps(__spreadValues({}, nextConfig), {
+      experimental: __spreadValues({}, nextConfig.experimental),
+      // Next.js 16+: turbopack moved to top-level
+      // FIX TURBOPACK: pattern "*.{tsx,ts,jsx,js}" terlalu lebar — ikut match
+      // node_modules/next/dist/client/*.js.tsx dan trigger "Missing module type".
+      // Solusi: scope pattern ke scanDirs saja, jangan catch-all.
+      // `as` field dihapus — tidak perlu karena loader output tetap TSX-compatible.
+      turbopack: __spreadProps(__spreadValues({}, nextConfig.turbopack), {
+        rules: __spreadValues(__spreadValues({}, Object.fromEntries(
+          scanDirs.flatMap((dir) => [
+            [
+              `{./${dir},./src,./app,./pages,./components}/**/*.tsx`,
+              {
+                loaders: [{ loader: LOADER_PATH, options: loaderOpts }]
+              }
+            ],
+            [
+              `{./${dir},./src,./app,./pages,./components}/**/*.ts`,
+              {
+                loaders: [{ loader: LOADER_PATH, options: loaderOpts }]
+              }
+            ]
+          ])
+        )), (_c = nextConfig.turbopack) == null ? void 0 : _c.rules)
+      }),
+      webpack(webpackConfig, webpackOpts) {
+        var _a2, _b2, _c2, _d;
+        const alreadyRegistered = webpackConfig.module.rules.some(
+          (r) => r._tailwindStyledMarker === true
+        );
+        if (!alreadyRegistered) {
+          webpackConfig.module.rules.push({
+            _tailwindStyledMarker: true,
+            test: /\.(tsx|ts|jsx|js)$/,
+            exclude: /node_modules/,
+            use: [
+              {
+                loader: WEBPACK_LOADER_PATH,
+                options: __spreadProps(__spreadValues({}, loaderOpts), {
+                  mode: (_a2 = opts.mode) != null ? _a2 : webpackOpts.dev ? "runtime" : "zero-runtime",
+                  addDataAttr: (_b2 = opts.addDataAttr) != null ? _b2 : webpackOpts.dev
+                })
+              }
+            ]
+          });
+        }
+        if (devtools && webpackOpts.dev) {
+          webpackConfig.resolve = (_c2 = webpackConfig.resolve) != null ? _c2 : {};
+          webpackConfig.resolve.alias = __spreadProps(__spreadValues({}, (_d = webpackConfig.resolve.alias) != null ? _d : {}), {
+            "tailwind-styled-v4/devtools": path.resolve(__dirname, "../../devtools/src/index.tsx")
+          });
+        }
+        return typeof nextConfig.webpack === "function" ? nextConfig.webpack(webpackConfig, webpackOpts) : webpackConfig;
+      },
+      generateBuildId: async () => {
+        try {
+          const { generateSafelistCss } = __require("@tailwind-styled/compiler");
+          generateSafelistCss(
+            scanDirs.map((d) => path.resolve(cwd, d)),
+            path.isAbsolute(safelistOutput) ? safelistOutput : path.resolve(cwd, safelistOutput)
+          );
+          console.log("[tailwind-styled-v4] \u2713 Safelist CSS generated");
+        } catch (e) {
+          console.warn("[tailwind-styled-v4] Safelist skipped:", e);
+        }
+        if (plugins.length > 0) {
+          try {
+            const { getGlobalRegistry, runBuildHooks } = __require("@tailwind-styled/plugin");
+            await runBuildHooks(getGlobalRegistry());
+            console.log("[tailwind-styled-v4] \u2713 Plugin build hooks complete");
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Plugin build hooks failed:", e);
+          }
+        }
+        if (routeCss) {
+          try {
+            const {
+              generateAllRouteCss,
+              getCollectorSummary,
+              runElimination
+            } = __require("@tailwind-styled/compiler");
+            const results = await generateAllRouteCss({ cwd, outputDir: routeCssDir, minify: true });
+            console.log(getCollectorSummary());
+            if (deadStyleElimination) {
+              let totalSaved = 0;
+              for (const result of results) {
+                const routeFile = path.join(
+                  routeCssDir,
+                  result.route === "/" ? "index.css" : `${result.route.replace(/\//g, "_")}.css`
+                );
+                if (fs.existsSync(routeFile)) {
+                  const inputCss = fs.readFileSync(routeFile, "utf-8");
+                  const { css, report } = runElimination({ dirs: scanDirs, cwd, inputCss });
+                  fs.writeFileSync(routeFile, css);
+                  totalSaved += report.bytesSaved;
+                }
+              }
+              if (totalSaved > 0) {
+                console.log(
+                  `[tailwind-styled-v4] \u2713 Dead styles eliminated: ~${(totalSaved / 1024).toFixed(1)}KB saved`
+                );
+              }
+            }
+            const totalKb = results.reduce((s, r) => s + r.sizeBytes, 0) / 1024;
+            console.log(
+              `[tailwind-styled-v4] \u2713 Route CSS: ${results.length} routes, ${totalKb.toFixed(1)}KB`
+            );
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Route CSS skipped:", e);
+          }
+        }
+        if (plugins.length > 0) {
+          try {
+            const {
+              getGlobalRegistry,
+              generateTokenCss,
+              generateUtilityCss,
+              applyCssHooks
+            } = __require("@tailwind-styled/plugin");
+            const registry = getGlobalRegistry();
+            let pluginCss = [generateTokenCss(registry), generateUtilityCss(registry)].filter(Boolean).join("\n\n");
+            pluginCss = applyCssHooks(pluginCss, registry);
+            if (pluginCss.trim()) {
+              const outPath = path.join(cwd, "public", "__tw-plugins.css");
+              fs.mkdirSync(path.dirname(outPath), { recursive: true });
+              fs.writeFileSync(outPath, pluginCss);
+              console.log("[tailwind-styled-v4] \u2713 Plugin CSS \u2192 public/__tw-plugins.css");
+            }
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Plugin CSS skipped:", e);
+          }
+        }
+        const { incremental = true, styleBuckets = true, incrementalVerbose = false } = opts;
+        if (incremental) {
+          try {
+            const { getIncrementalEngine, getBucketEngine } = __require("@tailwind-styled/compiler");
+            const engine = getIncrementalEngine({ verbose: incrementalVerbose });
+            engine.buildEndSync();
+            const stats = engine.getStats();
+            console.log(
+              `[tailwind-styled-v4] \u2713 Incremental: ${stats.changedFiles}/${stats.totalFiles} files changed | +${stats.addedRules} -${stats.removedRules} rules | ${stats.buildTimeMs}ms`
+            );
+            if (styleBuckets) {
+              const buckets = getBucketEngine();
+              const allNodes = engine.getAllNodes();
+              for (const node of allNodes) buckets.add(node);
+              const css = buckets.emit();
+              const outPath = path.join(cwd, "public", "__tw-atomic.css");
+              fs.mkdirSync(path.dirname(outPath), { recursive: true });
+              fs.writeFileSync(outPath, css);
+              const bStats = buckets.stats();
+              console.log(
+                `[tailwind-styled-v4] \u2713 Bucket CSS \u2192 public/__tw-atomic.css | ${bStats.totalNodes} rules`
+              );
+            }
+          } catch (e) {
+            console.warn("[tailwind-styled-v4] Incremental engine flush skipped:", e);
+          }
+        }
+        if (typeof nextConfig.generateBuildId === "function") return nextConfig.generateBuildId();
+        return null;
+      }
+    });
+  };
+}
+export {
+  withTailwindStyled
+};