tailwind-styled-v4 1.0.1 → 4.0.0

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 (90) hide show
  1. package/dist/animate.cjs +252 -0
  2. package/dist/animate.cjs.map +1 -0
  3. package/dist/animate.d.cts +117 -0
  4. package/dist/animate.d.ts +117 -0
  5. package/dist/animate.js +245 -0
  6. package/dist/animate.js.map +1 -0
  7. package/dist/astTransform-ua-eapqs.d.cts +41 -0
  8. package/dist/astTransform-ua-eapqs.d.ts +41 -0
  9. package/dist/compiler.cjs +3594 -0
  10. package/dist/compiler.cjs.map +1 -0
  11. package/dist/compiler.d.cts +716 -0
  12. package/dist/compiler.d.ts +716 -0
  13. package/dist/compiler.js +3535 -0
  14. package/dist/compiler.js.map +1 -0
  15. package/dist/css.cjs +71 -0
  16. package/dist/css.cjs.map +1 -0
  17. package/dist/css.d.cts +45 -0
  18. package/dist/css.d.ts +45 -0
  19. package/dist/css.js +62 -0
  20. package/dist/css.js.map +1 -0
  21. package/dist/devtools.cjs +959 -0
  22. package/dist/devtools.cjs.map +1 -0
  23. package/dist/devtools.d.cts +22 -0
  24. package/dist/devtools.d.ts +22 -0
  25. package/dist/devtools.js +952 -0
  26. package/dist/devtools.js.map +1 -0
  27. package/dist/index.cjs +1058 -0
  28. package/dist/index.cjs.map +1 -0
  29. package/dist/index.d.cts +584 -0
  30. package/dist/index.d.ts +449 -980
  31. package/dist/index.js +1021 -3
  32. package/dist/index.js.map +1 -1
  33. package/dist/next.cjs +268 -0
  34. package/dist/next.cjs.map +1 -0
  35. package/dist/next.d.cts +45 -0
  36. package/dist/next.d.ts +45 -0
  37. package/dist/next.js +261 -0
  38. package/dist/next.js.map +1 -0
  39. package/dist/plugins.cjs +396 -0
  40. package/dist/plugins.cjs.map +1 -0
  41. package/dist/plugins.d.cts +231 -0
  42. package/dist/plugins.d.ts +231 -0
  43. package/dist/plugins.js +381 -0
  44. package/dist/plugins.js.map +1 -0
  45. package/dist/preset.cjs +129 -0
  46. package/dist/preset.cjs.map +1 -0
  47. package/dist/preset.d.cts +249 -0
  48. package/dist/preset.d.ts +249 -0
  49. package/dist/preset.js +124 -0
  50. package/dist/preset.js.map +1 -0
  51. package/dist/theme.cjs +154 -0
  52. package/dist/theme.cjs.map +1 -0
  53. package/dist/theme.d.cts +181 -0
  54. package/dist/theme.d.ts +181 -0
  55. package/dist/theme.js +148 -0
  56. package/dist/theme.js.map +1 -0
  57. package/dist/turbopackLoader.cjs +2689 -0
  58. package/dist/turbopackLoader.cjs.map +1 -0
  59. package/dist/turbopackLoader.d.cts +22 -0
  60. package/dist/turbopackLoader.d.ts +22 -0
  61. package/dist/turbopackLoader.js +2681 -0
  62. package/dist/turbopackLoader.js.map +1 -0
  63. package/dist/vite.cjs +105 -0
  64. package/dist/vite.cjs.map +1 -0
  65. package/dist/vite.d.cts +22 -0
  66. package/dist/vite.d.ts +22 -0
  67. package/dist/vite.js +96 -0
  68. package/dist/vite.js.map +1 -0
  69. package/dist/webpackLoader.cjs +2670 -0
  70. package/dist/webpackLoader.cjs.map +1 -0
  71. package/dist/webpackLoader.d.cts +24 -0
  72. package/dist/webpackLoader.d.ts +24 -0
  73. package/dist/webpackLoader.js +2662 -0
  74. package/dist/webpackLoader.js.map +1 -0
  75. package/package.json +62 -32
  76. package/CHANGELOG.md +0 -75
  77. package/LICENSE +0 -21
  78. package/README.md +0 -608
  79. package/dist/cli/init.js +0 -208
  80. package/dist/compiler/index.d.mts +0 -214
  81. package/dist/compiler/index.d.ts +0 -214
  82. package/dist/compiler/index.js +0 -546
  83. package/dist/compiler/index.js.map +0 -1
  84. package/dist/compiler/index.mjs +0 -504
  85. package/dist/compiler/index.mjs.map +0 -1
  86. package/dist/index.d.mts +0 -1115
  87. package/dist/index.mjs +0 -4
  88. package/dist/index.mjs.map +0 -1
  89. package/dist/turbopack-loader.js +0 -232
  90. package/dist/webpack-loader.js +0 -213
