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.
- package/dist/animate.cjs +252 -0
- package/dist/animate.cjs.map +1 -0
- package/dist/animate.d.cts +117 -0
- package/dist/animate.d.ts +117 -0
- package/dist/animate.js +245 -0
- package/dist/animate.js.map +1 -0
- package/dist/astTransform-ua-eapqs.d.cts +41 -0
- package/dist/astTransform-ua-eapqs.d.ts +41 -0
- package/dist/compiler.cjs +3594 -0
- package/dist/compiler.cjs.map +1 -0
- package/dist/compiler.d.cts +716 -0
- package/dist/compiler.d.ts +716 -0
- package/dist/compiler.js +3535 -0
- package/dist/compiler.js.map +1 -0
- package/dist/css.cjs +71 -0
- package/dist/css.cjs.map +1 -0
- package/dist/css.d.cts +45 -0
- package/dist/css.d.ts +45 -0
- package/dist/css.js +62 -0
- package/dist/css.js.map +1 -0
- package/dist/devtools.cjs +959 -0
- package/dist/devtools.cjs.map +1 -0
- package/dist/devtools.d.cts +22 -0
- package/dist/devtools.d.ts +22 -0
- package/dist/devtools.js +952 -0
- package/dist/devtools.js.map +1 -0
- package/dist/index.cjs +1058 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +584 -0
- package/dist/index.d.ts +449 -980
- package/dist/index.js +1021 -3
- package/dist/index.js.map +1 -1
- package/dist/next.cjs +268 -0
- package/dist/next.cjs.map +1 -0
- package/dist/next.d.cts +45 -0
- package/dist/next.d.ts +45 -0
- package/dist/next.js +261 -0
- package/dist/next.js.map +1 -0
- package/dist/plugins.cjs +396 -0
- package/dist/plugins.cjs.map +1 -0
- package/dist/plugins.d.cts +231 -0
- package/dist/plugins.d.ts +231 -0
- package/dist/plugins.js +381 -0
- package/dist/plugins.js.map +1 -0
- package/dist/preset.cjs +129 -0
- package/dist/preset.cjs.map +1 -0
- package/dist/preset.d.cts +249 -0
- package/dist/preset.d.ts +249 -0
- package/dist/preset.js +124 -0
- package/dist/preset.js.map +1 -0
- package/dist/theme.cjs +154 -0
- package/dist/theme.cjs.map +1 -0
- package/dist/theme.d.cts +181 -0
- package/dist/theme.d.ts +181 -0
- package/dist/theme.js +148 -0
- package/dist/theme.js.map +1 -0
- package/dist/turbopackLoader.cjs +2689 -0
- package/dist/turbopackLoader.cjs.map +1 -0
- package/dist/turbopackLoader.d.cts +22 -0
- package/dist/turbopackLoader.d.ts +22 -0
- package/dist/turbopackLoader.js +2681 -0
- package/dist/turbopackLoader.js.map +1 -0
- package/dist/vite.cjs +105 -0
- package/dist/vite.cjs.map +1 -0
- package/dist/vite.d.cts +22 -0
- package/dist/vite.d.ts +22 -0
- package/dist/vite.js +96 -0
- package/dist/vite.js.map +1 -0
- package/dist/webpackLoader.cjs +2670 -0
- package/dist/webpackLoader.cjs.map +1 -0
- package/dist/webpackLoader.d.cts +24 -0
- package/dist/webpackLoader.d.ts +24 -0
- package/dist/webpackLoader.js +2662 -0
- package/dist/webpackLoader.js.map +1 -0
- package/package.json +62 -32
- package/CHANGELOG.md +0 -75
- package/LICENSE +0 -21
- package/README.md +0 -608
- package/dist/cli/init.js +0 -208
- package/dist/compiler/index.d.mts +0 -214
- package/dist/compiler/index.d.ts +0 -214
- package/dist/compiler/index.js +0 -546
- package/dist/compiler/index.js.map +0 -1
- package/dist/compiler/index.mjs +0 -504
- package/dist/compiler/index.mjs.map +0 -1
- package/dist/index.d.mts +0 -1115
- package/dist/index.mjs +0 -4
- package/dist/index.mjs.map +0 -1
- package/dist/turbopack-loader.js +0 -232
- 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 };
|
package/dist/compiler/index.d.ts
DELETED
|
@@ -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 };
|