@kimesh/tailwindcss 0.0.1
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/README.md +3 -0
- package/augment.d.ts +25 -0
- package/dist/index.d.ts +104 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +183 -0
- package/dist/index.js.map +1 -0
- package/package.json +39 -0
package/README.md
ADDED
package/augment.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Global module augmentation for @kimesh/tailwindcss
|
|
3
|
+
* This file is referenced by dist/index.d.ts via triple-slash directive
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Configuration options for the Kimesh TailwindCSS module
|
|
8
|
+
*/
|
|
9
|
+
export interface KimeshTailwindConfig {
|
|
10
|
+
additionalSources?: string[];
|
|
11
|
+
cssFileName?: string;
|
|
12
|
+
autoReference?: boolean;
|
|
13
|
+
alias?: string;
|
|
14
|
+
mainCss?: string;
|
|
15
|
+
referenceAlias?: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declare module "@kimesh/kit" {
|
|
19
|
+
interface KimeshModuleOptions {
|
|
20
|
+
tailwindcss?: KimeshTailwindConfig;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Re-export to make this a module (required for augmentation)
|
|
25
|
+
export {};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import * as _kimesh_kit0 from "@kimesh/kit";
|
|
2
|
+
import { VitePlugin } from "@kimesh/kit";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @kimesh/tailwindcss - Types
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Configuration options for the Kimesh TailwindCSS module
|
|
11
|
+
*/
|
|
12
|
+
interface KimeshTailwindConfig {
|
|
13
|
+
/**
|
|
14
|
+
* Path patterns for additional sources (relative to project root)
|
|
15
|
+
* @example ['../shared/components', './node_modules/@my-org/ui']
|
|
16
|
+
*/
|
|
17
|
+
additionalSources?: string[];
|
|
18
|
+
/**
|
|
19
|
+
* CSS file path for main tailwind entry (default: 'tailwind.css')
|
|
20
|
+
*/
|
|
21
|
+
cssFileName?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Whether to auto-inject @reference in Vue <style> blocks (default: true)
|
|
24
|
+
*/
|
|
25
|
+
autoReference?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Alias for the generated CSS (default: '#kimesh/tailwind')
|
|
28
|
+
*/
|
|
29
|
+
alias?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Path to the main CSS file that includes @theme customizations (relative to root)
|
|
32
|
+
* @default 'src/app.css'
|
|
33
|
+
*/
|
|
34
|
+
mainCss?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Alias name for @reference directive in Vue <style> blocks (default: '#tailwind')
|
|
37
|
+
*/
|
|
38
|
+
referenceAlias?: string;
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=types.d.ts.map
|
|
41
|
+
//#endregion
|
|
42
|
+
//#region src/module.d.ts
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* @kimesh/tailwindcss module
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```typescript
|
|
49
|
+
* // kimesh.config.ts
|
|
50
|
+
* import tailwindcss from '@kimesh/tailwindcss'
|
|
51
|
+
*
|
|
52
|
+
* export default defineKmConfig({
|
|
53
|
+
* modules: [
|
|
54
|
+
* tailwindcss,
|
|
55
|
+
* // or with options:
|
|
56
|
+
* [tailwindcss, { autoReference: false }]
|
|
57
|
+
* ]
|
|
58
|
+
* })
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
declare const _default: _kimesh_kit0.KimeshModule<KimeshTailwindConfig>;
|
|
62
|
+
//#endregion
|
|
63
|
+
//#region src/transform.d.ts
|
|
64
|
+
/**
|
|
65
|
+
* Creates a Vite transform plugin that auto-injects @reference in Vue <style> blocks
|
|
66
|
+
*
|
|
67
|
+
* This plugin detects Vue SFC files with <style> blocks that use Tailwind directives
|
|
68
|
+
* (like @apply, @screen, @variant) and automatically injects the @reference directive
|
|
69
|
+
* at the beginning of the style block if not already present.
|
|
70
|
+
*
|
|
71
|
+
* @param alias - The alias to use for @reference (e.g., '#kimesh/tailwind')
|
|
72
|
+
* @returns Vite plugin configuration
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* // Input Vue SFC:
|
|
76
|
+
* // <style scoped>
|
|
77
|
+
* // .btn { @apply px-4 py-2 bg-blue-500; }
|
|
78
|
+
* // </style>
|
|
79
|
+
* //
|
|
80
|
+
* // Output:
|
|
81
|
+
* // <style scoped>
|
|
82
|
+
* // @reference '#kimesh/tailwind';
|
|
83
|
+
* // .btn { @apply px-4 py-2 bg-blue-500; }
|
|
84
|
+
* // </style>
|
|
85
|
+
*/
|
|
86
|
+
declare function createReferenceTransformer(alias: string): VitePlugin;
|
|
87
|
+
/**
|
|
88
|
+
* Detects if a CSS/style content uses Tailwind directives
|
|
89
|
+
*
|
|
90
|
+
* @param content - CSS content to check
|
|
91
|
+
* @returns true if Tailwind directives are detected
|
|
92
|
+
*/
|
|
93
|
+
declare function hasTailwindDirectives(content: string): boolean;
|
|
94
|
+
/**
|
|
95
|
+
* Detects if a CSS/style content already has @reference
|
|
96
|
+
*
|
|
97
|
+
* @param content - CSS content to check
|
|
98
|
+
* @returns true if @reference is already present
|
|
99
|
+
*/
|
|
100
|
+
declare function hasReferenceDirective(content: string): boolean;
|
|
101
|
+
//# sourceMappingURL=transform.d.ts.map
|
|
102
|
+
//#endregion
|
|
103
|
+
export { type KimeshTailwindConfig, createReferenceTransformer, _default as default, hasReferenceDirective, hasTailwindDirectives, _default as tailwindcss };
|
|
104
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/module.ts","../src/transform.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AAOA;;UAAiB,oBAAA;;ACYmC;;;;;;;;ECuBpC;AAsEhB;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhFA;AAsEA;AAUA;;;;;;;;cDvGoD;;;;;;ADZpD;;;;ACYoD;;;;;;;;ACuBpD;AAsEA;AAUA;;;;;iBAhFgB,0BAAA,iBAA2C;;;;;;;iBAsE3C,qBAAA;;;;;;;iBAUA,qBAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { existsSync } from "node:fs";
|
|
2
|
+
import { join, relative } from "node:path";
|
|
3
|
+
import { addAlias, addTemplate, addVitePlugin, defineKimeshModule } from "@kimesh/kit";
|
|
4
|
+
import MagicString from "magic-string";
|
|
5
|
+
|
|
6
|
+
//#region src/transform.ts
|
|
7
|
+
/**
|
|
8
|
+
* Regex to match <style> blocks in Vue SFC files
|
|
9
|
+
* Captures the opening tag, content, and closing tag
|
|
10
|
+
*/
|
|
11
|
+
const STYLE_BLOCK_RE = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
|
|
12
|
+
/**
|
|
13
|
+
* Regex to detect Tailwind directives that require @reference
|
|
14
|
+
* Matches @apply, @screen, @layer (Tailwind-specific), and @variant
|
|
15
|
+
*/
|
|
16
|
+
const TAILWIND_DIRECTIVE_RE = /@(?:apply|screen|variant)\b/;
|
|
17
|
+
/**
|
|
18
|
+
* Regex to detect existing @reference directive
|
|
19
|
+
*/
|
|
20
|
+
const EXISTING_REFERENCE_RE = /@reference\s/;
|
|
21
|
+
/**
|
|
22
|
+
* Creates a Vite transform plugin that auto-injects @reference in Vue <style> blocks
|
|
23
|
+
*
|
|
24
|
+
* This plugin detects Vue SFC files with <style> blocks that use Tailwind directives
|
|
25
|
+
* (like @apply, @screen, @variant) and automatically injects the @reference directive
|
|
26
|
+
* at the beginning of the style block if not already present.
|
|
27
|
+
*
|
|
28
|
+
* @param alias - The alias to use for @reference (e.g., '#kimesh/tailwind')
|
|
29
|
+
* @returns Vite plugin configuration
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* // Input Vue SFC:
|
|
33
|
+
* // <style scoped>
|
|
34
|
+
* // .btn { @apply px-4 py-2 bg-blue-500; }
|
|
35
|
+
* // </style>
|
|
36
|
+
* //
|
|
37
|
+
* // Output:
|
|
38
|
+
* // <style scoped>
|
|
39
|
+
* // @reference '#kimesh/tailwind';
|
|
40
|
+
* // .btn { @apply px-4 py-2 bg-blue-500; }
|
|
41
|
+
* // </style>
|
|
42
|
+
*/
|
|
43
|
+
function createReferenceTransformer(alias) {
|
|
44
|
+
return {
|
|
45
|
+
name: "kimesh:tailwind:reference",
|
|
46
|
+
enforce: "pre",
|
|
47
|
+
transform(code, id) {
|
|
48
|
+
if (!id.endsWith(".vue")) return null;
|
|
49
|
+
if (!code.includes("<style")) return null;
|
|
50
|
+
const s = new MagicString(code);
|
|
51
|
+
let hasChanges = false;
|
|
52
|
+
let match;
|
|
53
|
+
STYLE_BLOCK_RE.lastIndex = 0;
|
|
54
|
+
while ((match = STYLE_BLOCK_RE.exec(code)) !== null) {
|
|
55
|
+
const [fullMatch, attributes, styleContent] = match;
|
|
56
|
+
const matchStart = match.index;
|
|
57
|
+
const contentStart = matchStart + 6 + attributes.length + 1;
|
|
58
|
+
if (!TAILWIND_DIRECTIVE_RE.test(styleContent)) continue;
|
|
59
|
+
if (EXISTING_REFERENCE_RE.test(styleContent)) continue;
|
|
60
|
+
const insertPosition = contentStart;
|
|
61
|
+
const referenceDirective = `@reference '${alias}';\n`;
|
|
62
|
+
s.appendLeft(insertPosition, referenceDirective);
|
|
63
|
+
hasChanges = true;
|
|
64
|
+
}
|
|
65
|
+
if (!hasChanges) return null;
|
|
66
|
+
return {
|
|
67
|
+
code: s.toString(),
|
|
68
|
+
map: s.generateMap({
|
|
69
|
+
source: id,
|
|
70
|
+
hires: true,
|
|
71
|
+
includeContent: true
|
|
72
|
+
})
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Detects if a CSS/style content uses Tailwind directives
|
|
79
|
+
*
|
|
80
|
+
* @param content - CSS content to check
|
|
81
|
+
* @returns true if Tailwind directives are detected
|
|
82
|
+
*/
|
|
83
|
+
function hasTailwindDirectives(content) {
|
|
84
|
+
return TAILWIND_DIRECTIVE_RE.test(content);
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Detects if a CSS/style content already has @reference
|
|
88
|
+
*
|
|
89
|
+
* @param content - CSS content to check
|
|
90
|
+
* @returns true if @reference is already present
|
|
91
|
+
*/
|
|
92
|
+
function hasReferenceDirective(content) {
|
|
93
|
+
return EXISTING_REFERENCE_RE.test(content);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
//#endregion
|
|
97
|
+
//#region src/module.ts
|
|
98
|
+
/**
|
|
99
|
+
* Generate CSS content with @source directives for all layers
|
|
100
|
+
*/
|
|
101
|
+
function generateSourcesCSS(kimesh, additionalSources) {
|
|
102
|
+
const lines = ["/* Auto-generated by @kimesh/tailwindcss */", ""];
|
|
103
|
+
for (const layer of kimesh.layers) {
|
|
104
|
+
const srcDir = `${layer.path}/src`;
|
|
105
|
+
const sourcePath = relative(kimesh.buildDir, srcDir);
|
|
106
|
+
const normalizedPath = sourcePath.replace(/\\/g, "/");
|
|
107
|
+
lines.push(`@source "${normalizedPath}";`);
|
|
108
|
+
}
|
|
109
|
+
if (additionalSources.length > 0) {
|
|
110
|
+
lines.push("");
|
|
111
|
+
lines.push("/* Additional sources */");
|
|
112
|
+
for (const source of additionalSources) {
|
|
113
|
+
const normalizedPath = source.replace(/\\/g, "/");
|
|
114
|
+
lines.push(`@source "${normalizedPath}";`);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
return lines.join("\n");
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Generate the main CSS content
|
|
121
|
+
*/
|
|
122
|
+
function generateMainCSS(kimesh, additionalSources) {
|
|
123
|
+
const sourcesCSS = generateSourcesCSS(kimesh, additionalSources);
|
|
124
|
+
return [
|
|
125
|
+
`/* Generated by @kimesh/tailwindcss - DO NOT EDIT */`,
|
|
126
|
+
``,
|
|
127
|
+
`@import 'tailwindcss';`,
|
|
128
|
+
``,
|
|
129
|
+
`/* Layer sources */`,
|
|
130
|
+
sourcesCSS || "/* No layers configured */"
|
|
131
|
+
].join("\n");
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* @kimesh/tailwindcss module
|
|
135
|
+
*
|
|
136
|
+
* @example
|
|
137
|
+
* ```typescript
|
|
138
|
+
* // kimesh.config.ts
|
|
139
|
+
* import tailwindcss from '@kimesh/tailwindcss'
|
|
140
|
+
*
|
|
141
|
+
* export default defineKmConfig({
|
|
142
|
+
* modules: [
|
|
143
|
+
* tailwindcss,
|
|
144
|
+
* // or with options:
|
|
145
|
+
* [tailwindcss, { autoReference: false }]
|
|
146
|
+
* ]
|
|
147
|
+
* })
|
|
148
|
+
* ```
|
|
149
|
+
*/
|
|
150
|
+
var module_default = defineKimeshModule({
|
|
151
|
+
meta: {
|
|
152
|
+
name: "@kimesh/tailwindcss",
|
|
153
|
+
version: "2.0.0",
|
|
154
|
+
configKey: "tailwindcss"
|
|
155
|
+
},
|
|
156
|
+
defaults: {
|
|
157
|
+
additionalSources: [],
|
|
158
|
+
cssFileName: "tailwind.css",
|
|
159
|
+
autoReference: true,
|
|
160
|
+
alias: "#kimesh/tailwind",
|
|
161
|
+
mainCss: "src/app.css",
|
|
162
|
+
referenceAlias: "#tailwind"
|
|
163
|
+
},
|
|
164
|
+
hooks: { "layers:extend": async (layers) => {} },
|
|
165
|
+
async setup(options, kimesh) {
|
|
166
|
+
const { additionalSources = [], cssFileName = "tailwind.css", autoReference = true, alias = "#kimesh/tailwind", mainCss = "src/app.css", referenceAlias = "#tailwind" } = options;
|
|
167
|
+
const cssFilePath = join(kimesh.buildDir, cssFileName);
|
|
168
|
+
addTemplate({
|
|
169
|
+
filename: cssFileName,
|
|
170
|
+
write: true,
|
|
171
|
+
getContents: ({ kimesh: kimesh$1 }) => generateMainCSS(kimesh$1, additionalSources)
|
|
172
|
+
});
|
|
173
|
+
addAlias(alias, cssFilePath);
|
|
174
|
+
const mainCssPath = join(kimesh.root, mainCss);
|
|
175
|
+
const effectiveReferenceAlias = existsSync(mainCssPath) ? referenceAlias : alias;
|
|
176
|
+
if (existsSync(mainCssPath)) addAlias(referenceAlias, mainCssPath);
|
|
177
|
+
if (autoReference) addVitePlugin(createReferenceTransformer(effectiveReferenceAlias));
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
//#endregion
|
|
182
|
+
export { createReferenceTransformer, module_default as default, hasReferenceDirective, hasTailwindDirectives, module_default as tailwindcss };
|
|
183
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["alias: string","code: string","id: string","match: RegExpExecArray | null","content: string","kimesh: Kimesh","additionalSources: string[]","lines: string[]","kimesh"],"sources":["../src/transform.ts","../src/module.ts"],"sourcesContent":["import type { VitePlugin } from \"@kimesh/kit\";\nimport MagicString from \"magic-string\";\n\n/**\n * Regex to match <style> blocks in Vue SFC files\n * Captures the opening tag, content, and closing tag\n */\nconst STYLE_BLOCK_RE = /<style([^>]*)>([\\s\\S]*?)<\\/style>/gi;\n\n/**\n * Regex to detect Tailwind directives that require @reference\n * Matches @apply, @screen, @layer (Tailwind-specific), and @variant\n */\nconst TAILWIND_DIRECTIVE_RE = /@(?:apply|screen|variant)\\b/;\n\n/**\n * Regex to detect existing @reference directive\n */\nconst EXISTING_REFERENCE_RE = /@reference\\s/;\n\n/**\n * Creates a Vite transform plugin that auto-injects @reference in Vue <style> blocks\n *\n * This plugin detects Vue SFC files with <style> blocks that use Tailwind directives\n * (like @apply, @screen, @variant) and automatically injects the @reference directive\n * at the beginning of the style block if not already present.\n *\n * @param alias - The alias to use for @reference (e.g., '#kimesh/tailwind')\n * @returns Vite plugin configuration\n *\n * @example\n * // Input Vue SFC:\n * // <style scoped>\n * // .btn { @apply px-4 py-2 bg-blue-500; }\n * // </style>\n * //\n * // Output:\n * // <style scoped>\n * // @reference '#kimesh/tailwind';\n * // .btn { @apply px-4 py-2 bg-blue-500; }\n * // </style>\n */\nexport function createReferenceTransformer(alias: string): VitePlugin {\n return {\n name: \"kimesh:tailwind:reference\",\n enforce: \"pre\",\n\n transform(code: string, id: string) {\n // Only process .vue files\n if (!id.endsWith(\".vue\")) {\n return null;\n }\n\n // Check if file has any style blocks\n if (!code.includes(\"<style\")) {\n return null;\n }\n\n const s = new MagicString(code);\n let hasChanges = false;\n\n // Find and process all <style> blocks\n let match: RegExpExecArray | null;\n STYLE_BLOCK_RE.lastIndex = 0;\n\n while ((match = STYLE_BLOCK_RE.exec(code)) !== null) {\n const [fullMatch, attributes, styleContent] = match;\n const matchStart = match.index;\n const contentStart =\n matchStart + \"<style\".length + attributes.length + 1;\n\n // Skip if this style block doesn't use Tailwind directives\n if (!TAILWIND_DIRECTIVE_RE.test(styleContent)) {\n continue;\n }\n\n // Skip if @reference already present\n if (EXISTING_REFERENCE_RE.test(styleContent)) {\n continue;\n }\n\n // Calculate position after the opening <style> tag\n const insertPosition = contentStart;\n\n // Inject @reference directive\n const referenceDirective = `@reference '${alias}';\\n`;\n s.appendLeft(insertPosition, referenceDirective);\n hasChanges = true;\n }\n\n if (!hasChanges) {\n return null;\n }\n\n return {\n code: s.toString(),\n map: s.generateMap({\n source: id,\n hires: true,\n includeContent: true,\n }),\n };\n },\n };\n}\n\n/**\n * Detects if a CSS/style content uses Tailwind directives\n *\n * @param content - CSS content to check\n * @returns true if Tailwind directives are detected\n */\nexport function hasTailwindDirectives(content: string): boolean {\n return TAILWIND_DIRECTIVE_RE.test(content);\n}\n\n/**\n * Detects if a CSS/style content already has @reference\n *\n * @param content - CSS content to check\n * @returns true if @reference is already present\n */\nexport function hasReferenceDirective(content: string): boolean {\n return EXISTING_REFERENCE_RE.test(content);\n}\n","/**\n * @kimesh/tailwindcss - Module Implementation (v2)\n *\n * Kimesh module for TailwindCSS integration.\n * - Generates @source directives for all layer srcDirs\n * - Creates physical CSS files for @tailwindcss/vite compatibility\n * - Auto-injects @reference in Vue <style> blocks\n */\n\nimport { existsSync } from \"node:fs\";\nimport { join, relative } from \"node:path\";\nimport {\n defineKimeshModule,\n addTemplate,\n addAlias,\n addVitePlugin,\n createResolver,\n} from \"@kimesh/kit\";\nimport type { Kimesh } from \"@kimesh/kit\";\nimport type { KimeshTailwindConfig } from \"./types\";\nimport { createReferenceTransformer } from \"./transform\";\n\n/**\n * Generate CSS content with @source directives for all layers\n */\nfunction generateSourcesCSS(\n kimesh: Kimesh,\n additionalSources: string[]\n): string {\n const lines: string[] = [\n \"/* Auto-generated by @kimesh/tailwindcss */\",\n \"\",\n ];\n\n // Generate @source directive for each layer's srcDir\n for (const layer of kimesh.layers) {\n const srcDir = `${layer.path}/src`;\n const sourcePath = relative(kimesh.buildDir, srcDir);\n const normalizedPath = sourcePath.replace(/\\\\/g, \"/\");\n lines.push(`@source \"${normalizedPath}\";`);\n }\n\n // Add additional sources\n if (additionalSources.length > 0) {\n lines.push(\"\");\n lines.push(\"/* Additional sources */\");\n for (const source of additionalSources) {\n const normalizedPath = source.replace(/\\\\/g, \"/\");\n lines.push(`@source \"${normalizedPath}\";`);\n }\n }\n\n return lines.join(\"\\n\");\n}\n\n/**\n * Generate the main CSS content\n */\nfunction generateMainCSS(kimesh: Kimesh, additionalSources: string[]): string {\n const sourcesCSS = generateSourcesCSS(kimesh, additionalSources);\n\n return [\n `/* Generated by @kimesh/tailwindcss - DO NOT EDIT */`,\n ``,\n `@import 'tailwindcss';`,\n ``,\n `/* Layer sources */`,\n sourcesCSS || \"/* No layers configured */\",\n ].join(\"\\n\");\n}\n\n/**\n * @kimesh/tailwindcss module\n *\n * @example\n * ```typescript\n * // kimesh.config.ts\n * import tailwindcss from '@kimesh/tailwindcss'\n *\n * export default defineKmConfig({\n * modules: [\n * tailwindcss,\n * // or with options:\n * [tailwindcss, { autoReference: false }]\n * ]\n * })\n * ```\n */\nexport default defineKimeshModule<KimeshTailwindConfig>({\n meta: {\n name: \"@kimesh/tailwindcss\",\n version: \"2.0.0\",\n configKey: \"tailwindcss\",\n },\n\n defaults: {\n additionalSources: [],\n cssFileName: \"tailwind.css\",\n autoReference: true,\n alias: \"#kimesh/tailwind\",\n mainCss: \"src/app.css\",\n referenceAlias: \"#tailwind\",\n },\n\n hooks: {\n // Regenerate CSS when layers change\n \"layers:extend\": async (layers) => {\n // Templates will be regenerated automatically\n },\n },\n\n async setup(options, kimesh) {\n const {\n additionalSources = [],\n cssFileName = \"tailwind.css\",\n autoReference = true,\n alias = \"#kimesh/tailwind\",\n mainCss = \"src/app.css\",\n referenceAlias = \"#tailwind\",\n } = options;\n\n const cssFilePath = join(kimesh.buildDir, cssFileName);\n\n // Add template for the CSS file\n // Using template system instead of manual writeFileSync\n addTemplate({\n filename: cssFileName,\n write: true,\n getContents: ({ kimesh }) => generateMainCSS(kimesh, additionalSources),\n });\n\n // Register alias for the generated CSS\n addAlias(alias, cssFilePath);\n\n // Setup reference alias for Vue <style> @reference\n const mainCssPath = join(kimesh.root, mainCss);\n const effectiveReferenceAlias = existsSync(mainCssPath)\n ? referenceAlias\n : alias;\n\n if (existsSync(mainCssPath)) {\n addAlias(referenceAlias, mainCssPath);\n }\n\n // Add reference transformer if enabled\n if (autoReference) {\n addVitePlugin(createReferenceTransformer(effectiveReferenceAlias));\n }\n },\n});\n"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kimesh/tailwindcss",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "TailwindCSS module for Kimesh framework",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js",
|
|
12
|
+
"default": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"augment.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsdown",
|
|
21
|
+
"dev": "tsdown --watch",
|
|
22
|
+
"test": "vitest run",
|
|
23
|
+
"test:watch": "vitest"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"magic-string": "^0.30.17"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"@kimesh/kit": "0.0.1",
|
|
30
|
+
"vite": "^8.0.0-beta.8",
|
|
31
|
+
"tailwindcss": "^4.0.0"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@kimesh/kit": "0.0.1",
|
|
35
|
+
"tsdown": "^0.11.6",
|
|
36
|
+
"typescript": "^5.8.3",
|
|
37
|
+
"vite": "^8.0.0-beta.8"
|
|
38
|
+
}
|
|
39
|
+
}
|