clases-tailwind 1.0.1 → 1.0.2
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/index.cjs +0 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -85
- package/dist/index.d.ts +2 -85
- package/dist/index.js +1 -4
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/index.ts +2 -18
- package/src/scripts/init.js +26 -0
- package/src/index.test.ts +0 -57
- package/src/test/tailwind.test.ts +0 -23
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var clases = require('clases');
|
|
4
|
-
|
|
5
3
|
// src/index.ts
|
|
6
4
|
var tailwindPlugin = {
|
|
7
5
|
// --- Estructura y Pantallas ---
|
|
@@ -81,10 +79,7 @@ var tailwindPlugin = {
|
|
|
81
79
|
rtl: "rtl",
|
|
82
80
|
ltr: "ltr"
|
|
83
81
|
};
|
|
84
|
-
var twcl = clases.createCl(tailwindPlugin);
|
|
85
82
|
|
|
86
83
|
exports.tailwindPlugin = tailwindPlugin;
|
|
87
|
-
exports.tw = twcl;
|
|
88
|
-
exports.twcl = twcl;
|
|
89
84
|
//# sourceMappingURL=index.cjs.map
|
|
90
85
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAWO,IAAM,cAAA,GAAiB;AAAA;AAAA,EAE1B,IAAA,EAAM,MAAA;AAAA,EACN,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,KAAA,EAAO,KAAA;AAAA;AAAA,EAGP,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA;AAAA,EAGjB,QAAA,EAAU,UAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,aAAA,EAAe,eAAA;AAAA,EACf,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,SAAA;AAAA,EACT,UAAA,EAAY,UAAA;AAAA,EACZ,cAAA,EAAgB,cAAA;AAAA,EAChB,mBAAA,EAAqB,mBAAA;AAAA,EACrB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,WAAA;AAAA;AAAA,EAGb,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,eAAA,EAAiB,eAAA;AAAA,EACjB,cAAA,EAAgB,cAAA;AAAA,EAChB,cAAA,EAAgB,cAAA;AAAA,EAChB,KAAA,EAAO,OAAA;AAAA;AAAA,EAGP,KAAA,EAAO,aAAA;AAAA;AAAA,EACP,aAAA,EAAe,aAAA;AAAA,EACf,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,IAAA,EAAM,YAAA;AAAA;AAAA,EACN,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc,YAAA;AAAA,EACd,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA;AAAA,EAGhB,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA,EACP,eAAA,EAAiB,eAAA;AAAA,EACjB,aAAA,EAAe,aAAA;AAAA,EACf,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA;AAAA,EAGX,MAAA,EAAQ,QAAA;AAAA,EACR,SAAA,EAAW,WAAA;AAAA,EACX,YAAA,EAAc,YAAA;AAAA,EACd,cAAA,EAAgB,cAAA;AAAA,EAChB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,aAAA;AAAA,EACb,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA;AAAA,EAGN,KAAA,EAAO,OAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACT","file":"index.cjs","sourcesContent":["\r\n\r\n\r\n/**\r\n * Configuration object containing default prefixes for Tailwind CSS.\r\n * * Use this to maintain consistency between your class utility and \r\n * Tailwind's variant system.\r\n * @example\r\n * // Accessing a specific prefix\r\n * const basePrefix = tailwindPlugin.prefix;\r\n */\r\nexport const tailwindPlugin = {\r\n // --- Estructura y Pantallas ---\r\n base: 'base',\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg',\r\n xl: 'xl',\r\n '2xl': '2xl',\r\n\r\n // --- Estados de Usuario (Interacción) ---\r\n hover: 'hover',\r\n focus: 'focus',\r\n active: 'active',\r\n visited: 'visited',\r\n target: 'target',\r\n 'focus-within': 'focus-within',\r\n 'focus-visible': 'focus-visible',\r\n\r\n // --- Estados de Formulario ---\r\n disabled: 'disabled',\r\n enabled: 'enabled',\r\n checked: 'checked',\r\n indeterminate: 'indeterminate',\r\n default: 'default',\r\n required: 'required',\r\n valid: 'valid',\r\n invalid: 'invalid',\r\n 'in-range': 'in-range',\r\n 'out-of-range': 'out-of-range',\r\n 'placeholder-shown': 'placeholder-shown',\r\n autofill: 'autofill',\r\n 'read-only': 'read-only',\r\n\r\n // --- Posicionamiento y Árbol (Pseudo-clases) ---\r\n first: 'first',\r\n last: 'last',\r\n only: 'only',\r\n odd: 'odd',\r\n even: 'even',\r\n 'first-of-type': 'first-of-type',\r\n 'last-of-type': 'last-of-type',\r\n 'only-of-type': 'only-of-type',\r\n empty: 'empty',\r\n\r\n // --- Relaciones de Elementos (Group & Peer) ---\r\n group: 'group-hover', // Alias amigable\r\n 'group-hover': 'group-hover',\r\n 'group-focus': 'group-focus',\r\n 'group-active': 'group-active',\r\n 'group-visited': 'group-visited',\r\n 'group-invalid': 'group-invalid',\r\n peer: 'peer-hover', // Alias amigable\r\n 'peer-hover': 'peer-hover',\r\n 'peer-focus': 'peer-focus',\r\n 'peer-active': 'peer-active',\r\n 'peer-invalid': 'peer-invalid',\r\n\r\n // --- Media Queries (Preferencias de Sistema) ---\r\n dark: 'dark',\r\n light: 'light',\r\n 'motion-reduce': 'motion-reduce',\r\n 'motion-safe': 'motion-safe',\r\n 'contrast-more': 'contrast-more',\r\n 'contrast-less': 'contrast-less',\r\n portrait: 'portrait',\r\n landscape: 'landscape',\r\n\r\n // --- Pseudo-elementos ---\r\n marker: 'marker',\r\n selection: 'selection',\r\n 'first-line': 'first-line',\r\n 'first-letter': 'first-letter',\r\n backdrop: 'backdrop',\r\n placeholder: 'placeholder',\r\n before: 'before',\r\n after: 'after',\r\n file: 'file',\r\n\r\n // --- Varios y Print ---\r\n print: 'print',\r\n rtl: 'rtl',\r\n ltr: 'ltr'\r\n};\r\n\r\n// Export the type so users can use it in their component props\r\nexport type TailwindKey = keyof typeof tailwindPlugin;\r\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import * as clsx from 'clsx';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Configuration object containing default prefixes for Tailwind CSS.
|
|
5
3
|
* * Use this to maintain consistency between your class utility and
|
|
6
4
|
* Tailwind's variant system.
|
|
7
|
-
*
|
|
5
|
+
* @example
|
|
8
6
|
* // Accessing a specific prefix
|
|
9
7
|
* const basePrefix = tailwindPlugin.prefix;
|
|
10
8
|
*/
|
|
@@ -76,87 +74,6 @@ declare const tailwindPlugin: {
|
|
|
76
74
|
rtl: string;
|
|
77
75
|
ltr: string;
|
|
78
76
|
};
|
|
79
|
-
/**
|
|
80
|
-
* Generates an optimized Tailwind CSS class string.
|
|
81
|
-
* Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).
|
|
82
|
-
* * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.
|
|
83
|
-
* @returns A clean string of resulting classes without duplicates or conflicts.
|
|
84
|
-
* * @example
|
|
85
|
-
* // Basic usage
|
|
86
|
-
* tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'
|
|
87
|
-
* * // Using objects
|
|
88
|
-
* tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'
|
|
89
|
-
*/
|
|
90
|
-
declare const twcl: (...inputs: (clsx.ClassValue | {
|
|
91
|
-
[x: string & {}]: any;
|
|
92
|
-
base?: any;
|
|
93
|
-
sm?: any;
|
|
94
|
-
md?: any;
|
|
95
|
-
lg?: any;
|
|
96
|
-
xl?: any;
|
|
97
|
-
"2xl"?: any;
|
|
98
|
-
hover?: any;
|
|
99
|
-
focus?: any;
|
|
100
|
-
active?: any;
|
|
101
|
-
visited?: any;
|
|
102
|
-
target?: any;
|
|
103
|
-
"focus-within"?: any;
|
|
104
|
-
"focus-visible"?: any;
|
|
105
|
-
disabled?: any;
|
|
106
|
-
enabled?: any;
|
|
107
|
-
checked?: any;
|
|
108
|
-
indeterminate?: any;
|
|
109
|
-
default?: any;
|
|
110
|
-
required?: any;
|
|
111
|
-
valid?: any;
|
|
112
|
-
invalid?: any;
|
|
113
|
-
"in-range"?: any;
|
|
114
|
-
"out-of-range"?: any;
|
|
115
|
-
"placeholder-shown"?: any;
|
|
116
|
-
autofill?: any;
|
|
117
|
-
"read-only"?: any;
|
|
118
|
-
first?: any;
|
|
119
|
-
last?: any;
|
|
120
|
-
only?: any;
|
|
121
|
-
odd?: any;
|
|
122
|
-
even?: any;
|
|
123
|
-
"first-of-type"?: any;
|
|
124
|
-
"last-of-type"?: any;
|
|
125
|
-
"only-of-type"?: any;
|
|
126
|
-
empty?: any;
|
|
127
|
-
"group-hover"?: any;
|
|
128
|
-
"group-focus"?: any;
|
|
129
|
-
"group-active"?: any;
|
|
130
|
-
"group-visited"?: any;
|
|
131
|
-
"group-invalid"?: any;
|
|
132
|
-
"peer-hover"?: any;
|
|
133
|
-
"peer-focus"?: any;
|
|
134
|
-
"peer-active"?: any;
|
|
135
|
-
"peer-invalid"?: any;
|
|
136
|
-
dark?: any;
|
|
137
|
-
light?: any;
|
|
138
|
-
"motion-reduce"?: any;
|
|
139
|
-
"motion-safe"?: any;
|
|
140
|
-
"contrast-more"?: any;
|
|
141
|
-
"contrast-less"?: any;
|
|
142
|
-
portrait?: any;
|
|
143
|
-
landscape?: any;
|
|
144
|
-
marker?: any;
|
|
145
|
-
selection?: any;
|
|
146
|
-
"first-line"?: any;
|
|
147
|
-
"first-letter"?: any;
|
|
148
|
-
backdrop?: any;
|
|
149
|
-
placeholder?: any;
|
|
150
|
-
before?: any;
|
|
151
|
-
after?: any;
|
|
152
|
-
file?: any;
|
|
153
|
-
print?: any;
|
|
154
|
-
rtl?: any;
|
|
155
|
-
ltr?: any;
|
|
156
|
-
group?: any;
|
|
157
|
-
peer?: any;
|
|
158
|
-
})[]) => string;
|
|
159
|
-
|
|
160
77
|
type TailwindKey = keyof typeof tailwindPlugin;
|
|
161
78
|
|
|
162
|
-
export { type TailwindKey, tailwindPlugin
|
|
79
|
+
export { type TailwindKey, tailwindPlugin };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import * as clsx from 'clsx';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Configuration object containing default prefixes for Tailwind CSS.
|
|
5
3
|
* * Use this to maintain consistency between your class utility and
|
|
6
4
|
* Tailwind's variant system.
|
|
7
|
-
*
|
|
5
|
+
* @example
|
|
8
6
|
* // Accessing a specific prefix
|
|
9
7
|
* const basePrefix = tailwindPlugin.prefix;
|
|
10
8
|
*/
|
|
@@ -76,87 +74,6 @@ declare const tailwindPlugin: {
|
|
|
76
74
|
rtl: string;
|
|
77
75
|
ltr: string;
|
|
78
76
|
};
|
|
79
|
-
/**
|
|
80
|
-
* Generates an optimized Tailwind CSS class string.
|
|
81
|
-
* Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).
|
|
82
|
-
* * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.
|
|
83
|
-
* @returns A clean string of resulting classes without duplicates or conflicts.
|
|
84
|
-
* * @example
|
|
85
|
-
* // Basic usage
|
|
86
|
-
* tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'
|
|
87
|
-
* * // Using objects
|
|
88
|
-
* tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'
|
|
89
|
-
*/
|
|
90
|
-
declare const twcl: (...inputs: (clsx.ClassValue | {
|
|
91
|
-
[x: string & {}]: any;
|
|
92
|
-
base?: any;
|
|
93
|
-
sm?: any;
|
|
94
|
-
md?: any;
|
|
95
|
-
lg?: any;
|
|
96
|
-
xl?: any;
|
|
97
|
-
"2xl"?: any;
|
|
98
|
-
hover?: any;
|
|
99
|
-
focus?: any;
|
|
100
|
-
active?: any;
|
|
101
|
-
visited?: any;
|
|
102
|
-
target?: any;
|
|
103
|
-
"focus-within"?: any;
|
|
104
|
-
"focus-visible"?: any;
|
|
105
|
-
disabled?: any;
|
|
106
|
-
enabled?: any;
|
|
107
|
-
checked?: any;
|
|
108
|
-
indeterminate?: any;
|
|
109
|
-
default?: any;
|
|
110
|
-
required?: any;
|
|
111
|
-
valid?: any;
|
|
112
|
-
invalid?: any;
|
|
113
|
-
"in-range"?: any;
|
|
114
|
-
"out-of-range"?: any;
|
|
115
|
-
"placeholder-shown"?: any;
|
|
116
|
-
autofill?: any;
|
|
117
|
-
"read-only"?: any;
|
|
118
|
-
first?: any;
|
|
119
|
-
last?: any;
|
|
120
|
-
only?: any;
|
|
121
|
-
odd?: any;
|
|
122
|
-
even?: any;
|
|
123
|
-
"first-of-type"?: any;
|
|
124
|
-
"last-of-type"?: any;
|
|
125
|
-
"only-of-type"?: any;
|
|
126
|
-
empty?: any;
|
|
127
|
-
"group-hover"?: any;
|
|
128
|
-
"group-focus"?: any;
|
|
129
|
-
"group-active"?: any;
|
|
130
|
-
"group-visited"?: any;
|
|
131
|
-
"group-invalid"?: any;
|
|
132
|
-
"peer-hover"?: any;
|
|
133
|
-
"peer-focus"?: any;
|
|
134
|
-
"peer-active"?: any;
|
|
135
|
-
"peer-invalid"?: any;
|
|
136
|
-
dark?: any;
|
|
137
|
-
light?: any;
|
|
138
|
-
"motion-reduce"?: any;
|
|
139
|
-
"motion-safe"?: any;
|
|
140
|
-
"contrast-more"?: any;
|
|
141
|
-
"contrast-less"?: any;
|
|
142
|
-
portrait?: any;
|
|
143
|
-
landscape?: any;
|
|
144
|
-
marker?: any;
|
|
145
|
-
selection?: any;
|
|
146
|
-
"first-line"?: any;
|
|
147
|
-
"first-letter"?: any;
|
|
148
|
-
backdrop?: any;
|
|
149
|
-
placeholder?: any;
|
|
150
|
-
before?: any;
|
|
151
|
-
after?: any;
|
|
152
|
-
file?: any;
|
|
153
|
-
print?: any;
|
|
154
|
-
rtl?: any;
|
|
155
|
-
ltr?: any;
|
|
156
|
-
group?: any;
|
|
157
|
-
peer?: any;
|
|
158
|
-
})[]) => string;
|
|
159
|
-
|
|
160
77
|
type TailwindKey = keyof typeof tailwindPlugin;
|
|
161
78
|
|
|
162
|
-
export { type TailwindKey, tailwindPlugin
|
|
79
|
+
export { type TailwindKey, tailwindPlugin };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { createCl } from 'clases';
|
|
2
|
-
|
|
3
1
|
// src/index.ts
|
|
4
2
|
var tailwindPlugin = {
|
|
5
3
|
// --- Estructura y Pantallas ---
|
|
@@ -79,8 +77,7 @@ var tailwindPlugin = {
|
|
|
79
77
|
rtl: "rtl",
|
|
80
78
|
ltr: "ltr"
|
|
81
79
|
};
|
|
82
|
-
var twcl = createCl(tailwindPlugin);
|
|
83
80
|
|
|
84
|
-
export { tailwindPlugin
|
|
81
|
+
export { tailwindPlugin };
|
|
85
82
|
//# sourceMappingURL=index.js.map
|
|
86
83
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAWO,IAAM,cAAA,GAAiB;AAAA;AAAA,EAE1B,IAAA,EAAM,MAAA;AAAA,EACN,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,KAAA,EAAO,KAAA;AAAA;AAAA,EAGP,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA;AAAA,EAGjB,QAAA,EAAU,UAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,aAAA,EAAe,eAAA;AAAA,EACf,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,SAAA;AAAA,EACT,UAAA,EAAY,UAAA;AAAA,EACZ,cAAA,EAAgB,cAAA;AAAA,EAChB,mBAAA,EAAqB,mBAAA;AAAA,EACrB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,WAAA;AAAA;AAAA,EAGb,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,eAAA,EAAiB,eAAA;AAAA,EACjB,cAAA,EAAgB,cAAA;AAAA,EAChB,cAAA,EAAgB,cAAA;AAAA,EAChB,KAAA,EAAO,OAAA;AAAA;AAAA,EAGP,KAAA,EAAO,aAAA;AAAA;AAAA,EACP,aAAA,EAAe,aAAA;AAAA,EACf,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,IAAA,EAAM,YAAA;AAAA;AAAA,EACN,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc,YAAA;AAAA,EACd,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA;AAAA,EAGhB,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA,EACP,eAAA,EAAiB,eAAA;AAAA,EACjB,aAAA,EAAe,aAAA;AAAA,EACf,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA;AAAA,EAGX,MAAA,EAAQ,QAAA;AAAA,EACR,SAAA,EAAW,WAAA;AAAA,EACX,YAAA,EAAc,YAAA;AAAA,EACd,cAAA,EAAgB,cAAA;AAAA,EAChB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,aAAA;AAAA,EACb,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA;AAAA,EAGN,KAAA,EAAO,OAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACT","file":"index.js","sourcesContent":["\r\n\r\n\r\n/**\r\n * Configuration object containing default prefixes for Tailwind CSS.\r\n * * Use this to maintain consistency between your class utility and \r\n * Tailwind's variant system.\r\n * @example\r\n * // Accessing a specific prefix\r\n * const basePrefix = tailwindPlugin.prefix;\r\n */\r\nexport const tailwindPlugin = {\r\n // --- Estructura y Pantallas ---\r\n base: 'base',\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg',\r\n xl: 'xl',\r\n '2xl': '2xl',\r\n\r\n // --- Estados de Usuario (Interacción) ---\r\n hover: 'hover',\r\n focus: 'focus',\r\n active: 'active',\r\n visited: 'visited',\r\n target: 'target',\r\n 'focus-within': 'focus-within',\r\n 'focus-visible': 'focus-visible',\r\n\r\n // --- Estados de Formulario ---\r\n disabled: 'disabled',\r\n enabled: 'enabled',\r\n checked: 'checked',\r\n indeterminate: 'indeterminate',\r\n default: 'default',\r\n required: 'required',\r\n valid: 'valid',\r\n invalid: 'invalid',\r\n 'in-range': 'in-range',\r\n 'out-of-range': 'out-of-range',\r\n 'placeholder-shown': 'placeholder-shown',\r\n autofill: 'autofill',\r\n 'read-only': 'read-only',\r\n\r\n // --- Posicionamiento y Árbol (Pseudo-clases) ---\r\n first: 'first',\r\n last: 'last',\r\n only: 'only',\r\n odd: 'odd',\r\n even: 'even',\r\n 'first-of-type': 'first-of-type',\r\n 'last-of-type': 'last-of-type',\r\n 'only-of-type': 'only-of-type',\r\n empty: 'empty',\r\n\r\n // --- Relaciones de Elementos (Group & Peer) ---\r\n group: 'group-hover', // Alias amigable\r\n 'group-hover': 'group-hover',\r\n 'group-focus': 'group-focus',\r\n 'group-active': 'group-active',\r\n 'group-visited': 'group-visited',\r\n 'group-invalid': 'group-invalid',\r\n peer: 'peer-hover', // Alias amigable\r\n 'peer-hover': 'peer-hover',\r\n 'peer-focus': 'peer-focus',\r\n 'peer-active': 'peer-active',\r\n 'peer-invalid': 'peer-invalid',\r\n\r\n // --- Media Queries (Preferencias de Sistema) ---\r\n dark: 'dark',\r\n light: 'light',\r\n 'motion-reduce': 'motion-reduce',\r\n 'motion-safe': 'motion-safe',\r\n 'contrast-more': 'contrast-more',\r\n 'contrast-less': 'contrast-less',\r\n portrait: 'portrait',\r\n landscape: 'landscape',\r\n\r\n // --- Pseudo-elementos ---\r\n marker: 'marker',\r\n selection: 'selection',\r\n 'first-line': 'first-line',\r\n 'first-letter': 'first-letter',\r\n backdrop: 'backdrop',\r\n placeholder: 'placeholder',\r\n before: 'before',\r\n after: 'after',\r\n file: 'file',\r\n\r\n // --- Varios y Print ---\r\n print: 'print',\r\n rtl: 'rtl',\r\n ltr: 'ltr'\r\n};\r\n\r\n// Export the type so users can use it in their component props\r\nexport type TailwindKey = keyof typeof tailwindPlugin;\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "clases-tailwind",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -11,10 +11,11 @@
|
|
|
11
11
|
}
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"clases": "
|
|
14
|
+
"clases": "latest"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "tsup src/index.ts --format cjs,esm --dts --clean",
|
|
18
|
-
"dev": "tsup src/index.ts --format cjs,esm --dts --watch"
|
|
18
|
+
"dev": "tsup src/index.ts --format cjs,esm --dts --watch",
|
|
19
|
+
"postinstall": "node scripts/init.js"
|
|
19
20
|
}
|
|
20
21
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Configuration object containing default prefixes for Tailwind CSS.
|
|
6
6
|
* * Use this to maintain consistency between your class utility and
|
|
7
7
|
* Tailwind's variant system.
|
|
8
|
-
*
|
|
8
|
+
* @example
|
|
9
9
|
* // Accessing a specific prefix
|
|
10
10
|
* const basePrefix = tailwindPlugin.prefix;
|
|
11
11
|
*/
|
|
@@ -93,21 +93,5 @@ export const tailwindPlugin = {
|
|
|
93
93
|
ltr: 'ltr'
|
|
94
94
|
};
|
|
95
95
|
|
|
96
|
-
/**
|
|
97
|
-
* Generates an optimized Tailwind CSS class string.
|
|
98
|
-
* Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).
|
|
99
|
-
* * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.
|
|
100
|
-
* @returns A clean string of resulting classes without duplicates or conflicts.
|
|
101
|
-
* * @example
|
|
102
|
-
* // Basic usage
|
|
103
|
-
* tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'
|
|
104
|
-
* * // Using objects
|
|
105
|
-
* tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'
|
|
106
|
-
*/
|
|
107
|
-
const twcl = createCl(tailwindPlugin);
|
|
108
|
-
|
|
109
|
-
export {twcl,twcl as tw};
|
|
110
|
-
|
|
111
|
-
|
|
112
96
|
// Export the type so users can use it in their component props
|
|
113
97
|
export type TailwindKey = keyof typeof tailwindPlugin;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
|
|
4
|
+
const projectRoot = process.env.INIT_CWD || path.resolve('../../');
|
|
5
|
+
const hasSrc = fs.existsSync(path.join(projectRoot, 'src'));
|
|
6
|
+
const targetDir = hasSrc ? path.join(projectRoot, 'src') : projectRoot;
|
|
7
|
+
const configPath = path.join(targetDir, 'clases.config.ts');
|
|
8
|
+
|
|
9
|
+
const tailwindTemplate = `import { createCl } from 'clases';
|
|
10
|
+
import { tailwindRegistry } from 'clases-tailwind';
|
|
11
|
+
|
|
12
|
+
// Instancia configurada para Tailwind CSS
|
|
13
|
+
export const tw = createCl(tailwindRegistry);
|
|
14
|
+
`;
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
// En este caso, SIEMPRE queremos que si instalan clases-tailwind,
|
|
18
|
+
// el archivo tenga la configuración de Tailwind.
|
|
19
|
+
fs.writeFileSync(configPath, tailwindTemplate, 'utf8');
|
|
20
|
+
console.log(
|
|
21
|
+
'\x1b[32m%s\x1b[0m',
|
|
22
|
+
' [clases-tailwind] Configuración vinculada con éxito en ' + (hasSrc ? 'src/' : './')
|
|
23
|
+
);
|
|
24
|
+
} catch (err) {
|
|
25
|
+
console.log(' [clases-tailwind] Aviso: No se pudo auto-configurar el archivo.');
|
|
26
|
+
}
|
package/src/index.test.ts
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect } from 'vitest';
|
|
2
|
-
import { cl } from './index';
|
|
3
|
-
|
|
4
|
-
describe('cl utility (Tailwind version)', () => {
|
|
5
|
-
it('debe procesar clases base (sin prefijo)', () => {
|
|
6
|
-
const result = cl({ base: 'p-4 bg-red-500' });
|
|
7
|
-
expect(result).toBe('p-4 bg-red-500');
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
it('debe aplicar prefijos simples de Tailwind', () => {
|
|
11
|
-
const result = cl({
|
|
12
|
-
base: 'text-black',
|
|
13
|
-
md: 'text-lg',
|
|
14
|
-
hover: 'text-blue-500'
|
|
15
|
-
});
|
|
16
|
-
expect(result).toContain('text-black');
|
|
17
|
-
expect(result).toContain('md:text-lg');
|
|
18
|
-
expect(result).toContain('hover:text-blue-500');
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
it('debe manejar arrays de clases en los prefijos', () => {
|
|
22
|
-
const result = cl({
|
|
23
|
-
base: ['p-4', 'm-2'],
|
|
24
|
-
lg: ['flex', 'items-center']
|
|
25
|
-
});
|
|
26
|
-
expect(result).toBe('p-4 m-2 lg:flex lg:items-center');
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
it('debe limpiar clases conflictivas usando tailwind-merge', () => {
|
|
30
|
-
// Aquí p-4 y p-8 chocan, debería ganar p-8
|
|
31
|
-
const result = cl('p-4', { base: 'p-8' });
|
|
32
|
-
expect(result).toBe('p-8');
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
it('debe ignorar valores falsy (condicionales)', () => {
|
|
36
|
-
const isError = false;
|
|
37
|
-
const result = cl({
|
|
38
|
-
base: 'p-4',
|
|
39
|
-
md: isError && 'bg-red-500'
|
|
40
|
-
});
|
|
41
|
-
expect(result).toBe('p-4');
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
it('debe funcionar con prefijos custom no definidos (fallback)', () => {
|
|
45
|
-
const result = cl({
|
|
46
|
-
'data-active': 'opacity-100'
|
|
47
|
-
});
|
|
48
|
-
expect(result).toBe('data-active:opacity-100');
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
it('debe manejar el alias especial "group"', () => {
|
|
52
|
-
const result = cl({
|
|
53
|
-
group: 'opacity-50'
|
|
54
|
-
});
|
|
55
|
-
expect(result).toBe('group-hover:opacity-50');
|
|
56
|
-
});
|
|
57
|
-
});
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
// packages/tailwind/src/test/tailwind.test.ts
|
|
2
|
-
import { describe, it, expect } from 'vitest';
|
|
3
|
-
import { twcl, tailwindPlugin } from '../index';
|
|
4
|
-
|
|
5
|
-
describe('Tailwind Plugin Integration', () => {
|
|
6
|
-
it('should work out of the box with tailwind presets', () => {
|
|
7
|
-
const result = twcl({
|
|
8
|
-
hover: 'opacity-50',
|
|
9
|
-
'2xl': 'container'
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
expect(result).toBe('hover:opacity-50 2xl:container');
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
it('should support the base key for standard classes', () => {
|
|
16
|
-
const result = twcl({
|
|
17
|
-
base: 'flex flex-col',
|
|
18
|
-
md: 'flex-row'
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
expect(result).toBe('flex flex-col md:flex-row');
|
|
22
|
-
});
|
|
23
|
-
});
|