tailwind-styled-v4 5.0.7 → 5.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/CHANGELOG.md +184 -410
  2. package/README.md +45 -15
  3. package/dist/cli.js +62 -52
  4. package/dist/cli.js.map +1 -1
  5. package/dist/cli.mjs +62 -52
  6. package/dist/cli.mjs.map +1 -1
  7. package/dist/compiler.d.mts +8 -3
  8. package/dist/compiler.d.ts +8 -3
  9. package/dist/compiler.js +214 -127
  10. package/dist/compiler.js.map +1 -1
  11. package/dist/compiler.mjs +195 -103
  12. package/dist/compiler.mjs.map +1 -1
  13. package/dist/engine.js +146 -66
  14. package/dist/engine.js.map +1 -1
  15. package/dist/engine.mjs +146 -66
  16. package/dist/engine.mjs.map +1 -1
  17. package/dist/index.d.mts +26 -8
  18. package/dist/index.d.ts +26 -8
  19. package/dist/index.js +72 -19
  20. package/dist/index.js.map +1 -1
  21. package/dist/index.mjs +72 -19
  22. package/dist/index.mjs.map +1 -1
  23. package/dist/next.d.mts +12 -40
  24. package/dist/next.d.ts +12 -40
  25. package/dist/next.js +27 -320
  26. package/dist/next.js.map +1 -1
  27. package/dist/next.mjs +27 -320
  28. package/dist/next.mjs.map +1 -1
  29. package/dist/turbopackLoader.js +137 -88
  30. package/dist/turbopackLoader.js.map +1 -1
  31. package/dist/turbopackLoader.mjs +137 -88
  32. package/dist/turbopackLoader.mjs.map +1 -1
  33. package/dist/tw.js +62 -52
  34. package/dist/tw.js.map +1 -1
  35. package/dist/tw.mjs +62 -52
  36. package/dist/tw.mjs.map +1 -1
  37. package/dist/vite.js +146 -66
  38. package/dist/vite.js.map +1 -1
  39. package/dist/vite.mjs +146 -66
  40. package/dist/vite.mjs.map +1 -1
  41. package/dist/webpackLoader.js +92 -83
  42. package/dist/webpackLoader.js.map +1 -1
  43. package/dist/webpackLoader.mjs +92 -83
  44. package/dist/webpackLoader.mjs.map +1 -1
  45. package/native/tailwind-styled-native.node +0 -0
  46. package/package.json +3 -3
package/dist/next.mjs CHANGED
@@ -114,7 +114,7 @@ function resolveLoaderPath(loaderBasename, importMetaUrl) {
114
114
  }).path;
115
115
  }
116
116
 
117
- // packages/domain/shared/src/native-resolution.ts
117
+ // packages/domain/shared/src/index.ts
118
118
  var isBrowser2 = typeof window !== "undefined" || typeof document !== "undefined";
119
119
  var nodeModuleRef = null;
120
120
  function getNodeModuleRef() {
@@ -129,211 +129,17 @@ function getNodeModuleRef() {
129
129
  return null;
130
130
  }
131
131
  }
