@lukso/web-components 1.51.6 → 1.52.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/{cn-3e29cec8.js → cn-1594f5ba.js} +342 -308
- package/dist/{cn-98077c72.cjs → cn-312c6e88.cjs} +345 -311
- package/dist/components/index.cjs +6 -6
- package/dist/components/index.js +6 -6
- package/dist/components/lukso-button/index.cjs +2656 -75
- package/dist/components/lukso-button/index.d.ts +3 -12
- package/dist/components/lukso-button/index.d.ts.map +1 -1
- package/dist/components/lukso-button/index.js +2656 -75
- package/dist/components/lukso-button/lukso-button.stories.d.ts +4 -0
- package/dist/components/lukso-button/lukso-button.stories.d.ts.map +1 -1
- package/dist/components/lukso-card/index.cjs +5 -5
- package/dist/components/lukso-card/index.js +5 -5
- package/dist/components/lukso-checkbox/index.cjs +1 -1
- package/dist/components/lukso-checkbox/index.js +1 -1
- package/dist/components/lukso-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/index.cjs +2 -2
- package/dist/components/lukso-icon/index.js +2 -2
- package/dist/components/lukso-input/index.cjs +1 -1
- package/dist/components/lukso-input/index.js +1 -1
- package/dist/components/lukso-modal/index.cjs +1 -1
- package/dist/components/lukso-modal/index.js +1 -1
- package/dist/components/lukso-navbar/index.cjs +2 -2
- package/dist/components/lukso-navbar/index.js +2 -2
- package/dist/components/lukso-profile/index.cjs +2 -2
- package/dist/components/lukso-profile/index.js +2 -2
- package/dist/components/lukso-progress/index.cjs +4 -4
- package/dist/components/lukso-progress/index.js +4 -4
- package/dist/components/lukso-sanitize/index.cjs +1 -1
- package/dist/components/lukso-sanitize/index.js +1 -1
- package/dist/components/lukso-search/index.cjs +3 -3
- package/dist/components/lukso-search/index.js +3 -3
- package/dist/components/lukso-select/index.cjs +3 -3
- package/dist/components/lukso-select/index.js +3 -3
- package/dist/components/lukso-share/index.cjs +1 -1
- package/dist/components/lukso-share/index.js +1 -1
- package/dist/components/lukso-switch/index.cjs +2 -2
- package/dist/components/lukso-switch/index.js +2 -2
- package/dist/components/lukso-tag/index.cjs +2 -2
- package/dist/components/lukso-tag/index.js +2 -2
- package/dist/components/lukso-terms/index.cjs +2 -2
- package/dist/components/lukso-terms/index.js +2 -2
- package/dist/components/lukso-test/index.cjs +1 -1
- package/dist/components/lukso-test/index.js +1 -1
- package/dist/components/lukso-tooltip/index.cjs +1 -1
- package/dist/components/lukso-tooltip/index.js +1 -1
- package/dist/components/lukso-username/index.cjs +2 -2
- package/dist/components/lukso-username/index.js +2 -2
- package/dist/components/lukso-wizard/index.cjs +1 -1
- package/dist/components/lukso-wizard/index.js +1 -1
- package/dist/index-35ca0b42.js +39 -0
- package/dist/{index-ee4182e6.js → index-739869da.js} +1 -1
- package/dist/{index-beb7703d.cjs → index-ace51f33.cjs} +1 -1
- package/dist/index-f426e548.cjs +46 -0
- package/dist/index.cjs +6 -6
- package/dist/index.js +6 -6
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-671a0511.cjs → style-map-1175c018.cjs} +1 -1
- package/dist/{style-map-5be28c06.js → style-map-17f918a2.js} +1 -1
- package/dist/styles/main.css +1 -1
- package/dist/{color-palette.cjs → tailwind-config.cjs} +101 -0
- package/dist/tailwind-config.d.ts +136 -0
- package/dist/tailwind-config.d.ts.map +1 -0
- package/{tools/color-palette-18dd9e2f.cjs → dist/tailwind-config.js} +95 -7
- package/package.json +8 -5
- package/tailwind.config.cjs +8 -118
- package/tools/cn.cjs +341 -307
- package/tools/cn.d.ts.map +1 -1
- package/tools/cn.js +341 -307
- package/tools/index.cjs +13 -6
- package/tools/index.d.ts +1 -1
- package/tools/index.d.ts.map +1 -1
- package/tools/index.js +1 -1
- package/tools/sass/fonts.scss +1 -1
- package/tools/styles/main.css +1 -1
- package/tools/{color-palette-2786d7c1.js → tailwind-config-0df99c97.js} +95 -1
- package/{dist/color-palette.js → tools/tailwind-config-f8a808f6.cjs} +108 -1
- package/tools/tailwind-config.cjs +19 -0
- package/tools/tailwind-config.d.ts +136 -0
- package/tools/tailwind-config.d.ts.map +1 -0
- package/tools/tailwind-config.js +1 -0
- package/dist/color-palette.d.ts +0 -42
- package/dist/color-palette.d.ts.map +0 -1
- package/dist/index-04d11436.js +0 -39
- package/dist/index-997f3f0e.cjs +0 -46
- package/tools/color-palette.cjs +0 -12
- package/tools/color-palette.d.ts +0 -42
- package/tools/color-palette.d.ts.map +0 -1
- package/tools/color-palette.js +0 -1
package/tools/cn.cjs
CHANGED
|
@@ -2,55 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
|
|
7
|
-
*
|
|
8
|
-
* Specifically:
|
|
9
|
-
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
|
|
10
|
-
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
|
|
11
|
-
*
|
|
12
|
-
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
13
|
-
*/
|
|
14
|
-
function twJoin() {
|
|
15
|
-
var index = 0;
|
|
16
|
-
var argument;
|
|
17
|
-
var resolvedValue;
|
|
18
|
-
var string = '';
|
|
19
|
-
while (index < arguments.length) {
|
|
20
|
-
if (argument = arguments[index++]) {
|
|
21
|
-
if (resolvedValue = toValue(argument)) {
|
|
22
|
-
string && (string += ' ');
|
|
23
|
-
string += resolvedValue;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
return string;
|
|
28
|
-
}
|
|
29
|
-
function toValue(mix) {
|
|
30
|
-
if (typeof mix === 'string') {
|
|
31
|
-
return mix;
|
|
32
|
-
}
|
|
33
|
-
var resolvedValue;
|
|
34
|
-
var string = '';
|
|
35
|
-
for (var k = 0; k < mix.length; k++) {
|
|
36
|
-
if (mix[k]) {
|
|
37
|
-
if (resolvedValue = toValue(mix[k])) {
|
|
38
|
-
string && (string += ' ');
|
|
39
|
-
string += resolvedValue;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
return string;
|
|
44
|
-
}
|
|
5
|
+
const tailwindConfig = require('./tailwind-config-f8a808f6.cjs');
|
|
45
6
|
|
|
46
|
-
|
|
7
|
+
const CLASS_PART_SEPARATOR = '-';
|
|
47
8
|
function createClassUtils(config) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
conflictingClassGroupModifiers
|
|
9
|
+
const classMap = createClassMap(config);
|
|
10
|
+
const {
|
|
11
|
+
conflictingClassGroups,
|
|
12
|
+
conflictingClassGroupModifiers
|
|
13
|
+
} = config;
|
|
52
14
|
function getClassGroupId(className) {
|
|
53
|
-
|
|
15
|
+
const classParts = className.split(CLASS_PART_SEPARATOR);
|
|
54
16
|
// Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
|
|
55
17
|
if (classParts[0] === '' && classParts.length !== 1) {
|
|
56
18
|
classParts.shift();
|
|
@@ -58,41 +20,40 @@ function createClassUtils(config) {
|
|
|
58
20
|
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
|
|
59
21
|
}
|
|
60
22
|
function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) {
|
|
61
|
-
|
|
23
|
+
const conflicts = conflictingClassGroups[classGroupId] || [];
|
|
62
24
|
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
|
|
63
|
-
return [
|
|
25
|
+
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
|
|
64
26
|
}
|
|
65
27
|
return conflicts;
|
|
66
28
|
}
|
|
67
29
|
return {
|
|
68
|
-
getClassGroupId
|
|
69
|
-
getConflictingClassGroupIds
|
|
30
|
+
getClassGroupId,
|
|
31
|
+
getConflictingClassGroupIds
|
|
70
32
|
};
|
|
71
33
|
}
|
|
72
34
|
function getGroupRecursive(classParts, classPartObject) {
|
|
73
35
|
if (classParts.length === 0) {
|
|
74
36
|
return classPartObject.classGroupId;
|
|
75
37
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
38
|
+
const currentClassPart = classParts[0];
|
|
39
|
+
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
|
|
40
|
+
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
|
|
79
41
|
if (classGroupFromNextClassPart) {
|
|
80
42
|
return classGroupFromNextClassPart;
|
|
81
43
|
}
|
|
82
44
|
if (classPartObject.validators.length === 0) {
|
|
83
45
|
return undefined;
|
|
84
46
|
}
|
|
85
|
-
|
|
86
|
-
return classPartObject.validators.find(
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
})?.classGroupId;
|
|
47
|
+
const classRest = classParts.join(CLASS_PART_SEPARATOR);
|
|
48
|
+
return classPartObject.validators.find(({
|
|
49
|
+
validator
|
|
50
|
+
}) => validator(classRest))?.classGroupId;
|
|
90
51
|
}
|
|
91
|
-
|
|
52
|
+
const arbitraryPropertyRegex = /^\[(.+)\]$/;
|
|
92
53
|
function getGroupIdForArbitraryProperty(className) {
|
|
93
54
|
if (arbitraryPropertyRegex.test(className)) {
|
|
94
|
-
|
|
95
|
-
|
|
55
|
+
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
|
|
56
|
+
const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
|
|
96
57
|
if (property) {
|
|
97
58
|
// I use two dots here because one dot is used as prefix for class groups in plugins
|
|
98
59
|
return 'arbitrary..' + property;
|
|
@@ -103,24 +64,24 @@ function getGroupIdForArbitraryProperty(className) {
|
|
|
103
64
|
* Exported for testing only
|
|
104
65
|
*/
|
|
105
66
|
function createClassMap(config) {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
67
|
+
const {
|
|
68
|
+
theme,
|
|
69
|
+
prefix
|
|
70
|
+
} = config;
|
|
71
|
+
const classMap = {
|
|
109
72
|
nextPart: new Map(),
|
|
110
73
|
validators: []
|
|
111
74
|
};
|
|
112
|
-
|
|
113
|
-
prefixedClassGroupEntries.forEach(
|
|
114
|
-
var classGroupId = _ref2[0],
|
|
115
|
-
classGroup = _ref2[1];
|
|
75
|
+
const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
|
|
76
|
+
prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
|
|
116
77
|
processClassesRecursively(classGroup, classMap, classGroupId, theme);
|
|
117
78
|
});
|
|
118
79
|
return classMap;
|
|
119
80
|
}
|
|
120
81
|
function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
|
|
121
|
-
classGroup.forEach(
|
|
82
|
+
classGroup.forEach(classDefinition => {
|
|
122
83
|
if (typeof classDefinition === 'string') {
|
|
123
|
-
|
|
84
|
+
const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
|
|
124
85
|
classPartObjectToEdit.classGroupId = classGroupId;
|
|
125
86
|
return;
|
|
126
87
|
}
|
|
@@ -131,20 +92,18 @@ function processClassesRecursively(classGroup, classPartObject, classGroupId, th
|
|
|
131
92
|
}
|
|
132
93
|
classPartObject.validators.push({
|
|
133
94
|
validator: classDefinition,
|
|
134
|
-
classGroupId
|
|
95
|
+
classGroupId
|
|
135
96
|
});
|
|
136
97
|
return;
|
|
137
98
|
}
|
|
138
|
-
Object.entries(classDefinition).forEach(
|
|
139
|
-
var key = _ref3[0],
|
|
140
|
-
classGroup = _ref3[1];
|
|
99
|
+
Object.entries(classDefinition).forEach(([key, classGroup]) => {
|
|
141
100
|
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
|
|
142
101
|
});
|
|
143
102
|
});
|
|
144
103
|
}
|
|
145
104
|
function getPart(classPartObject, path) {
|
|
146
|
-
|
|
147
|
-
path.split(CLASS_PART_SEPARATOR).forEach(
|
|
105
|
+
let currentClassPartObject = classPartObject;
|
|
106
|
+
path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
|
|
148
107
|
if (!currentClassPartObject.nextPart.has(pathPart)) {
|
|
149
108
|
currentClassPartObject.nextPart.set(pathPart, {
|
|
150
109
|
nextPart: new Map(),
|
|
@@ -162,19 +121,13 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
|
|
|
162
121
|
if (!prefix) {
|
|
163
122
|
return classGroupEntries;
|
|
164
123
|
}
|
|
165
|
-
return classGroupEntries.map(
|
|
166
|
-
|
|
167
|
-
classGroup = _ref4[1];
|
|
168
|
-
var prefixedClassGroup = classGroup.map(function (classDefinition) {
|
|
124
|
+
return classGroupEntries.map(([classGroupId, classGroup]) => {
|
|
125
|
+
const prefixedClassGroup = classGroup.map(classDefinition => {
|
|
169
126
|
if (typeof classDefinition === 'string') {
|
|
170
127
|
return prefix + classDefinition;
|
|
171
128
|
}
|
|
172
129
|
if (typeof classDefinition === 'object') {
|
|
173
|
-
return Object.fromEntries(Object.entries(classDefinition).map(
|
|
174
|
-
var key = _ref5[0],
|
|
175
|
-
value = _ref5[1];
|
|
176
|
-
return [prefix + key, value];
|
|
177
|
-
}));
|
|
130
|
+
return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
|
|
178
131
|
}
|
|
179
132
|
return classDefinition;
|
|
180
133
|
});
|
|
@@ -186,15 +139,13 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
|
|
|
186
139
|
function createLruCache(maxCacheSize) {
|
|
187
140
|
if (maxCacheSize < 1) {
|
|
188
141
|
return {
|
|
189
|
-
get:
|
|
190
|
-
|
|
191
|
-
},
|
|
192
|
-
set: function set() {}
|
|
142
|
+
get: () => undefined,
|
|
143
|
+
set: () => {}
|
|
193
144
|
};
|
|
194
145
|
}
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
146
|
+
let cacheSize = 0;
|
|
147
|
+
let cache = new Map();
|
|
148
|
+
let previousCache = new Map();
|
|
198
149
|
function update(key, value) {
|
|
199
150
|
cache.set(key, value);
|
|
200
151
|
cacheSize++;
|
|
@@ -205,8 +156,8 @@ function createLruCache(maxCacheSize) {
|
|
|
205
156
|
}
|
|
206
157
|
}
|
|
207
158
|
return {
|
|
208
|
-
get
|
|
209
|
-
|
|
159
|
+
get(key) {
|
|
160
|
+
let value = cache.get(key);
|
|
210
161
|
if (value !== undefined) {
|
|
211
162
|
return value;
|
|
212
163
|
}
|
|
@@ -215,7 +166,7 @@ function createLruCache(maxCacheSize) {
|
|
|
215
166
|
return value;
|
|
216
167
|
}
|
|
217
168
|
},
|
|
218
|
-
set
|
|
169
|
+
set(key, value) {
|
|
219
170
|
if (cache.has(key)) {
|
|
220
171
|
cache.set(key, value);
|
|
221
172
|
} else {
|
|
@@ -224,21 +175,20 @@ function createLruCache(maxCacheSize) {
|
|
|
224
175
|
}
|
|
225
176
|
};
|
|
226
177
|
}
|
|
227
|
-
|
|
228
|
-
var IMPORTANT_MODIFIER = '!';
|
|
178
|
+
const IMPORTANT_MODIFIER = '!';
|
|
229
179
|
function createSplitModifiers(config) {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
180
|
+
const separator = config.separator;
|
|
181
|
+
const isSeparatorSingleCharacter = separator.length === 1;
|
|
182
|
+
const firstSeparatorCharacter = separator[0];
|
|
183
|
+
const separatorLength = separator.length;
|
|
234
184
|
// splitModifiers inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
|
|
235
185
|
return function splitModifiers(className) {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
for (
|
|
241
|
-
|
|
186
|
+
const modifiers = [];
|
|
187
|
+
let bracketDepth = 0;
|
|
188
|
+
let modifierStart = 0;
|
|
189
|
+
let postfixModifierPosition;
|
|
190
|
+
for (let index = 0; index < className.length; index++) {
|
|
191
|
+
let currentCharacter = className[index];
|
|
242
192
|
if (bracketDepth === 0) {
|
|
243
193
|
if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
|
|
244
194
|
modifiers.push(className.slice(modifierStart, index));
|
|
@@ -256,15 +206,15 @@ function createSplitModifiers(config) {
|
|
|
256
206
|
bracketDepth--;
|
|
257
207
|
}
|
|
258
208
|
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
209
|
+
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
|
|
210
|
+
const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
|
|
211
|
+
const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
|
|
212
|
+
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
|
|
263
213
|
return {
|
|
264
|
-
modifiers
|
|
265
|
-
hasImportantModifier
|
|
266
|
-
baseClassName
|
|
267
|
-
maybePostfixModifierPosition
|
|
214
|
+
modifiers,
|
|
215
|
+
hasImportantModifier,
|
|
216
|
+
baseClassName,
|
|
217
|
+
maybePostfixModifierPosition
|
|
268
218
|
};
|
|
269
219
|
};
|
|
270
220
|
}
|
|
@@ -277,21 +227,20 @@ function sortModifiers(modifiers) {
|
|
|
277
227
|
if (modifiers.length <= 1) {
|
|
278
228
|
return modifiers;
|
|
279
229
|
}
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
modifiers.forEach(
|
|
283
|
-
|
|
230
|
+
const sortedModifiers = [];
|
|
231
|
+
let unsortedModifiers = [];
|
|
232
|
+
modifiers.forEach(modifier => {
|
|
233
|
+
const isArbitraryVariant = modifier[0] === '[';
|
|
284
234
|
if (isArbitraryVariant) {
|
|
285
|
-
sortedModifiers.push
|
|
235
|
+
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
|
|
286
236
|
unsortedModifiers = [];
|
|
287
237
|
} else {
|
|
288
238
|
unsortedModifiers.push(modifier);
|
|
289
239
|
}
|
|
290
240
|
});
|
|
291
|
-
sortedModifiers.push
|
|
241
|
+
sortedModifiers.push(...unsortedModifiers.sort());
|
|
292
242
|
return sortedModifiers;
|
|
293
243
|
}
|
|
294
|
-
|
|
295
244
|
function createConfigUtils(config) {
|
|
296
245
|
return {
|
|
297
246
|
cache: createLruCache(config.cacheSize),
|
|
@@ -299,12 +248,13 @@ function createConfigUtils(config) {
|
|
|
299
248
|
...createClassUtils(config)
|
|
300
249
|
};
|
|
301
250
|
}
|
|
302
|
-
|
|
303
|
-
var SPLIT_CLASSES_REGEX = /\s+/;
|
|
251
|
+
const SPLIT_CLASSES_REGEX = /\s+/;
|
|
304
252
|
function mergeClassList(classList, configUtils) {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
253
|
+
const {
|
|
254
|
+
splitModifiers,
|
|
255
|
+
getClassGroupId,
|
|
256
|
+
getConflictingClassGroupIds
|
|
257
|
+
} = configUtils;
|
|
308
258
|
/**
|
|
309
259
|
* Set of classGroupIds in following format:
|
|
310
260
|
* `{importantModifier}{variantModifiers}{classGroupId}`
|
|
@@ -312,77 +262,109 @@ function mergeClassList(classList, configUtils) {
|
|
|
312
262
|
* @example 'hover:focus:bg-color'
|
|
313
263
|
* @example 'md:!pr'
|
|
314
264
|
*/
|
|
315
|
-
|
|
316
|
-
return classList.trim().split(SPLIT_CLASSES_REGEX).map(
|
|
317
|
-
|
|
318
|
-
modifiers
|
|
319
|
-
hasImportantModifier
|
|
320
|
-
baseClassName
|
|
321
|
-
maybePostfixModifierPosition
|
|
322
|
-
|
|
323
|
-
|
|
265
|
+
const classGroupsInConflict = new Set();
|
|
266
|
+
return classList.trim().split(SPLIT_CLASSES_REGEX).map(originalClassName => {
|
|
267
|
+
const {
|
|
268
|
+
modifiers,
|
|
269
|
+
hasImportantModifier,
|
|
270
|
+
baseClassName,
|
|
271
|
+
maybePostfixModifierPosition
|
|
272
|
+
} = splitModifiers(originalClassName);
|
|
273
|
+
let classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
|
|
274
|
+
let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
|
|
324
275
|
if (!classGroupId) {
|
|
325
276
|
if (!maybePostfixModifierPosition) {
|
|
326
277
|
return {
|
|
327
278
|
isTailwindClass: false,
|
|
328
|
-
originalClassName
|
|
279
|
+
originalClassName
|
|
329
280
|
};
|
|
330
281
|
}
|
|
331
282
|
classGroupId = getClassGroupId(baseClassName);
|
|
332
283
|
if (!classGroupId) {
|
|
333
284
|
return {
|
|
334
285
|
isTailwindClass: false,
|
|
335
|
-
originalClassName
|
|
286
|
+
originalClassName
|
|
336
287
|
};
|
|
337
288
|
}
|
|
338
289
|
hasPostfixModifier = false;
|
|
339
290
|
}
|
|
340
|
-
|
|
341
|
-
|
|
291
|
+
const variantModifier = sortModifiers(modifiers).join(':');
|
|
292
|
+
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
|
|
342
293
|
return {
|
|
343
294
|
isTailwindClass: true,
|
|
344
|
-
modifierId
|
|
345
|
-
classGroupId
|
|
346
|
-
originalClassName
|
|
347
|
-
hasPostfixModifier
|
|
295
|
+
modifierId,
|
|
296
|
+
classGroupId,
|
|
297
|
+
originalClassName,
|
|
298
|
+
hasPostfixModifier
|
|
348
299
|
};
|
|
349
300
|
}).reverse()
|
|
350
301
|
// Last class in conflict wins, so we need to filter conflicting classes in reverse order.
|
|
351
|
-
.filter(
|
|
302
|
+
.filter(parsed => {
|
|
352
303
|
if (!parsed.isTailwindClass) {
|
|
353
304
|
return true;
|
|
354
305
|
}
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
306
|
+
const {
|
|
307
|
+
modifierId,
|
|
308
|
+
classGroupId,
|
|
309
|
+
hasPostfixModifier
|
|
310
|
+
} = parsed;
|
|
311
|
+
const classId = modifierId + classGroupId;
|
|
359
312
|
if (classGroupsInConflict.has(classId)) {
|
|
360
313
|
return false;
|
|
361
314
|
}
|
|
362
315
|
classGroupsInConflict.add(classId);
|
|
363
|
-
getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(
|
|
364
|
-
return classGroupsInConflict.add(modifierId + group);
|
|
365
|
-
});
|
|
316
|
+
getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(group => classGroupsInConflict.add(modifierId + group));
|
|
366
317
|
return true;
|
|
367
|
-
}).reverse().map(
|
|
368
|
-
return parsed.originalClassName;
|
|
369
|
-
}).join(' ');
|
|
318
|
+
}).reverse().map(parsed => parsed.originalClassName).join(' ');
|
|
370
319
|
}
|
|
371
320
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
321
|
+
/**
|
|
322
|
+
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
|
|
323
|
+
*
|
|
324
|
+
* Specifically:
|
|
325
|
+
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
|
|
326
|
+
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
|
|
327
|
+
*
|
|
328
|
+
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
329
|
+
*/
|
|
330
|
+
function twJoin() {
|
|
331
|
+
let index = 0;
|
|
332
|
+
let argument;
|
|
333
|
+
let resolvedValue;
|
|
334
|
+
let string = '';
|
|
335
|
+
while (index < arguments.length) {
|
|
336
|
+
if (argument = arguments[index++]) {
|
|
337
|
+
if (resolvedValue = toValue(argument)) {
|
|
338
|
+
string && (string += ' ');
|
|
339
|
+
string += resolvedValue;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
375
342
|
}
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
343
|
+
return string;
|
|
344
|
+
}
|
|
345
|
+
function toValue(mix) {
|
|
346
|
+
if (typeof mix === 'string') {
|
|
347
|
+
return mix;
|
|
348
|
+
}
|
|
349
|
+
let resolvedValue;
|
|
350
|
+
let string = '';
|
|
351
|
+
for (let k = 0; k < mix.length; k++) {
|
|
352
|
+
if (mix[k]) {
|
|
353
|
+
if (resolvedValue = toValue(mix[k])) {
|
|
354
|
+
string && (string += ' ');
|
|
355
|
+
string += resolvedValue;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
return string;
|
|
360
|
+
}
|
|
361
|
+
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
|
|
362
|
+
let configUtils;
|
|
363
|
+
let cacheGet;
|
|
364
|
+
let cacheSet;
|
|
365
|
+
let functionToCall = initTailwindMerge;
|
|
380
366
|
function initTailwindMerge(classList) {
|
|
381
|
-
|
|
382
|
-
restCreateConfig = createConfig.slice(1);
|
|
383
|
-
var config = restCreateConfig.reduce(function (previousConfig, createConfigCurrent) {
|
|
384
|
-
return createConfigCurrent(previousConfig);
|
|
385
|
-
}, firstCreateConfig());
|
|
367
|
+
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
|
|
386
368
|
configUtils = createConfigUtils(config);
|
|
387
369
|
cacheGet = configUtils.cache.get;
|
|
388
370
|
cacheSet = configUtils.cache.set;
|
|
@@ -390,11 +372,11 @@ function createTailwindMerge() {
|
|
|
390
372
|
return tailwindMerge(classList);
|
|
391
373
|
}
|
|
392
374
|
function tailwindMerge(classList) {
|
|
393
|
-
|
|
375
|
+
const cachedResult = cacheGet(classList);
|
|
394
376
|
if (cachedResult) {
|
|
395
377
|
return cachedResult;
|
|
396
378
|
}
|
|
397
|
-
|
|
379
|
+
const result = mergeClassList(classList, configUtils);
|
|
398
380
|
cacheSet(classList, result);
|
|
399
381
|
return result;
|
|
400
382
|
}
|
|
@@ -402,66 +384,65 @@ function createTailwindMerge() {
|
|
|
402
384
|
return functionToCall(twJoin.apply(null, arguments));
|
|
403
385
|
};
|
|
404
386
|
}
|
|
405
|
-
|
|
406
387
|
function fromTheme(key) {
|
|
407
|
-
|
|
408
|
-
return theme[key] || [];
|
|
409
|
-
};
|
|
388
|
+
const themeGetter = theme => theme[key] || [];
|
|
410
389
|
themeGetter.isThemeGetter = true;
|
|
411
390
|
return themeGetter;
|
|
412
391
|
}
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
|
|
392
|
+
const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
|
|
393
|
+
const fractionRegex = /^\d+\/\d+$/;
|
|
394
|
+
const stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']);
|
|
395
|
+
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
|
|
396
|
+
const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
|
|
419
397
|
// Shadow always begins with x and y offset separated by underscore
|
|
420
|
-
|
|
398
|
+
const shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
|
|
399
|
+
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
|
|
421
400
|
function isLength(value) {
|
|
422
|
-
return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value)
|
|
401
|
+
return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
|
|
423
402
|
}
|
|
424
403
|
function isArbitraryLength(value) {
|
|
425
404
|
return getIsArbitraryValue(value, 'length', isLengthOnly);
|
|
426
405
|
}
|
|
427
|
-
function
|
|
428
|
-
return
|
|
429
|
-
}
|
|
430
|
-
function isArbitraryPosition(value) {
|
|
431
|
-
return getIsArbitraryValue(value, 'position', isNever);
|
|
432
|
-
}
|
|
433
|
-
function isArbitraryUrl(value) {
|
|
434
|
-
return getIsArbitraryValue(value, 'url', isUrl);
|
|
406
|
+
function isNumber(value) {
|
|
407
|
+
return Boolean(value) && !Number.isNaN(Number(value));
|
|
435
408
|
}
|
|
436
409
|
function isArbitraryNumber(value) {
|
|
437
410
|
return getIsArbitraryValue(value, 'number', isNumber);
|
|
438
411
|
}
|
|
439
|
-
function
|
|
440
|
-
return
|
|
412
|
+
function isInteger(value) {
|
|
413
|
+
return Boolean(value) && Number.isInteger(Number(value));
|
|
441
414
|
}
|
|
442
415
|
function isPercent(value) {
|
|
443
416
|
return value.endsWith('%') && isNumber(value.slice(0, -1));
|
|
444
417
|
}
|
|
445
|
-
function isInteger(value) {
|
|
446
|
-
return isIntegerOnly(value) || getIsArbitraryValue(value, 'number', isIntegerOnly);
|
|
447
|
-
}
|
|
448
418
|
function isArbitraryValue(value) {
|
|
449
419
|
return arbitraryValueRegex.test(value);
|
|
450
420
|
}
|
|
451
|
-
function isAny() {
|
|
452
|
-
return true;
|
|
453
|
-
}
|
|
454
421
|
function isTshirtSize(value) {
|
|
455
422
|
return tshirtUnitRegex.test(value);
|
|
456
423
|
}
|
|
424
|
+
const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
|
|
425
|
+
function isArbitrarySize(value) {
|
|
426
|
+
return getIsArbitraryValue(value, sizeLabels, isNever);
|
|
427
|
+
}
|
|
428
|
+
function isArbitraryPosition(value) {
|
|
429
|
+
return getIsArbitraryValue(value, 'position', isNever);
|
|
430
|
+
}
|
|
431
|
+
const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
|
|
432
|
+
function isArbitraryImage(value) {
|
|
433
|
+
return getIsArbitraryValue(value, imageLabels, isImage);
|
|
434
|
+
}
|
|
457
435
|
function isArbitraryShadow(value) {
|
|
458
436
|
return getIsArbitraryValue(value, '', isShadow);
|
|
459
437
|
}
|
|
438
|
+
function isAny() {
|
|
439
|
+
return true;
|
|
440
|
+
}
|
|
460
441
|
function getIsArbitraryValue(value, label, testValue) {
|
|
461
|
-
|
|
442
|
+
const result = arbitraryValueRegex.exec(value);
|
|
462
443
|
if (result) {
|
|
463
444
|
if (result[1]) {
|
|
464
|
-
return result[1] === label;
|
|
445
|
+
return typeof label === 'string' ? result[1] === label : label.has(result[1]);
|
|
465
446
|
}
|
|
466
447
|
return testValue(result[2]);
|
|
467
448
|
}
|
|
@@ -473,95 +454,64 @@ function isLengthOnly(value) {
|
|
|
473
454
|
function isNever() {
|
|
474
455
|
return false;
|
|
475
456
|
}
|
|
476
|
-
function isUrl(value) {
|
|
477
|
-
return value.startsWith('url(');
|
|
478
|
-
}
|
|
479
|
-
function isIntegerOnly(value) {
|
|
480
|
-
return Number.isInteger(Number(value));
|
|
481
|
-
}
|
|
482
457
|
function isShadow(value) {
|
|
483
458
|
return shadowRegex.test(value);
|
|
484
459
|
}
|
|
485
|
-
|
|
460
|
+
function isImage(value) {
|
|
461
|
+
return imageRegex.test(value);
|
|
462
|
+
}
|
|
486
463
|
function getDefaultConfig() {
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
};
|
|
527
|
-
var getNumberWithAutoAndArbitrary = function getNumberWithAutoAndArbitrary() {
|
|
528
|
-
return ['auto', isNumber, isArbitraryValue];
|
|
529
|
-
};
|
|
530
|
-
var getPositions = function getPositions() {
|
|
531
|
-
return ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
|
|
532
|
-
};
|
|
533
|
-
var getLineStyles = function getLineStyles() {
|
|
534
|
-
return ['solid', 'dashed', 'dotted', 'double', 'none'];
|
|
535
|
-
};
|
|
536
|
-
var getBlendModes = function getBlendModes() {
|
|
537
|
-
return ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
|
|
538
|
-
};
|
|
539
|
-
var getAlign = function getAlign() {
|
|
540
|
-
return ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'];
|
|
541
|
-
};
|
|
542
|
-
var getZeroAndEmpty = function getZeroAndEmpty() {
|
|
543
|
-
return ['', '0', isArbitraryValue];
|
|
544
|
-
};
|
|
545
|
-
var getBreaks = function getBreaks() {
|
|
546
|
-
return ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
|
|
547
|
-
};
|
|
548
|
-
var getNumber = function getNumber() {
|
|
549
|
-
return [isNumber, isArbitraryNumber];
|
|
550
|
-
};
|
|
551
|
-
var getNumberAndArbitrary = function getNumberAndArbitrary() {
|
|
552
|
-
return [isNumber, isArbitraryValue];
|
|
553
|
-
};
|
|
464
|
+
const colors = fromTheme('colors');
|
|
465
|
+
const spacing = fromTheme('spacing');
|
|
466
|
+
const blur = fromTheme('blur');
|
|
467
|
+
const brightness = fromTheme('brightness');
|
|
468
|
+
const borderColor = fromTheme('borderColor');
|
|
469
|
+
const borderRadius = fromTheme('borderRadius');
|
|
470
|
+
const borderSpacing = fromTheme('borderSpacing');
|
|
471
|
+
const borderWidth = fromTheme('borderWidth');
|
|
472
|
+
const contrast = fromTheme('contrast');
|
|
473
|
+
const grayscale = fromTheme('grayscale');
|
|
474
|
+
const hueRotate = fromTheme('hueRotate');
|
|
475
|
+
const invert = fromTheme('invert');
|
|
476
|
+
const gap = fromTheme('gap');
|
|
477
|
+
const gradientColorStops = fromTheme('gradientColorStops');
|
|
478
|
+
const gradientColorStopPositions = fromTheme('gradientColorStopPositions');
|
|
479
|
+
const inset = fromTheme('inset');
|
|
480
|
+
const margin = fromTheme('margin');
|
|
481
|
+
const opacity = fromTheme('opacity');
|
|
482
|
+
const padding = fromTheme('padding');
|
|
483
|
+
const saturate = fromTheme('saturate');
|
|
484
|
+
const scale = fromTheme('scale');
|
|
485
|
+
const sepia = fromTheme('sepia');
|
|
486
|
+
const skew = fromTheme('skew');
|
|
487
|
+
const space = fromTheme('space');
|
|
488
|
+
const translate = fromTheme('translate');
|
|
489
|
+
const getOverscroll = () => ['auto', 'contain', 'none'];
|
|
490
|
+
const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
|
|
491
|
+
const getSpacingWithAutoAndArbitrary = () => ['auto', isArbitraryValue, spacing];
|
|
492
|
+
const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
|
|
493
|
+
const getLengthWithEmptyAndArbitrary = () => ['', isLength, isArbitraryLength];
|
|
494
|
+
const getNumberWithAutoAndArbitrary = () => ['auto', isNumber, isArbitraryValue];
|
|
495
|
+
const getPositions = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
|
|
496
|
+
const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'];
|
|
497
|
+
const getBlendModes = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
|
|
498
|
+
const getAlign = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'];
|
|
499
|
+
const getZeroAndEmpty = () => ['', '0', isArbitraryValue];
|
|
500
|
+
const getBreaks = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
|
|
501
|
+
const getNumber = () => [isNumber, isArbitraryNumber];
|
|
502
|
+
const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
|
|
554
503
|
return {
|
|
555
504
|
cacheSize: 500,
|
|
505
|
+
separator: ':',
|
|
556
506
|
theme: {
|
|
557
507
|
colors: [isAny],
|
|
558
|
-
spacing: [isLength],
|
|
508
|
+
spacing: [isLength, isArbitraryLength],
|
|
559
509
|
blur: ['none', '', isTshirtSize, isArbitraryValue],
|
|
560
510
|
brightness: getNumber(),
|
|
561
511
|
borderColor: [colors],
|
|
562
512
|
borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue],
|
|
563
513
|
borderSpacing: getSpacingWithArbitrary(),
|
|
564
|
-
borderWidth:
|
|
514
|
+
borderWidth: getLengthWithEmptyAndArbitrary(),
|
|
565
515
|
contrast: getNumber(),
|
|
566
516
|
grayscale: getZeroAndEmpty(),
|
|
567
517
|
hueRotate: getNumberAndArbitrary(),
|
|
@@ -645,8 +595,8 @@ function getDefaultConfig() {
|
|
|
645
595
|
* Floats
|
|
646
596
|
* @see https://tailwindcss.com/docs/float
|
|
647
597
|
*/
|
|
648
|
-
|
|
649
|
-
|
|
598
|
+
float: [{
|
|
599
|
+
float: ['right', 'left', 'none']
|
|
650
600
|
}],
|
|
651
601
|
/**
|
|
652
602
|
* Clear
|
|
@@ -672,7 +622,7 @@ function getDefaultConfig() {
|
|
|
672
622
|
* @see https://tailwindcss.com/docs/object-position
|
|
673
623
|
*/
|
|
674
624
|
'object-position': [{
|
|
675
|
-
object: [
|
|
625
|
+
object: [...getPositions(), isArbitraryValue]
|
|
676
626
|
}],
|
|
677
627
|
/**
|
|
678
628
|
* Overflow
|
|
@@ -794,7 +744,7 @@ function getDefaultConfig() {
|
|
|
794
744
|
* @see https://tailwindcss.com/docs/z-index
|
|
795
745
|
*/
|
|
796
746
|
z: [{
|
|
797
|
-
z: ['auto', isInteger]
|
|
747
|
+
z: ['auto', isInteger, isArbitraryValue]
|
|
798
748
|
}],
|
|
799
749
|
// Flexbox and Grid
|
|
800
750
|
/**
|
|
@@ -844,7 +794,7 @@ function getDefaultConfig() {
|
|
|
844
794
|
* @see https://tailwindcss.com/docs/order
|
|
845
795
|
*/
|
|
846
796
|
order: [{
|
|
847
|
-
order: ['first', 'last', 'none', isInteger]
|
|
797
|
+
order: ['first', 'last', 'none', isInteger, isArbitraryValue]
|
|
848
798
|
}],
|
|
849
799
|
/**
|
|
850
800
|
* Grid Template Columns
|
|
@@ -859,7 +809,7 @@ function getDefaultConfig() {
|
|
|
859
809
|
*/
|
|
860
810
|
'col-start-end': [{
|
|
861
811
|
col: ['auto', {
|
|
862
|
-
span: ['full', isInteger]
|
|
812
|
+
span: ['full', isInteger, isArbitraryValue]
|
|
863
813
|
}, isArbitraryValue]
|
|
864
814
|
}],
|
|
865
815
|
/**
|
|
@@ -889,7 +839,7 @@ function getDefaultConfig() {
|
|
|
889
839
|
*/
|
|
890
840
|
'row-start-end': [{
|
|
891
841
|
row: ['auto', {
|
|
892
|
-
span: [isInteger]
|
|
842
|
+
span: [isInteger, isArbitraryValue]
|
|
893
843
|
}, isArbitraryValue]
|
|
894
844
|
}],
|
|
895
845
|
/**
|
|
@@ -953,7 +903,7 @@ function getDefaultConfig() {
|
|
|
953
903
|
* @see https://tailwindcss.com/docs/justify-content
|
|
954
904
|
*/
|
|
955
905
|
'justify-content': [{
|
|
956
|
-
justify: ['normal'
|
|
906
|
+
justify: ['normal', ...getAlign()]
|
|
957
907
|
}],
|
|
958
908
|
/**
|
|
959
909
|
* Justify Items
|
|
@@ -974,7 +924,7 @@ function getDefaultConfig() {
|
|
|
974
924
|
* @see https://tailwindcss.com/docs/align-content
|
|
975
925
|
*/
|
|
976
926
|
'align-content': [{
|
|
977
|
-
content: ['normal'
|
|
927
|
+
content: ['normal', ...getAlign(), 'baseline']
|
|
978
928
|
}],
|
|
979
929
|
/**
|
|
980
930
|
* Align Items
|
|
@@ -995,7 +945,7 @@ function getDefaultConfig() {
|
|
|
995
945
|
* @see https://tailwindcss.com/docs/place-content
|
|
996
946
|
*/
|
|
997
947
|
'place-content': [{
|
|
998
|
-
'place-content': [
|
|
948
|
+
'place-content': [...getAlign(), 'baseline']
|
|
999
949
|
}],
|
|
1000
950
|
/**
|
|
1001
951
|
* Place Items
|
|
@@ -1198,7 +1148,7 @@ function getDefaultConfig() {
|
|
|
1198
1148
|
* @see https://tailwindcss.com/docs/min-height
|
|
1199
1149
|
*/
|
|
1200
1150
|
'min-h': [{
|
|
1201
|
-
'min-h': ['min', 'max', 'fit',
|
|
1151
|
+
'min-h': ['min', 'max', 'fit', isLength, isArbitraryValue]
|
|
1202
1152
|
}],
|
|
1203
1153
|
/**
|
|
1204
1154
|
* Max-Height
|
|
@@ -1288,7 +1238,7 @@ function getDefaultConfig() {
|
|
|
1288
1238
|
* @see https://tailwindcss.com/docs/line-height
|
|
1289
1239
|
*/
|
|
1290
1240
|
leading: [{
|
|
1291
|
-
leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose',
|
|
1241
|
+
leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength, isArbitraryValue]
|
|
1292
1242
|
}],
|
|
1293
1243
|
/**
|
|
1294
1244
|
* List Style Image
|
|
@@ -1357,21 +1307,21 @@ function getDefaultConfig() {
|
|
|
1357
1307
|
* @see https://tailwindcss.com/docs/text-decoration-style
|
|
1358
1308
|
*/
|
|
1359
1309
|
'text-decoration-style': [{
|
|
1360
|
-
decoration: [
|
|
1310
|
+
decoration: [...getLineStyles(), 'wavy']
|
|
1361
1311
|
}],
|
|
1362
1312
|
/**
|
|
1363
1313
|
* Text Decoration Thickness
|
|
1364
1314
|
* @see https://tailwindcss.com/docs/text-decoration-thickness
|
|
1365
1315
|
*/
|
|
1366
1316
|
'text-decoration-thickness': [{
|
|
1367
|
-
decoration: ['auto', 'from-font', isLength]
|
|
1317
|
+
decoration: ['auto', 'from-font', isLength, isArbitraryLength]
|
|
1368
1318
|
}],
|
|
1369
1319
|
/**
|
|
1370
1320
|
* Text Underline Offset
|
|
1371
1321
|
* @see https://tailwindcss.com/docs/text-underline-offset
|
|
1372
1322
|
*/
|
|
1373
1323
|
'underline-offset': [{
|
|
1374
|
-
'underline-offset': ['auto',
|
|
1324
|
+
'underline-offset': ['auto', isLength, isArbitraryValue]
|
|
1375
1325
|
}],
|
|
1376
1326
|
/**
|
|
1377
1327
|
* Text Decoration Color
|
|
@@ -1415,8 +1365,8 @@ function getDefaultConfig() {
|
|
|
1415
1365
|
* Word Break
|
|
1416
1366
|
* @see https://tailwindcss.com/docs/word-break
|
|
1417
1367
|
*/
|
|
1418
|
-
|
|
1419
|
-
|
|
1368
|
+
break: [{
|
|
1369
|
+
break: ['normal', 'words', 'all', 'keep']
|
|
1420
1370
|
}],
|
|
1421
1371
|
/**
|
|
1422
1372
|
* Hyphens
|
|
@@ -1467,7 +1417,7 @@ function getDefaultConfig() {
|
|
|
1467
1417
|
* @see https://tailwindcss.com/docs/background-position
|
|
1468
1418
|
*/
|
|
1469
1419
|
'bg-position': [{
|
|
1470
|
-
bg: [
|
|
1420
|
+
bg: [...getPositions(), isArbitraryPosition]
|
|
1471
1421
|
}],
|
|
1472
1422
|
/**
|
|
1473
1423
|
* Background Repeat
|
|
@@ -1492,7 +1442,7 @@ function getDefaultConfig() {
|
|
|
1492
1442
|
'bg-image': [{
|
|
1493
1443
|
bg: ['none', {
|
|
1494
1444
|
'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
|
|
1495
|
-
},
|
|
1445
|
+
}, isArbitraryImage]
|
|
1496
1446
|
}],
|
|
1497
1447
|
/**
|
|
1498
1448
|
* Background Color
|
|
@@ -1724,7 +1674,7 @@ function getDefaultConfig() {
|
|
|
1724
1674
|
* @see https://tailwindcss.com/docs/border-style
|
|
1725
1675
|
*/
|
|
1726
1676
|
'border-style': [{
|
|
1727
|
-
border: [
|
|
1677
|
+
border: [...getLineStyles(), 'hidden']
|
|
1728
1678
|
}],
|
|
1729
1679
|
/**
|
|
1730
1680
|
* Divide Width X
|
|
@@ -1825,21 +1775,21 @@ function getDefaultConfig() {
|
|
|
1825
1775
|
* @see https://tailwindcss.com/docs/outline-style
|
|
1826
1776
|
*/
|
|
1827
1777
|
'outline-style': [{
|
|
1828
|
-
outline: [''
|
|
1778
|
+
outline: ['', ...getLineStyles()]
|
|
1829
1779
|
}],
|
|
1830
1780
|
/**
|
|
1831
1781
|
* Outline Offset
|
|
1832
1782
|
* @see https://tailwindcss.com/docs/outline-offset
|
|
1833
1783
|
*/
|
|
1834
1784
|
'outline-offset': [{
|
|
1835
|
-
'outline-offset': [
|
|
1785
|
+
'outline-offset': [isLength, isArbitraryValue]
|
|
1836
1786
|
}],
|
|
1837
1787
|
/**
|
|
1838
1788
|
* Outline Width
|
|
1839
1789
|
* @see https://tailwindcss.com/docs/outline-width
|
|
1840
1790
|
*/
|
|
1841
1791
|
'outline-w': [{
|
|
1842
|
-
outline: [isLength]
|
|
1792
|
+
outline: [isLength, isArbitraryLength]
|
|
1843
1793
|
}],
|
|
1844
1794
|
/**
|
|
1845
1795
|
* Outline Color
|
|
@@ -1853,7 +1803,7 @@ function getDefaultConfig() {
|
|
|
1853
1803
|
* @see https://tailwindcss.com/docs/ring-width
|
|
1854
1804
|
*/
|
|
1855
1805
|
'ring-w': [{
|
|
1856
|
-
ring:
|
|
1806
|
+
ring: getLengthWithEmptyAndArbitrary()
|
|
1857
1807
|
}],
|
|
1858
1808
|
/**
|
|
1859
1809
|
* Ring Width Inset
|
|
@@ -1879,7 +1829,7 @@ function getDefaultConfig() {
|
|
|
1879
1829
|
* @see https://tailwindcss.com/docs/ring-offset-width
|
|
1880
1830
|
*/
|
|
1881
1831
|
'ring-offset-w': [{
|
|
1882
|
-
'ring-offset': [isLength]
|
|
1832
|
+
'ring-offset': [isLength, isArbitraryLength]
|
|
1883
1833
|
}],
|
|
1884
1834
|
/**
|
|
1885
1835
|
* Ring Offset Color
|
|
@@ -2424,10 +2374,27 @@ function getDefaultConfig() {
|
|
|
2424
2374
|
* @see https://tailwindcss.com/docs/touch-action
|
|
2425
2375
|
*/
|
|
2426
2376
|
touch: [{
|
|
2427
|
-
touch: ['auto', 'none', '
|
|
2428
|
-
|
|
2429
|
-
|
|
2377
|
+
touch: ['auto', 'none', 'manipulation']
|
|
2378
|
+
}],
|
|
2379
|
+
/**
|
|
2380
|
+
* Touch Action X
|
|
2381
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2382
|
+
*/
|
|
2383
|
+
'touch-x': [{
|
|
2384
|
+
'touch-pan': ['x', 'left', 'right']
|
|
2430
2385
|
}],
|
|
2386
|
+
/**
|
|
2387
|
+
* Touch Action Y
|
|
2388
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2389
|
+
*/
|
|
2390
|
+
'touch-y': [{
|
|
2391
|
+
'touch-pan': ['y', 'up', 'down']
|
|
2392
|
+
}],
|
|
2393
|
+
/**
|
|
2394
|
+
* Touch Action Pinch Zoom
|
|
2395
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2396
|
+
*/
|
|
2397
|
+
'touch-pz': ['touch-pinch-zoom'],
|
|
2431
2398
|
/**
|
|
2432
2399
|
* User Select
|
|
2433
2400
|
* @see https://tailwindcss.com/docs/user-select
|
|
@@ -2455,7 +2422,7 @@ function getDefaultConfig() {
|
|
|
2455
2422
|
* @see https://tailwindcss.com/docs/stroke-width
|
|
2456
2423
|
*/
|
|
2457
2424
|
'stroke-w': [{
|
|
2458
|
-
stroke: [isLength, isArbitraryNumber]
|
|
2425
|
+
stroke: [isLength, isArbitraryLength, isArbitraryNumber]
|
|
2459
2426
|
}],
|
|
2460
2427
|
/**
|
|
2461
2428
|
* Stroke
|
|
@@ -2511,7 +2478,11 @@ function getDefaultConfig() {
|
|
|
2511
2478
|
'scroll-my': ['scroll-mt', 'scroll-mb'],
|
|
2512
2479
|
'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
|
|
2513
2480
|
'scroll-px': ['scroll-pr', 'scroll-pl'],
|
|
2514
|
-
'scroll-py': ['scroll-pt', 'scroll-pb']
|
|
2481
|
+
'scroll-py': ['scroll-pt', 'scroll-pb'],
|
|
2482
|
+
touch: ['touch-x', 'touch-y', 'touch-pz'],
|
|
2483
|
+
'touch-x': ['touch'],
|
|
2484
|
+
'touch-y': ['touch'],
|
|
2485
|
+
'touch-pz': ['touch']
|
|
2515
2486
|
},
|
|
2516
2487
|
conflictingClassGroupModifiers: {
|
|
2517
2488
|
'font-size': ['leading']
|
|
@@ -2519,12 +2490,75 @@ function getDefaultConfig() {
|
|
|
2519
2490
|
};
|
|
2520
2491
|
}
|
|
2521
2492
|
|
|
2522
|
-
|
|
2493
|
+
/**
|
|
2494
|
+
* @param baseConfig Config where other config will be merged into. This object will be mutated.
|
|
2495
|
+
* @param configExtension Partial config to merge into the `baseConfig`.
|
|
2496
|
+
*/
|
|
2497
|
+
function mergeConfigs(baseConfig, {
|
|
2498
|
+
cacheSize,
|
|
2499
|
+
prefix,
|
|
2500
|
+
separator,
|
|
2501
|
+
extend = {},
|
|
2502
|
+
override = {}
|
|
2503
|
+
}) {
|
|
2504
|
+
overrideProperty(baseConfig, 'cacheSize', cacheSize);
|
|
2505
|
+
overrideProperty(baseConfig, 'prefix', prefix);
|
|
2506
|
+
overrideProperty(baseConfig, 'separator', separator);
|
|
2507
|
+
for (const configKey in override) {
|
|
2508
|
+
overrideConfigProperties(baseConfig[configKey], override[configKey]);
|
|
2509
|
+
}
|
|
2510
|
+
for (const key in extend) {
|
|
2511
|
+
mergeConfigProperties(baseConfig[key], extend[key]);
|
|
2512
|
+
}
|
|
2513
|
+
return baseConfig;
|
|
2514
|
+
}
|
|
2515
|
+
function overrideProperty(baseObject, overrideKey, overrideValue) {
|
|
2516
|
+
if (overrideValue !== undefined) {
|
|
2517
|
+
baseObject[overrideKey] = overrideValue;
|
|
2518
|
+
}
|
|
2519
|
+
}
|
|
2520
|
+
function overrideConfigProperties(baseObject, overrideObject) {
|
|
2521
|
+
if (overrideObject) {
|
|
2522
|
+
for (const key in overrideObject) {
|
|
2523
|
+
overrideProperty(baseObject, key, overrideObject[key]);
|
|
2524
|
+
}
|
|
2525
|
+
}
|
|
2526
|
+
}
|
|
2527
|
+
function mergeConfigProperties(baseObject, mergeObject) {
|
|
2528
|
+
if (mergeObject) {
|
|
2529
|
+
for (const key in mergeObject) {
|
|
2530
|
+
const mergeValue = mergeObject[key];
|
|
2531
|
+
if (mergeValue !== undefined) {
|
|
2532
|
+
baseObject[key] = (baseObject[key] || []).concat(mergeValue);
|
|
2533
|
+
}
|
|
2534
|
+
}
|
|
2535
|
+
}
|
|
2536
|
+
}
|
|
2537
|
+
function extendTailwindMerge(configExtension, ...createConfig) {
|
|
2538
|
+
return typeof configExtension === 'function' ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) : createTailwindMerge(() => mergeConfigs(getDefaultConfig(), configExtension), ...createConfig);
|
|
2539
|
+
}
|
|
2523
2540
|
|
|
2524
2541
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
2525
2542
|
|
|
2543
|
+
const customTwMerge = extendTailwindMerge({
|
|
2544
|
+
classGroups: {
|
|
2545
|
+
shadow: Object.keys(tailwindConfig.boxShadows).map((s) => `shadow-${s}`),
|
|
2546
|
+
"font-size": Object.keys(tailwindConfig.fontSizes).map((s) => `text-${s}`),
|
|
2547
|
+
"font-weight": Object.keys(tailwindConfig.fontWeights).map((s) => `font-${s}`),
|
|
2548
|
+
"line-height": Object.keys(tailwindConfig.lineHeights).map((s) => `leading-${s}`),
|
|
2549
|
+
scale: Object.keys(tailwindConfig.scales).map((s) => `scale-${s}`),
|
|
2550
|
+
height: Object.keys(tailwindConfig.heights).map((s) => `h-${s}`),
|
|
2551
|
+
borderRadius: Object.keys(tailwindConfig.borderRadius).map((s) => `rounded-${s}`),
|
|
2552
|
+
colors: Object.entries(tailwindConfig.colorPalette).reduce((acc, currentVal) => {
|
|
2553
|
+
const colors = Object.keys(currentVal[1]).map(
|
|
2554
|
+
(c) => `text-${currentVal[0]}-${c}`
|
|
2555
|
+
);
|
|
2556
|
+
return [...acc, ...colors];
|
|
2557
|
+
}, [])
|
|
2558
|
+
}
|
|
2559
|
+
});
|
|
2526
2560
|
const cn = (...inputs) => {
|
|
2527
|
-
return
|
|
2561
|
+
return customTwMerge(clsx(inputs));
|
|
2528
2562
|
};
|
|
2529
2563
|
|
|
2530
2564
|
exports.cn = cn;
|