package/dist/cli/init.js DELETED
@@ -1,208 +0,0 @@
1
- #!/usr/bin/env node
2
- "use strict";
3
- var __create = Object.create;
4
- var __defProp = Object.defineProperty;
5
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf;
8
- var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
- }
19
- return to;
20
- };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
-
31
- // src/cli/init.ts
32
- var init_exports = {};
33
- __export(init_exports, {
34
- runInit: () => runInit
35
- });
36
- module.exports = __toCommonJS(init_exports);
37
- var import_fs = __toESM(require("fs"));
38
- var import_path = __toESM(require("path"));
39
- var GREEN = (s) => `\x1B[32m${s}\x1B[0m`;
40
- var YELLOW = (s) => `\x1B[33m${s}\x1B[0m`;
41
- var CYAN = (s) => `\x1B[36m${s}\x1B[0m`;
42
- var BOLD = (s) => `\x1B[1m${s}\x1B[0m`;
43
- var DIM = (s) => `\x1B[2m${s}\x1B[0m`;
44
- function writeFile(absPath, content, force) {
45
- const dir = import_path.default.dirname(absPath);
46
- if (!import_fs.default.existsSync(dir)) import_fs.default.mkdirSync(dir, { recursive: true });
47
- if (import_fs.default.existsSync(absPath) && !force) return "skipped";
48
- import_fs.default.writeFileSync(absPath, content, "utf-8");
49
- return "written";
50
- }
51
- function fileExists(cwd, ...parts) {
52
- return import_fs.default.existsSync(import_path.default.join(cwd, ...parts));
53
- }
54
- function readJson(cwd, file) {
55
- try {
56
- return JSON.parse(import_fs.default.readFileSync(import_path.default.join(cwd, file), "utf-8"));
57
- } catch {
58
- return {};
59
- }
60
- }
61
- function detectFramework(cwd) {
62
- const pkg = readJson(cwd, "package.json");
63
- const deps = { ...pkg.dependencies, ...pkg.devDependencies };
64
- if (deps["next"]) return "next";
65
- if (deps["vite"]) return "vite";
66
- if (deps["@remix-run/react"]) return "remix";
67
- if (deps["astro"]) return "astro";
68
- return "generic";
69
- }
70
- var VSCODE_SETTINGS = JSON.stringify({
71
- "tailwindCSS.experimental.classRegex": [
72
- ["tw\\.\\w+`([^`]*)`", "([^`]*)"],
73
- ["tw\\.\\w+\\(([^)]*)\\)", '"([^"]*)"'],
74
- ["cv\\(([^)]*)\\)", '"([^"]*)"'],
75
- ["\\.extend`([^`]*)`", "([^`]*)"],
76
- ['withTw\\([^,]+,\\s*"([^"]*)', '([^"]*)'],
77
- ["cls`([^`]*)`", "([^`]*)"],
78
- ["(?:cx|clsx|cn|cxm)\\(([^)]*)\\)", '"([^"]*)"']
79
- ],
80
- "tailwindCSS.includeLanguages": {
81
- "typescript": "html",
82
- "typescriptreact": "html"
83
- },
84
- "editor.quickSuggestions": { "strings": "on" },
85
- "files.associations": { "*.css": "tailwindcss" }
86
- }, null, 2);
87
- var VSCODE_EXTENSIONS = JSON.stringify({
88
- recommendations: [
89
- "bradlc.vscode-tailwindcss",
90
- "esbenp.prettier-vscode",
91
- "dbaeumer.vscode-eslint",
92
- "styled-components.vscode-styled-components"
93
- ]
94
- }, null, 2);
95
- function getNextConfig(_hasTs) {
96
- return `/** @type {import('next').NextConfig} */
97
- // tailwind-styled-v4: wrap your config with withTailwindStyled
98
- // File: next.config.ts
99
-
100
- import { withTailwindStyled } from "tailwind-styled-v4/compiler"
101
-
102
- const nextConfig = {
103
- // your existing config here
104
- }
105
-
106
- export default withTailwindStyled(nextConfig)
107
- `;
108
- }
109
- function getViteConfig(_hasTs) {
110
- return `import { defineConfig } from "vite"
111
- import react from "@vitejs/plugin-react"
112
- import { tailwindStyledVite } from "tailwind-styled-v4/compiler"
113
-
114
- // tailwind-styled-v4: add tailwindStyledVite() to plugins
115
- export default defineConfig({
116
- plugins: [
117
- react(),
118
- tailwindStyledVite(),
119
- ],
120
- })
121
- `;
122
- }
123
- var TAILWIND_CSS = `/* Tailwind CSS v4 \u2014 generated by tailwind-styled-v4 init */
124
- @import "tailwindcss";
125
-
126
- @theme {
127
- --font-sans: "Inter", system-ui, sans-serif;
128
- --font-mono: "JetBrains Mono", monospace;
129
-
130
- /* Brand colors \u2014 customize as needed */
131
- --color-brand: #2563eb;
132
- --color-brand-hover: #1d4ed8;
133
- }
134
-
135
- @layer base {
136
- *, *::before, *::after { box-sizing: border-box; }
137
- body { @apply antialiased; }
138
- }
139
- `;
140
- async function runInit(options) {
141
- const { cwd, framework, force } = options;
142
- const written = [];
143
- const skipped = [];
144
- function write(relPath, content) {
145
- const result = writeFile(import_path.default.join(cwd, relPath), content, force);
146
- if (result === "written") written.push(relPath);
147
- else skipped.push(relPath);
148
- }
149
- console.info(BOLD("\n tailwind-styled-v4 init\n"));
150
- console.info(` Framework: ${CYAN(framework)}`);
151
- console.info(` Directory: ${DIM(cwd)}
152
- `);
153
- const _hasTs = fileExists(cwd, "tsconfig.json");
154
- write(".vscode/settings.json", VSCODE_SETTINGS);
155
- write(".vscode/extensions.json", VSCODE_EXTENSIONS);
156
- const configHintPath = framework === "next" ? ".tailwind-styled-v4.next-config-hint.md" : framework === "vite" ? ".tailwind-styled-v4.vite-config-hint.md" : null;
157
- if (configHintPath) {
158
- const content = framework === "next" ? getNextConfig(_hasTs) : getViteConfig(_hasTs);
159
- write(configHintPath, content);
160
- }
161
- if (framework === "next") {
162
- const cssPath = fileExists(cwd, "app") ? "app/globals.css" : "src/app/globals.css";
163
- if (!fileExists(cwd, cssPath)) write(cssPath, TAILWIND_CSS);
164
- else skipped.push(cssPath + " (exists)");
165
- } else if (framework === "vite" || framework === "remix") {
166
- if (!fileExists(cwd, "src/index.css")) write("src/index.css", TAILWIND_CSS);
167
- else skipped.push("src/index.css (exists)");
168
- }
169
- console.info(" " + BOLD("Files created:"));
170
- written.forEach((f) => console.info(" " + GREEN("\u2713") + " " + f));
171
- if (skipped.length > 0) {
172
- console.info("\n " + YELLOW("Skipped (already exists):"));
173
- skipped.forEach((f) => console.info(" " + DIM("\u2022 " + f)));
174
- console.info(" " + DIM("Run with --force to overwrite\n"));
175
- }
176
- console.info("\n " + BOLD("Next steps:"));
177
- if (framework === "next") {
178
- console.info(` 1. Add ${CYAN("withTailwindStyled")} to your ${CYAN("next.config.ts")}:`);
179
- console.info(` ${DIM('import { withTailwindStyled } from "tailwind-styled-v4/compiler"')}`);
180
- console.info(` ${DIM("export default withTailwindStyled(nextConfig)")}`);
181
- } else if (framework === "vite") {
182
- console.info(` 1. Add ${CYAN("tailwindStyledVite()")} to your ${CYAN("vite.config.ts")} plugins`);
183
- }
184
- console.info(` ${framework === "next" || framework === "vite" ? 2 : 1}. Install VSCode extension: ${CYAN("bradlc.vscode-tailwindcss")}`);
185
- console.info(` ${framework === "next" || framework === "vite" ? 3 : 2}. Start using:`);
186
- console.info(` ${DIM('import { tw } from "tailwind-styled-v4"')}`);
187
- console.info(` ${DIM("const Box = tw.div`p-4 bg-blue-500 rounded`")}
188
- `);
189
- }
190
- var args = process.argv.slice(2);
191
- var command = args[0];
192
- if (command === "init" || command === void 0) {
193
- const cwd = process.cwd();
194
- const framework = args.find((a) => a.startsWith("--framework="))?.split("=")[1] ?? detectFramework(cwd);
195
- const force = args.includes("--force");
196
- runInit({ cwd, framework, force }).catch((err) => {
197
- console.error(err);
198
- process.exit(1);
199
- });
200
- } else {
201
- console.error(`Unknown command: ${command}`);
202
- console.info("Usage: npx tailwind-styled-v4 init [--framework=next|vite|remix|astro] [--force]");
203
- process.exit(1);
204
- }
205
- // Annotate the CommonJS export names for ESM import in node:
206
- 0 && (module.exports = {
207
- runInit
208
- });
@@ -1,214 +0,0 @@
1
- /**
2
- * tailwind-styled-v4 — AST Transform Core
3
- *
4
- * Pure-string AST-like transformer yang menganalisis source code dan
5
- * mengubah semua tw.tag`...` / tw.tag({...}) calls menjadi static
6
- * className strings (zero-runtime output).
7
- *
8
- * Dipakai oleh:
9
- * - swcPlugin.ts → SWC/Next.js transform
10
- * - vitePlugin.ts → Vite/Rollup transform
11
- * - nextPlugin.ts → Next.js webpack loader
12
- * - postcssPlugin.ts → PostCSS safelist generation
13
- *
14
- * Zero-runtime berarti output akhirnya adalah:
15
- * BEFORE: const Box = tw.div`p-4 bg-zinc-900`
16
- * AFTER: const Box = styled.div``.attrs(()=>({className:"p-4 bg-zinc-900"}))``)
17
- *
18
- * Untuk kasus yang pure static (tidak ada dynamic expr),
19
- * output bisa di-inline langsung sebagai string literal:
20
- * AFTER: const Box = styled.div.attrs(()=>({className:"p-4 bg-zinc-900"}))``)
21
- */
22
- interface TransformOptions {
23
- /**
24
- * "runtime" → keep tw.tag, resolve at runtime (default dev mode)
25
- * "zero-runtime"→ transform to styled.tag with static className
26
- * "extract-only"→ do not transform, only extract class names
27
- */
28
- mode?: "runtime" | "zero-runtime" | "extract-only";
29
- /** Add data-tw attribute for debugging in dev tools */
30
- addDataAttr?: boolean;
31
- /** Generate unique stable hash per component for CSS layer naming */
32
- generateHash?: boolean;
33
- /** Tailwind prefix (if configured in tailwind.config.ts) */
34
- prefix?: string;
35
- /** Filename being transformed — used for source maps */
36
- filename?: string;
37
- }
38
- interface TransformResult {
39
- code: string;
40
- classes: string[];
41
- map?: string;
42
- changed: boolean;
43
- }
44
- declare function transformSource(source: string, opts?: TransformOptions): TransformResult;
45
- declare function extractAllClasses(source: string): string[];
46
- declare function transformBatch(files: Array<{
47
- path: string;
48
- source: string;
49
- }>, opts?: TransformOptions): {
50
- results: Array<TransformResult & {
51
- path: string;
52
- }>;
53
- allClasses: string[];
54
- };
55
-
56
- /**
57
- * tailwind-styled-v4 — transformTw
58
- *
59
- * Low-level transform used by all build plugins.
60
- * Wraps astTransform with file-type filtering and source-map passthrough.
61
- */
62
-
63
- /**
64
- * Transform a single file's source code.
65
- * Returns unchanged code for non-JS/TS files.
66
- */
67
- declare function transformTw(source: string, opts?: TransformOptions & {
68
- filepath?: string;
69
- }): TransformResult;
70
- /**
71
- * Extract all Tailwind classes from source without transforming.
72
- * Used for safelist generation.
73
- */
74
- declare function extractTwClasses(source: string): string[];
75
- /**
76
- * Check whether a file should be processed by the transform.
77
- */
78
- declare function shouldProcess(filepath: string): boolean;
79
-
80
- /**
81
- * tailwind-styled-v4 — SWC Plugin / Next.js Transform
82
- *
83
- * Integrates with Next.js compiler (SWC-based) via next.config.ts.
84
- * Supports both Webpack and Turbopack (Next.js 15.3+).
85
- *
86
- * Usage in next.config.ts:
87
- * ─────────────────────────────────────────────────────────────
88
- * import { withTailwindStyled } from "tailwind-styled-v4/compiler"
89
- *
90
- * const nextConfig = withTailwindStyled({
91
- * mode: "zero-runtime",
92
- * addDataAttr: true,
93
- * generateHash: true,
94
- * })({
95
- * // ...your Next.js config
96
- * })
97
- *
98
- * export default nextConfig
99
- * ─────────────────────────────────────────────────────────────
100
- *
101
- * What it does at build time:
102
- * BEFORE: const Box = tw.div`p-4 bg-zinc-900 rounded-xl`
103
- * AFTER: const Box = styled.div.attrs(()=>({className:"p-4 bg-zinc-900 rounded-xl"}))`
104
- *
105
- * Turbopack support (Next.js 15.3+):
106
- * ─────────────────────────────────────────────────────────────
107
- * Turbopack does not support webpack loaders. Instead it uses
108
- * experimental.turbopack.rules. withTailwindStyled automatically
109
- * detects and configures both bundlers.
110
- */
111
-
112
- interface SwcPluginOptions extends TransformOptions {
113
- /**
114
- * Directories to scan for class extraction (safelist generation).
115
- * Defaults to ["src", "app", "pages", "components"]
116
- */
117
- scanDirs?: string[];
118
- /**
119
- * Output path for generated safelist JSON.
120
- * Defaults to "tailwind.safelist.json"
121
- */
122
- safelistOutput?: string;
123
- /**
124
- * Whether to generate the safelist file on each build.
125
- * Defaults to true
126
- */
127
- generateSafelist?: boolean;
128
- }
129
- declare function turbopackTransform(source: string, resourcePath: string, opts?: TransformOptions): {
130
- code: string;
131
- };
132
- declare function withTailwindStyled(pluginOpts?: SwcPluginOptions): (nextConfig?: Record<string, any>) => Record<string, any>;
133
- declare function swcTransformFile(source: string, filepath: string, opts?: TransformOptions): string;
134
- interface SafelistOptions {
135
- scanDirs: string[];
136
- outputPath: string;
137
- cwd: string;
138
- }
139
- declare function runSafelistGeneration(opts: SafelistOptions): void;
140
- declare function swcPlugin(source: string, opts?: TransformOptions): string;
141
-
142
- /**
143
- * tailwind-styled-v4 — Vite Plugin
144
- *
145
- * Usage in vite.config.ts:
146
- * ─────────────────────────────────────────────────────────────
147
- * import { tailwindStyledPlugin } from "tailwind-styled-v4/compiler"
148
- *
149
- * export default defineConfig({
150
- * plugins: [
151
- * react(),
152
- * tailwindStyledPlugin({
153
- * mode: "zero-runtime",
154
- * addDataAttr: true,
155
- * }),
156
- * ],
157
- * })
158
- * ─────────────────────────────────────────────────────────────
159
- *
160
- * Compatible with: Vite 4+, Remix, SvelteKit (JS files only)
161
- */
162
-
163
- interface VitePluginOptions extends TransformOptions {
164
- /** Include patterns. Default: all .tsx/.ts/.jsx/.js */
165
- include?: RegExp;
166
- /** Exclude patterns. Default: node_modules */
167
- exclude?: RegExp;
168
- /** Directories to scan for safelist generation */
169
- scanDirs?: string[];
170
- /** Output path for safelist JSON */
171
- safelistOutput?: string;
172
- /** Generate safelist on build end */
173
- generateSafelist?: boolean;
174
- }
175
- declare function tailwindStyledPlugin(opts?: VitePluginOptions): any;
176
-
177
- /**
178
- * tailwind-styled-v4 — Safelist Generator
179
- *
180
- * Scans your entire src/ directory and extracts every Tailwind class
181
- * used via tw.tag`...`, className="...", cn(), etc.
182
- *
183
- * The output JSON can be referenced in your tailwind.config.ts:
184
- *
185
- * ─────────────────────────────────────────────────────────────
186
- * // tailwind.config.ts
187
- * import safelist from "./tailwind.safelist.json"
188
- *
189
- * export default {
190
- * safelist: safelist.safelist,
191
- * // ...
192
- * }
193
- * ─────────────────────────────────────────────────────────────
194
- *
195
- * Run manually: npx ts-node src/build/generateSafelist.ts
196
- * Or via script: npm run build:safelist
197
- */
198
- interface SafelistConfig {
199
- /** Root directory of your project */
200
- cwd: string;
201
- /** Directories to scan (relative to cwd) */
202
- scanDirs: string[];
203
- /** File extensions to scan */
204
- extensions: RegExp;
205
- /** Directories to skip */
206
- excludeDirs: string[];
207
- /** Output file path (relative to cwd) */
208
- outputPath: string;
209
- /** Include Tailwind pattern annotations in output */
210
- verbose: boolean;
211
- }
212
- declare function generateSafelist(userConfig?: Partial<SafelistConfig>): void;
213
-
214
- export { type SwcPluginOptions, type TransformOptions, type TransformResult, type VitePluginOptions, extractAllClasses, extractTwClasses, generateSafelist, runSafelistGeneration, shouldProcess, swcPlugin, swcTransformFile, tailwindStyledPlugin, transformBatch, transformSource, transformTw, turbopackTransform, withTailwindStyled };
@@ -1,214 +0,0 @@
1
- /**
2
- * tailwind-styled-v4 — AST Transform Core
3
- *
4
- * Pure-string AST-like transformer yang menganalisis source code dan
5
- * mengubah semua tw.tag`...` / tw.tag({...}) calls menjadi static
6
- * className strings (zero-runtime output).
7
- *
8
- * Dipakai oleh:
9
- * - swcPlugin.ts → SWC/Next.js transform
10
- * - vitePlugin.ts → Vite/Rollup transform
11
- * - nextPlugin.ts → Next.js webpack loader
12
- * - postcssPlugin.ts → PostCSS safelist generation
13
- *
14
- * Zero-runtime berarti output akhirnya adalah:
15
- * BEFORE: const Box = tw.div`p-4 bg-zinc-900`
16
- * AFTER: const Box = styled.div``.attrs(()=>({className:"p-4 bg-zinc-900"}))``)
17
- *
18
- * Untuk kasus yang pure static (tidak ada dynamic expr),
19
- * output bisa di-inline langsung sebagai string literal:
20
- * AFTER: const Box = styled.div.attrs(()=>({className:"p-4 bg-zinc-900"}))``)
21
- */
22
- interface TransformOptions {
23
- /**
24
- * "runtime" → keep tw.tag, resolve at runtime (default dev mode)
25
- * "zero-runtime"→ transform to styled.tag with static className
26
- * "extract-only"→ do not transform, only extract class names
27
- */
28
- mode?: "runtime" | "zero-runtime" | "extract-only";
29
- /** Add data-tw attribute for debugging in dev tools */
30
- addDataAttr?: boolean;
31
- /** Generate unique stable hash per component for CSS layer naming */
32
- generateHash?: boolean;
33
- /** Tailwind prefix (if configured in tailwind.config.ts) */
34
- prefix?: string;
35
- /** Filename being transformed — used for source maps */
36
- filename?: string;
37
- }
38
- interface TransformResult {
39
- code: string;
40
- classes: string[];
41
- map?: string;
42
- changed: boolean;
43
- }
44
- declare function transformSource(source: string, opts?: TransformOptions): TransformResult;
45
- declare function extractAllClasses(source: string): string[];
46
- declare function transformBatch(files: Array<{
47
- path: string;
48
- source: string;
49
- }>, opts?: TransformOptions): {
50
- results: Array<TransformResult & {
51
- path: string;
52
- }>;
53
- allClasses: string[];
54
- };
55
-
56
- /**
57
- * tailwind-styled-v4 — transformTw
58
- *
59
- * Low-level transform used by all build plugins.
60
- * Wraps astTransform with file-type filtering and source-map passthrough.
61
- */
62
-
63
- /**
64
- * Transform a single file's source code.
65
- * Returns unchanged code for non-JS/TS files.
66
- */
67
- declare function transformTw(source: string, opts?: TransformOptions & {
68
- filepath?: string;
69
- }): TransformResult;
70
- /**
71
- * Extract all Tailwind classes from source without transforming.
72
- * Used for safelist generation.
73
- */
74
- declare function extractTwClasses(source: string): string[];
75
- /**
76
- * Check whether a file should be processed by the transform.
77
- */
78
- declare function shouldProcess(filepath: string): boolean;
79
-
80
- /**
81
- * tailwind-styled-v4 — SWC Plugin / Next.js Transform
82
- *
83
- * Integrates with Next.js compiler (SWC-based) via next.config.ts.
84
- * Supports both Webpack and Turbopack (Next.js 15.3+).
85
- *
86
- * Usage in next.config.ts:
87
- * ─────────────────────────────────────────────────────────────
88
- * import { withTailwindStyled } from "tailwind-styled-v4/compiler"
89
- *
90
- * const nextConfig = withTailwindStyled({
91
- * mode: "zero-runtime",
92
- * addDataAttr: true,
93
- * generateHash: true,
94
- * })({
95
- * // ...your Next.js config
96
- * })
97
- *
98
- * export default nextConfig
99
- * ─────────────────────────────────────────────────────────────
100
- *
101
- * What it does at build time:
102
- * BEFORE: const Box = tw.div`p-4 bg-zinc-900 rounded-xl`
103
- * AFTER: const Box = styled.div.attrs(()=>({className:"p-4 bg-zinc-900 rounded-xl"}))`
104
- *
105
- * Turbopack support (Next.js 15.3+):
106
- * ─────────────────────────────────────────────────────────────
107
- * Turbopack does not support webpack loaders. Instead it uses
108
- * experimental.turbopack.rules. withTailwindStyled automatically
109
- * detects and configures both bundlers.
110
- */
111
-
112
- interface SwcPluginOptions extends TransformOptions {
113
- /**
114
- * Directories to scan for class extraction (safelist generation).
115
- * Defaults to ["src", "app", "pages", "components"]
116
- */
117
- scanDirs?: string[];
118
- /**
119
- * Output path for generated safelist JSON.
120
- * Defaults to "tailwind.safelist.json"
121
- */
122
- safelistOutput?: string;
123
- /**
124
- * Whether to generate the safelist file on each build.
125
- * Defaults to true
126
- */
127
- generateSafelist?: boolean;
128
- }
129
- declare function turbopackTransform(source: string, resourcePath: string, opts?: TransformOptions): {
130
- code: string;
131
- };
132
- declare function withTailwindStyled(pluginOpts?: SwcPluginOptions): (nextConfig?: Record<string, any>) => Record<string, any>;
133
- declare function swcTransformFile(source: string, filepath: string, opts?: TransformOptions): string;
134
- interface SafelistOptions {
135
- scanDirs: string[];
136
- outputPath: string;
137
- cwd: string;
138
- }
139
- declare function runSafelistGeneration(opts: SafelistOptions): void;
140
- declare function swcPlugin(source: string, opts?: TransformOptions): string;
141
-
142
- /**
143
- * tailwind-styled-v4 — Vite Plugin
144
- *
145
- * Usage in vite.config.ts:
146
- * ─────────────────────────────────────────────────────────────
147
- * import { tailwindStyledPlugin } from "tailwind-styled-v4/compiler"
148
- *
149
- * export default defineConfig({
150
- * plugins: [
151
- * react(),
152
- * tailwindStyledPlugin({
153
- * mode: "zero-runtime",
154
- * addDataAttr: true,
155
- * }),
156
- * ],
157
- * })
158
- * ─────────────────────────────────────────────────────────────
159
- *
160
- * Compatible with: Vite 4+, Remix, SvelteKit (JS files only)
161
- */
162
-
163
- interface VitePluginOptions extends TransformOptions {
164
- /** Include patterns. Default: all .tsx/.ts/.jsx/.js */
165
- include?: RegExp;
166
- /** Exclude patterns. Default: node_modules */
167
- exclude?: RegExp;
168
- /** Directories to scan for safelist generation */
169
- scanDirs?: string[];
170
- /** Output path for safelist JSON */
171
- safelistOutput?: string;
172
- /** Generate safelist on build end */
173
- generateSafelist?: boolean;
174
- }
175
- declare function tailwindStyledPlugin(opts?: VitePluginOptions): any;
176
-
177
- /**
178
- * tailwind-styled-v4 — Safelist Generator
179
- *
180
- * Scans your entire src/ directory and extracts every Tailwind class
181
- * used via tw.tag`...`, className="...", cn(), etc.
182
- *
183
- * The output JSON can be referenced in your tailwind.config.ts:
184
- *
185
- * ─────────────────────────────────────────────────────────────
186
- * // tailwind.config.ts
187
- * import safelist from "./tailwind.safelist.json"
188
- *
189
- * export default {
190
- * safelist: safelist.safelist,
191
- * // ...
192
- * }
193
- * ─────────────────────────────────────────────────────────────
194
- *
195
- * Run manually: npx ts-node src/build/generateSafelist.ts
196
- * Or via script: npm run build:safelist
197
- */
198
- interface SafelistConfig {
199
- /** Root directory of your project */
200
- cwd: string;
201
- /** Directories to scan (relative to cwd) */
202
- scanDirs: string[];
203
- /** File extensions to scan */
204
- extensions: RegExp;
205
- /** Directories to skip */
206
- excludeDirs: string[];
207
- /** Output file path (relative to cwd) */
208
- outputPath: string;
209
- /** Include Tailwind pattern annotations in output */
210
- verbose: boolean;
211
- }
212
- declare function generateSafelist(userConfig?: Partial<SafelistConfig>): void;
213
-
214
- export { type SwcPluginOptions, type TransformOptions, type TransformResult, type VitePluginOptions, extractAllClasses, extractTwClasses, generateSafelist, runSafelistGeneration, shouldProcess, swcPlugin, swcTransformFile, tailwindStyledPlugin, transformBatch, transformSource, transformTw, turbopackTransform, withTailwindStyled };