132
- var _nodeFs = null;
133
- var _nodePath = null;
134
- var _require = null;
135
- function getNodeFs() {
136
- if (isBrowser2) return { existsSync: () => false };
137
- const nodeRequire = getNodeModuleRef();
138
- if (!nodeRequire) return { existsSync: () => false };
139
- if (!_nodeFs) _nodeFs = nodeRequire.createRequire(import.meta.url)("node:fs");
140
- return _nodeFs;
141
- }
142
- function getNodePath() {
143
- if (isBrowser2) return { resolve: () => "", dirname: "" };
144
- const nodeRequire = getNodeModuleRef();
145
- if (!nodeRequire) return { resolve: () => "", dirname: "" };
146
- if (!_nodePath) _nodePath = nodeRequire.createRequire(import.meta.url)("node:path");
147
- return _nodePath;
148
- }
149
- function getRequire(_importMetaUrl) {
150
- if (isBrowser2) return () => {
151
- throw new Error("node:module not available");
152
- };
153
- const nodeRequire = getNodeModuleRef();
154
- if (!nodeRequire) return () => {
155
- throw new Error("require not available");
156
- };
157
- if (!_require) _require = nodeRequire.createRequire(_importMetaUrl);
158
- return _require;
159
- }
160
- var PLATFORM_MAP = {
161
- "linux-x64": ["@tailwind-styled/native-linux-x64"],
162
- "linux-arm64": ["@tailwind-styled/native-linux-arm64"],
163
- "darwin-x64": ["@tailwind-styled/native-darwin-x64"],
164
- "darwin-arm64": ["@tailwind-styled/native-darwin-arm64"],
165
- "win32-x64": ["@tailwind-styled/native-win32-x64"],
166
- "win32-arm64": ["@tailwind-styled/native-win32-arm64"]
167
- };
168
- function platformKey() {
169
- if (isBrowser2) return "browser";
170
- return `${process.platform}-${process.arch}`;
171
- }
172
- function resolveNativeBinary(runtimeDir) {
173
- const platform = platformKey();
174
- const tried = [];
175
- if (isBrowser2) {
176
- return { path: null, source: "not-found", platform, tried: ["not available in browser"] };
177
- }
178
- const fs2 = getNodeFs();
179
- const path2 = getNodePath();
180
- const _req = getRequire(import.meta.url);
181
- const envPath = process.env.TW_NATIVE_PATH?.trim();
182
- if (envPath) {
183
- if (fs2.existsSync(envPath)) {
184
- return { path: envPath, source: "env", platform, tried };
185
- }
186
- tried.push(`env:${envPath} (not found)`);
187
- }
188
- if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_NO_RUST === "1" || process.env.TWS_DISABLE_NATIVE === "1") {
189
- return { path: null, source: "not-found", platform, tried: ["disabled by env"] };
190
- }
191
- const prebuiltPkgs = PLATFORM_MAP[platform] ?? [];
192
- for (const pkg of prebuiltPkgs) {
193
- try {
194
- const candidate = _req.resolve(`${pkg}/tailwind_styled_parser.node`);
195
- if (fs2.existsSync(candidate)) {
196
- return { path: candidate, source: "prebuilt", platform, tried };
197
- }
198
- tried.push(`prebuilt:${pkg} (resolved but missing)`);
199
- } catch {
200
- tried.push(`prebuilt:${pkg} (not installed)`);
201
- }
202
- }
203
- const cwd = process.cwd();
204
- const base = runtimeDir ?? cwd;
205
- const localCandidates = [
206
- path2.resolve(base, "tailwind_styled_parser.node"),
207
- path2.resolve(base, "..", "tailwind_styled_parser.node"),
208
- path2.resolve(cwd, "native", "tailwind_styled_parser.node"),
209
- path2.resolve(cwd, "native", "target", "release", "tailwind_styled_parser.node"),
210
- // napi-rs conventional output
211
- path2.resolve(base, `tailwind_styled_parser.${platform}.node`)
212
- ];
213
- for (const candidate of localCandidates) {
214
- tried.push(`local:${candidate}`);
215
- if (fs2.existsSync(candidate)) {
216
- return { path: candidate, source: "local", platform, tried };
217
- }
218
- }
219
- return { path: null, source: "not-found", platform, tried };
220
- }
221
-
222
- // packages/domain/shared/src/index.ts
223
- var isBrowser3 = typeof window !== "undefined" || typeof document !== "undefined";
224
- var nodeModuleRef2 = null;
225
- function getNodeModuleRef2() {
226
- if (isBrowser3) return null;
227
- if (nodeModuleRef2 !== null) return nodeModuleRef2;
228
- try {
229
- const test = typeof __require === "function" ? __require("module") : null;
230
- nodeModuleRef2 = test;
231
- return test;
232
- } catch {
233
- nodeModuleRef2 = null;
234
- return null;
235
- }
236
- }
237
- var _nodeUrl = null;
238
- function getNodeUrl() {
239
- if (isBrowser3) throw new Error("node:url not available in browser");
240
- const nodeRequire = getNodeModuleRef2();
241
- if (!nodeRequire) throw new Error("require not available");
242
- if (!_nodeUrl) _nodeUrl = nodeRequire.createRequire(import.meta.url)("node:url");
243
- return _nodeUrl;
244
- }
245
- function getRequire2() {
246
- if (isBrowser3) return (() => {
132
+ function getRequire() {
133
+ if (isBrowser2) return (() => {
247
134
  throw new Error("require not available in browser");
248
135
  });
249
- const nodeRequire = getNodeModuleRef2();
136
+ const nodeRequire = getNodeModuleRef();
250
137
  if (!nodeRequire) return (() => {
251
138
  throw new Error("require not available");
252
139
  });
253
140
  return nodeRequire.createRequire(import.meta.url);
254
141
  }
255
- getRequire2();
256
- function resolveRuntimeDir(dir, importMetaUrl) {
257
- if (isBrowser3) return "";
258
- try {
259
- return getNodeUrl().fileURLToPath(importMetaUrl);
260
- } catch {
261
- return process.cwd();
262
- }
263
- }
264
- var log = (...args) => {
265
- if (process.env.DEBUG?.includes("compiler:native")) {
266
- console.log("[compiler:native]", ...args);
267
- }
268
- };
269
- var NATIVE_UNAVAILABLE_MESSAGE = "[tailwind-styled/compiler v5] Native binding is required but not available.\nThis package requires native Rust bindings. There is no JavaScript fallback.\nPlease ensure:\n 1. The native module is properly installed\n 2. You have run: npm run build:rust (or use prebuilt binary)\n\nFor help, see: https://tailwind-styled.dev/docs/install";
270
- var nativeBridge = null;
271
- var bridgeLoadAttempted = false;
272
- var bridgeLoadError = null;
273
- var isValidNativeBridge = (mod) => {
274
- const m = mod;
275
- return !!(typeof m.transformSource === "function" || typeof m.extractAllClasses === "function" || typeof m.hasTwUsage === "function");
276
- };
277
- var getNativeBridge = () => {
278
- if (nativeBridge) {
279
- return nativeBridge;
280
- }
281
- if (bridgeLoadAttempted) {
282
- if (bridgeLoadError) {
283
- throw bridgeLoadError;
284
- }
285
- throw new Error(NATIVE_UNAVAILABLE_MESSAGE);
286
- }
287
- bridgeLoadAttempted = true;
288
- try {
289
- const runtimeDir = resolveRuntimeDir(void 0, import.meta.url);
290
- const require3 = createRequire(import.meta.url);
291
- const result = resolveNativeBinary(runtimeDir);
292
- if (result.path && result.path.endsWith(".node")) {
293
- try {
294
- const binding = require3(result.path);
295
- if (isValidNativeBridge(binding)) {
296
- nativeBridge = binding;
297
- log("Native bridge loaded successfully from:", result.path);
298
- return nativeBridge;
299
- }
300
- } catch (e) {
301
- log("Failed to require native binding:", e);
302
- }
303
- }
304
- throw new Error(`${NATIVE_UNAVAILABLE_MESSAGE}
305
-
306
- Tried paths: ${result.tried.join("\n")}`);
307
- } catch (err) {
308
- bridgeLoadError = err instanceof Error ? err : new Error(String(err));
309
- log("Failed to load native bridge:", bridgeLoadError.message);
310
- throw bridgeLoadError;
311
- }
312
- };
313
-
314
- // packages/domain/compiler/src/index.ts
315
- var compileCssFromClasses = (classes, prefix) => {
316
- const native = getNativeBridge();
317
- if (!native?.transformSource) {
318
- throw new Error("FATAL: Native binding 'transformSource' is required but not available.");
319
- }
320
- const result = native.transformSource(classes.join(" "), { prefix: "" });
321
- if (!result) {
322
- throw new Error("FATAL: transformSource returned null");
323
- }
324
- return result;
325
- };
326
- var buildStyleTag = (classes) => {
327
- const result = compileCssFromClasses(classes);
328
- return result?.code ? `<style data-tailwind-styled>${result.code}</style>` : "";
329
- };
330
- var _routeClassMap = /* @__PURE__ */ new Map();
331
- var getAllRouteClasses = () => {
332
- return new Map(_routeClassMap);
333
- };
334
- var clearRouteClasses = () => {
335
- _routeClassMap.clear();
336
- };
142
+ getRequire();
337
143
 
338
144
  // packages/presentation/next/src/withTailwindStyled.ts
339
145
  function getDirnameFromUrl2(importMetaUrl) {
@@ -350,12 +156,12 @@ function getDirnameFromUrl2(importMetaUrl) {
350
156
  return lastSlash > 0 ? importMetaUrl.slice(0, lastSlash) : "";
351
157
  }
352
158
  var require2 = createRequire(import.meta.url);
353
- var resolveRuntimeDir2 = () => getDirnameFromUrl2(import.meta.url);
159
+ var resolveRuntimeDir = () => getDirnameFromUrl2(import.meta.url);
354
160
  var resolveLoaderPath2 = (basename) => {
355
161
  try {
356
162
  return resolveLoaderPath(basename, import.meta.url);
357
163
  } catch {
358
- const runtimeDir = resolveRuntimeDir2();
164
+ const runtimeDir = resolveRuntimeDir();
359
165
  const candidates = [
360
166
  path.resolve(runtimeDir, `${basename}.mjs`),
361
167
  path.resolve(runtimeDir, `${basename}.js`),
@@ -386,17 +192,21 @@ function checkNextVersion() {
386
192
  }
387
193
  var DEFAULT_INCLUDE = /\.[jt]sx?$/;
388
194
  var DEFAULT_EXCLUDE = /node_modules/;
195
+ var NEXT_RSC_ENTRIES = /(?:^|[\\/])(?:layout|page|loading|error|not-found|template|default)\.[jt]sx?$/;
196
+ var buildExcludePattern = (userExclude) => {
197
+ if (!userExclude) return new RegExp(`(?:${DEFAULT_EXCLUDE.source})|(?:${NEXT_RSC_ENTRIES.source})`);
198
+ return new RegExp(`(?:${userExclude.source})|(?:${NEXT_RSC_ENTRIES.source})`);
199
+ };
389
200
  var createLoaderOptions = (options) => {
390
201
  const opts = {
391
- mode: options.mode ?? "zero-runtime",
392
- autoClientBoundary: options.autoClientBoundary ?? true,
202
+ mode: "zero-runtime",
203
+ // only supported mode
204
+ autoClientBoundary: true,
205
+ // always on (engine handles it)
393
206
  preserveImports: true
394
207
  };
395
- if (options.addDataAttr !== void 0) opts.addDataAttr = options.addDataAttr;
396
- if (options.hoist !== void 0) opts.hoist = options.hoist;
397
- if (options.routeCss !== void 0) opts.routeCss = options.routeCss;
398
- if (options.incremental !== void 0) opts.incremental = options.incremental;
399
208
  if (options.verbose !== void 0) opts.verbose = options.verbose;
209
+ opts.safelistPath = options.safelistPath ?? path.join(process.cwd(), "__tw_safelist.css");
400
210
  return Object.freeze(opts);
401
211
  };
402
212
  var buildTurbopackRules = (loaderPath, loaderOptions) => {
@@ -421,7 +231,9 @@ var applyWebpackRule = (config, options, loaderPath) => {
421
231
  if (alreadyRegistered) return config;
422
232
  const tailwindStyledRule = {
423
233
  test: options.include ?? DEFAULT_INCLUDE,
424
- exclude: options.exclude ?? DEFAULT_EXCLUDE,
234
+ // Selalu kecualikan Next.js RSC entry files (layout, page, dll) bahkan jika
235
+ // user menyuplai exclude pattern sendiri — lihat buildExcludePattern.
236
+ exclude: buildExcludePattern(options.exclude),
425
237
  enforce: "pre",
426
238
  use: [{ loader: loaderPath, options: loaderOptions }]
427
239
  };
@@ -442,15 +254,14 @@ var applyWebpackRule = (config, options, loaderPath) => {
442
254
  "@tailwind-styled/theme",
443
255
  "@tailwind-styled/preset"
444
256
  ];
445
- const configAny = config;
446
- if (!configAny.externals) {
447
- configAny.externals = [];
257
+ if (!config.externals) {
258
+ config.externals = [];
448
259
  }
449
- const ext = configAny.externals;
260
+ const ext = config.externals;
450
261
  if (Array.isArray(ext)) {
451
262
  externalPackages.forEach((pkg) => {
452
263
  const found = ext.find(
453
- (e) => typeof e === "string" && e.includes(pkg) || typeof e === "object" && e !== null && Object.keys(e).some((k) => k.includes(pkg))
264
+ (e) => typeof e === "string" && e.includes(pkg) || typeof e === "object" && e !== null && !Array.isArray(e) && Object.keys(e).some((k) => k.includes(pkg))
454
265
  );
455
266
  if (!found) {
456
267
  ext.push(pkg);
@@ -470,9 +281,10 @@ var mergeTurbopackRules = (existingRules, nextRules) => {
470
281
  if (typeof current === "object" && current !== null && "loaders" in current) {
471
282
  const typedCurrent = current;
472
283
  if (Array.isArray(typedCurrent.loaders)) {
284
+ const incomingLoaders = incomingRule.loaders ?? [];
473
285
  merged[pattern] = {
474
286
  ...current,
475
- loaders: [...typedCurrent.loaders, ...incomingRule.loaders]
287
+ loaders: [...typedCurrent.loaders, ...incomingLoaders]
476
288
  };
477
289
  console.warn(
478
290
  `[tailwind-styled] Turbopack rule '${pattern}' already exists. Appending tailwind-styled loader.`
@@ -487,96 +299,6 @@ var mergeTurbopackRules = (existingRules, nextRules) => {
487
299
  }
488
300
  return merged;
489
301
  };
490
- function escapeClassName(cls) {
491
- return cls.replace(/([^a-zA-Z0-9_-])/g, "\\$1");
492
- }
493
- var TwSafelistDevPlugin = class {
494
- outputPath;
495
- lastHash = "";
496
- constructor(cwd) {
497
- this.outputPath = path.resolve(cwd, ".next", "tw-classes", "_webpack-merged.css");
498
- }
499
- apply(compiler) {
500
- const resetClasses = () => {
501
- try {
502
- clearRouteClasses();
503
- } catch {
504
- }
505
- };
506
- compiler.hooks.watchRun.tap("TwSafelistDevPlugin", resetClasses);
507
- compiler.hooks.beforeRun.tap("TwSafelistDevPlugin", resetClasses);
508
- compiler.hooks.afterCompile.tap("TwSafelistDevPlugin", () => {
509
- try {
510
- const routeMap = getAllRouteClasses();
511
- const allClasses = /* @__PURE__ */ new Set();
512
- for (const classes of routeMap.values()) {
513
- for (const cls of classes) allClasses.add(cls);
514
- }
515
- if (allClasses.size === 0) return;
516
- const sorted = [...allClasses].sort();
517
- const hash = sorted.join(",");
518
- if (hash === this.lastHash) return;
519
- this.lastHash = hash;
520
- const css = [
521
- "/* tailwind-styled-v4 safelist \u2014 auto-generated, do not edit */",
522
- "/* @tw-safelist */",
523
- ".tw-safelist {",
524
- sorted.map((cls) => ` /* ${cls} */`).join("\n"),
525
- "}",
526
- // Juga emit sebagai @layer utilities agar v4 langsung generate
527
- "@layer utilities {",
528
- sorted.map((cls) => `.${escapeClassName(cls)} {}`).join("\n"),
529
- "}"
530
- ].join("\n");
531
- const dir = path.dirname(this.outputPath);
532
- if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
533
- fs.writeFileSync(this.outputPath, css, "utf-8");
534
- } catch {
535
- }
536
- });
537
- }
538
- };
539
- var TwCssManifestPlugin = class {
540
- apply(compiler) {
541
- compiler.hooks.emit.tapAsync("TwCssManifestPlugin", async (compilation, callback) => {
542
- if (compiler.options?.mode === "development") {
543
- callback();
544
- return;
545
- }
546
- try {
547
- const routeMap = getAllRouteClasses();
548
- if (routeMap.size === 0) {
549
- callback();
550
- return;
551
- }
552
- const manifest = {};
553
- for (const [route, classes] of routeMap.entries()) {
554
- if (classes.size === 0) continue;
555
- let css = "";
556
- try {
557
- css = buildStyleTag(Array.from(classes)).replace(/<style[^>]*>/, "").replace(/<\/style>/, "").trim();
558
- } catch {
559
- }
560
- if (!css) continue;
561
- const filename = route === "/" ? "index.css" : route === "__global" ? "_global.css" : `${route.replace(/^\//, "").replace(/\//g, "_")}.css`;
562
- const outputPath = `static/css/tw/${filename}`;
563
- compilation.assets[outputPath] = {
564
- source: () => css,
565
- size: () => css.length
566
- };
567
- manifest[route] = filename;
568
- }
569
- const manifestJson = JSON.stringify({ routes: manifest }, null, 2);
570
- compilation.assets["static/css/tw/css-manifest.json"] = {
571
- source: () => manifestJson,
572
- size: () => manifestJson.length
573
- };
574
- } catch {
575
- }
576
- callback();
577
- });
578
- }
579
- };
580
302
  function withTailwindStyled(options = {}) {
581
303
  checkNextVersion();
582
304
  const normalizedOptions = parseNextAdapterOptions(options);
@@ -585,12 +307,6 @@ function withTailwindStyled(options = {}) {
585
307
  return function wrap(nextConfig = {}) {
586
308
  const previousWebpack = nextConfig.webpack;
587
309
  const loaderOptions = createLoaderOptions(normalizedOptions);
588
- const safelistPath = path.resolve(
589
- typeof process !== "undefined" ? process.cwd() : "",
590
- ".next",
591
- "tailwind-styled-safelist.css"
592
- // used as anchor; loader derives tw-classes/ from dirname
593
- );
594
310
  return {
595
311
  ...nextConfig,
596
312
  webpack(config, webpackOptions) {
@@ -608,15 +324,6 @@ function withTailwindStyled(options = {}) {
608
324
  "@tailwind-styled/plugin": "commonjs2 @tailwind-styled/plugin"
609
325
  });
610
326
  }
611
- if (!finalConfig._twCssPluginAdded) {
612
- const plugins = finalConfig.plugins ?? [];
613
- plugins.push(new TwCssManifestPlugin());
614
- if (webpackOptions.dev) {
615
- plugins.push(new TwSafelistDevPlugin(webpackOptions.dir));
616
- }
617
- finalConfig.plugins = plugins;
618
- finalConfig._twCssPluginAdded = true;
619
- }
620
327
  return finalConfig;
621
328
  };
622
329
  if (typeof previousWebpack !== "function") {
@@ -635,7 +342,7 @@ function withTailwindStyled(options = {}) {
635
342
  ...nextConfig.turbopack ?? {},
636
343
  rules: mergeTurbopackRules(
637
344
  nextConfig.turbopack?.rules ?? {},
638
- buildTurbopackRules(turbopackLoaderPath, { ...loaderOptions, safelistPath })
345
+ buildTurbopackRules(turbopackLoaderPath, loaderOptions)
639
346
  )
640
347
  }
641
348
  };