@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.js
CHANGED
|
@@ -1,52 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
|
|
3
|
-
*
|
|
4
|
-
* Specifically:
|
|
5
|
-
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
|
|
6
|
-
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
|
|
7
|
-
*
|
|
8
|
-
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
9
|
-
*/
|
|
10
|
-
function twJoin() {
|
|
11
|
-
var index = 0;
|
|
12
|
-
var argument;
|
|
13
|
-
var resolvedValue;
|
|
14
|
-
var string = '';
|
|
15
|
-
while (index < arguments.length) {
|
|
16
|
-
if (argument = arguments[index++]) {
|
|
17
|
-
if (resolvedValue = toValue(argument)) {
|
|
18
|
-
string && (string += ' ');
|
|
19
|
-
string += resolvedValue;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return string;
|
|
24
|
-
}
|
|
25
|
-
function toValue(mix) {
|
|
26
|
-
if (typeof mix === 'string') {
|
|
27
|
-
return mix;
|
|
28
|
-
}
|
|
29
|
-
var resolvedValue;
|
|
30
|
-
var string = '';
|
|
31
|
-
for (var k = 0; k < mix.length; k++) {
|
|
32
|
-
if (mix[k]) {
|
|
33
|
-
if (resolvedValue = toValue(mix[k])) {
|
|
34
|
-
string && (string += ' ');
|
|
35
|
-
string += resolvedValue;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
return string;
|
|
40
|
-
}
|
|
1
|
+
import { b as boxShadows, f as fontSizes, a as fontWeights, l as lineHeights, s as scales, h as heights, c as borderRadius, d as colorPalette } from './tailwind-config-0df99c97.js';
|
|
41
2
|
|
|
42
|
-
|
|
3
|
+
const CLASS_PART_SEPARATOR = '-';
|
|
43
4
|
function createClassUtils(config) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
conflictingClassGroupModifiers
|
|
5
|
+
const classMap = createClassMap(config);
|
|
6
|
+
const {
|
|
7
|
+
conflictingClassGroups,
|
|
8
|
+
conflictingClassGroupModifiers
|
|
9
|
+
} = config;
|
|
48
10
|
function getClassGroupId(className) {
|
|
49
|
-
|
|
11
|
+
const classParts = className.split(CLASS_PART_SEPARATOR);
|
|
50
12
|
// 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.
|
|
51
13
|
if (classParts[0] === '' && classParts.length !== 1) {
|
|
52
14
|
classParts.shift();
|
|
@@ -54,41 +16,40 @@ function createClassUtils(config) {
|
|
|
54
16
|
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
|
|
55
17
|
}
|
|
56
18
|
function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) {
|
|
57
|
-
|
|
19
|
+
const conflicts = conflictingClassGroups[classGroupId] || [];
|
|
58
20
|
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
|
|
59
|
-
return [
|
|
21
|
+
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
|
|
60
22
|
}
|
|
61
23
|
return conflicts;
|
|
62
24
|
}
|
|
63
25
|
return {
|
|
64
|
-
getClassGroupId
|
|
65
|
-
getConflictingClassGroupIds
|
|
26
|
+
getClassGroupId,
|
|
27
|
+
getConflictingClassGroupIds
|
|
66
28
|
};
|
|
67
29
|
}
|
|
68
30
|
function getGroupRecursive(classParts, classPartObject) {
|
|
69
31
|
if (classParts.length === 0) {
|
|
70
32
|
return classPartObject.classGroupId;
|
|
71
33
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
34
|
+
const currentClassPart = classParts[0];
|
|
35
|
+
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
|
|
36
|
+
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
|
|
75
37
|
if (classGroupFromNextClassPart) {
|
|
76
38
|
return classGroupFromNextClassPart;
|
|
77
39
|
}
|
|
78
40
|
if (classPartObject.validators.length === 0) {
|
|
79
41
|
return undefined;
|
|
80
42
|
}
|
|
81
|
-
|
|
82
|
-
return classPartObject.validators.find(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
})?.classGroupId;
|
|
43
|
+
const classRest = classParts.join(CLASS_PART_SEPARATOR);
|
|
44
|
+
return classPartObject.validators.find(({
|
|
45
|
+
validator
|
|
46
|
+
}) => validator(classRest))?.classGroupId;
|
|
86
47
|
}
|
|
87
|
-
|
|
48
|
+
const arbitraryPropertyRegex = /^\[(.+)\]$/;
|
|
88
49
|
function getGroupIdForArbitraryProperty(className) {
|
|
89
50
|
if (arbitraryPropertyRegex.test(className)) {
|
|
90
|
-
|
|
91
|
-
|
|
51
|
+
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
|
|
52
|
+
const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
|
|
92
53
|
if (property) {
|
|
93
54
|
// I use two dots here because one dot is used as prefix for class groups in plugins
|
|
94
55
|
return 'arbitrary..' + property;
|
|
@@ -99,24 +60,24 @@ function getGroupIdForArbitraryProperty(className) {
|
|
|
99
60
|
* Exported for testing only
|
|
100
61
|
*/
|
|
101
62
|
function createClassMap(config) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
63
|
+
const {
|
|
64
|
+
theme,
|
|
65
|
+
prefix
|
|
66
|
+
} = config;
|
|
67
|
+
const classMap = {
|
|
105
68
|
nextPart: new Map(),
|
|
106
69
|
validators: []
|
|
107
70
|
};
|
|
108
|
-
|
|
109
|
-
prefixedClassGroupEntries.forEach(
|
|
110
|
-
var classGroupId = _ref2[0],
|
|
111
|
-
classGroup = _ref2[1];
|
|
71
|
+
const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
|
|
72
|
+
prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
|
|
112
73
|
processClassesRecursively(classGroup, classMap, classGroupId, theme);
|
|
113
74
|
});
|
|
114
75
|
return classMap;
|
|
115
76
|
}
|
|
116
77
|
function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
|
|
117
|
-
classGroup.forEach(
|
|
78
|
+
classGroup.forEach(classDefinition => {
|
|
118
79
|
if (typeof classDefinition === 'string') {
|
|
119
|
-
|
|
80
|
+
const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
|
|
120
81
|
classPartObjectToEdit.classGroupId = classGroupId;
|
|
121
82
|
return;
|
|
122
83
|
}
|
|
@@ -127,20 +88,18 @@ function processClassesRecursively(classGroup, classPartObject, classGroupId, th
|
|
|
127
88
|
}
|
|
128
89
|
classPartObject.validators.push({
|
|
129
90
|
validator: classDefinition,
|
|
130
|
-
classGroupId
|
|
91
|
+
classGroupId
|
|
131
92
|
});
|
|
132
93
|
return;
|
|
133
94
|
}
|
|
134
|
-
Object.entries(classDefinition).forEach(
|
|
135
|
-
var key = _ref3[0],
|
|
136
|
-
classGroup = _ref3[1];
|
|
95
|
+
Object.entries(classDefinition).forEach(([key, classGroup]) => {
|
|
137
96
|
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
|
|
138
97
|
});
|
|
139
98
|
});
|
|
140
99
|
}
|
|
141
100
|
function getPart(classPartObject, path) {
|
|
142
|
-
|
|
143
|
-
path.split(CLASS_PART_SEPARATOR).forEach(
|
|
101
|
+
let currentClassPartObject = classPartObject;
|
|
102
|
+
path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
|
|
144
103
|
if (!currentClassPartObject.nextPart.has(pathPart)) {
|
|
145
104
|
currentClassPartObject.nextPart.set(pathPart, {
|
|
146
105
|
nextPart: new Map(),
|
|
@@ -158,19 +117,13 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
|
|
|
158
117
|
if (!prefix) {
|
|
159
118
|
return classGroupEntries;
|
|
160
119
|
}
|
|
161
|
-
return classGroupEntries.map(
|
|
162
|
-
|
|
163
|
-
classGroup = _ref4[1];
|
|
164
|
-
var prefixedClassGroup = classGroup.map(function (classDefinition) {
|
|
120
|
+
return classGroupEntries.map(([classGroupId, classGroup]) => {
|
|
121
|
+
const prefixedClassGroup = classGroup.map(classDefinition => {
|
|
165
122
|
if (typeof classDefinition === 'string') {
|
|
166
123
|
return prefix + classDefinition;
|
|
167
124
|
}
|
|
168
125
|
if (typeof classDefinition === 'object') {
|
|
169
|
-
return Object.fromEntries(Object.entries(classDefinition).map(
|
|
170
|
-
var key = _ref5[0],
|
|
171
|
-
value = _ref5[1];
|
|
172
|
-
return [prefix + key, value];
|
|
173
|
-
}));
|
|
126
|
+
return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
|
|
174
127
|
}
|
|
175
128
|
return classDefinition;
|
|
176
129
|
});
|
|
@@ -182,15 +135,13 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
|
|
|
182
135
|
function createLruCache(maxCacheSize) {
|
|
183
136
|
if (maxCacheSize < 1) {
|
|
184
137
|
return {
|
|
185
|
-
get:
|
|
186
|
-
|
|
187
|
-
},
|
|
188
|
-
set: function set() {}
|
|
138
|
+
get: () => undefined,
|
|
139
|
+
set: () => {}
|
|
189
140
|
};
|
|
190
141
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
142
|
+
let cacheSize = 0;
|
|
143
|
+
let cache = new Map();
|
|
144
|
+
let previousCache = new Map();
|
|
194
145
|
function update(key, value) {
|
|
195
146
|
cache.set(key, value);
|
|
196
147
|
cacheSize++;
|
|
@@ -201,8 +152,8 @@ function createLruCache(maxCacheSize) {
|
|
|
201
152
|
}
|
|
202
153
|
}
|
|
203
154
|
return {
|
|
204
|
-
get
|
|
205
|
-
|
|
155
|
+
get(key) {
|
|
156
|
+
let value = cache.get(key);
|
|
206
157
|
if (value !== undefined) {
|
|
207
158
|
return value;
|
|
208
159
|
}
|
|
@@ -211,7 +162,7 @@ function createLruCache(maxCacheSize) {
|
|
|
211
162
|
return value;
|
|
212
163
|
}
|
|
213
164
|
},
|
|
214
|
-
set
|
|
165
|
+
set(key, value) {
|
|
215
166
|
if (cache.has(key)) {
|
|
216
167
|
cache.set(key, value);
|
|
217
168
|
} else {
|
|
@@ -220,21 +171,20 @@ function createLruCache(maxCacheSize) {
|
|
|
220
171
|
}
|
|
221
172
|
};
|
|
222
173
|
}
|
|
223
|
-
|
|
224
|
-
var IMPORTANT_MODIFIER = '!';
|
|
174
|
+
const IMPORTANT_MODIFIER = '!';
|
|
225
175
|
function createSplitModifiers(config) {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
176
|
+
const separator = config.separator;
|
|
177
|
+
const isSeparatorSingleCharacter = separator.length === 1;
|
|
178
|
+
const firstSeparatorCharacter = separator[0];
|
|
179
|
+
const separatorLength = separator.length;
|
|
230
180
|
// splitModifiers inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
|
|
231
181
|
return function splitModifiers(className) {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
for (
|
|
237
|
-
|
|
182
|
+
const modifiers = [];
|
|
183
|
+
let bracketDepth = 0;
|
|
184
|
+
let modifierStart = 0;
|
|
185
|
+
let postfixModifierPosition;
|
|
186
|
+
for (let index = 0; index < className.length; index++) {
|
|
187
|
+
let currentCharacter = className[index];
|
|
238
188
|
if (bracketDepth === 0) {
|
|
239
189
|
if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
|
|
240
190
|
modifiers.push(className.slice(modifierStart, index));
|
|
@@ -252,15 +202,15 @@ function createSplitModifiers(config) {
|
|
|
252
202
|
bracketDepth--;
|
|
253
203
|
}
|
|
254
204
|
}
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
205
|
+
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
|
|
206
|
+
const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
|
|
207
|
+
const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
|
|
208
|
+
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
|
|
259
209
|
return {
|
|
260
|
-
modifiers
|
|
261
|
-
hasImportantModifier
|
|
262
|
-
baseClassName
|
|
263
|
-
maybePostfixModifierPosition
|
|
210
|
+
modifiers,
|
|
211
|
+
hasImportantModifier,
|
|
212
|
+
baseClassName,
|
|
213
|
+
maybePostfixModifierPosition
|
|
264
214
|
};
|
|
265
215
|
};
|
|
266
216
|
}
|
|
@@ -273,21 +223,20 @@ function sortModifiers(modifiers) {
|
|
|
273
223
|
if (modifiers.length <= 1) {
|
|
274
224
|
return modifiers;
|
|
275
225
|
}
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
modifiers.forEach(
|
|
279
|
-
|
|
226
|
+
const sortedModifiers = [];
|
|
227
|
+
let unsortedModifiers = [];
|
|
228
|
+
modifiers.forEach(modifier => {
|
|
229
|
+
const isArbitraryVariant = modifier[0] === '[';
|
|
280
230
|
if (isArbitraryVariant) {
|
|
281
|
-
sortedModifiers.push
|
|
231
|
+
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
|
|
282
232
|
unsortedModifiers = [];
|
|
283
233
|
} else {
|
|
284
234
|
unsortedModifiers.push(modifier);
|
|
285
235
|
}
|
|
286
236
|
});
|
|
287
|
-
sortedModifiers.push
|
|
237
|
+
sortedModifiers.push(...unsortedModifiers.sort());
|
|
288
238
|
return sortedModifiers;
|
|
289
239
|
}
|
|
290
|
-
|
|
291
240
|
function createConfigUtils(config) {
|
|
292
241
|
return {
|
|
293
242
|
cache: createLruCache(config.cacheSize),
|
|
@@ -295,12 +244,13 @@ function createConfigUtils(config) {
|
|
|
295
244
|
...createClassUtils(config)
|
|
296
245
|
};
|
|
297
246
|
}
|
|
298
|
-
|
|
299
|
-
var SPLIT_CLASSES_REGEX = /\s+/;
|
|
247
|
+
const SPLIT_CLASSES_REGEX = /\s+/;
|
|
300
248
|
function mergeClassList(classList, configUtils) {
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
249
|
+
const {
|
|
250
|
+
splitModifiers,
|
|
251
|
+
getClassGroupId,
|
|
252
|
+
getConflictingClassGroupIds
|
|
253
|
+
} = configUtils;
|
|
304
254
|
/**
|
|
305
255
|
* Set of classGroupIds in following format:
|
|
306
256
|
* `{importantModifier}{variantModifiers}{classGroupId}`
|
|
@@ -308,77 +258,109 @@ function mergeClassList(classList, configUtils) {
|
|
|
308
258
|
* @example 'hover:focus:bg-color'
|
|
309
259
|
* @example 'md:!pr'
|
|
310
260
|
*/
|
|
311
|
-
|
|
312
|
-
return classList.trim().split(SPLIT_CLASSES_REGEX).map(
|
|
313
|
-
|
|
314
|
-
modifiers
|
|
315
|
-
hasImportantModifier
|
|
316
|
-
baseClassName
|
|
317
|
-
maybePostfixModifierPosition
|
|
318
|
-
|
|
319
|
-
|
|
261
|
+
const classGroupsInConflict = new Set();
|
|
262
|
+
return classList.trim().split(SPLIT_CLASSES_REGEX).map(originalClassName => {
|
|
263
|
+
const {
|
|
264
|
+
modifiers,
|
|
265
|
+
hasImportantModifier,
|
|
266
|
+
baseClassName,
|
|
267
|
+
maybePostfixModifierPosition
|
|
268
|
+
} = splitModifiers(originalClassName);
|
|
269
|
+
let classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
|
|
270
|
+
let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
|
|
320
271
|
if (!classGroupId) {
|
|
321
272
|
if (!maybePostfixModifierPosition) {
|
|
322
273
|
return {
|
|
323
274
|
isTailwindClass: false,
|
|
324
|
-
originalClassName
|
|
275
|
+
originalClassName
|
|
325
276
|
};
|
|
326
277
|
}
|
|
327
278
|
classGroupId = getClassGroupId(baseClassName);
|
|
328
279
|
if (!classGroupId) {
|
|
329
280
|
return {
|
|
330
281
|
isTailwindClass: false,
|
|
331
|
-
originalClassName
|
|
282
|
+
originalClassName
|
|
332
283
|
};
|
|
333
284
|
}
|
|
334
285
|
hasPostfixModifier = false;
|
|
335
286
|
}
|
|
336
|
-
|
|
337
|
-
|
|
287
|
+
const variantModifier = sortModifiers(modifiers).join(':');
|
|
288
|
+
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
|
|
338
289
|
return {
|
|
339
290
|
isTailwindClass: true,
|
|
340
|
-
modifierId
|
|
341
|
-
classGroupId
|
|
342
|
-
originalClassName
|
|
343
|
-
hasPostfixModifier
|
|
291
|
+
modifierId,
|
|
292
|
+
classGroupId,
|
|
293
|
+
originalClassName,
|
|
294
|
+
hasPostfixModifier
|
|
344
295
|
};
|
|
345
296
|
}).reverse()
|
|
346
297
|
// Last class in conflict wins, so we need to filter conflicting classes in reverse order.
|
|
347
|
-
.filter(
|
|
298
|
+
.filter(parsed => {
|
|
348
299
|
if (!parsed.isTailwindClass) {
|
|
349
300
|
return true;
|
|
350
301
|
}
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
302
|
+
const {
|
|
303
|
+
modifierId,
|
|
304
|
+
classGroupId,
|
|
305
|
+
hasPostfixModifier
|
|
306
|
+
} = parsed;
|
|
307
|
+
const classId = modifierId + classGroupId;
|
|
355
308
|
if (classGroupsInConflict.has(classId)) {
|
|
356
309
|
return false;
|
|
357
310
|
}
|
|
358
311
|
classGroupsInConflict.add(classId);
|
|
359
|
-
getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(
|
|
360
|
-
return classGroupsInConflict.add(modifierId + group);
|
|
361
|
-
});
|
|
312
|
+
getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(group => classGroupsInConflict.add(modifierId + group));
|
|
362
313
|
return true;
|
|
363
|
-
}).reverse().map(
|
|
364
|
-
return parsed.originalClassName;
|
|
365
|
-
}).join(' ');
|
|
314
|
+
}).reverse().map(parsed => parsed.originalClassName).join(' ');
|
|
366
315
|
}
|
|
367
316
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
317
|
+
/**
|
|
318
|
+
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
|
|
319
|
+
*
|
|
320
|
+
* Specifically:
|
|
321
|
+
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
|
|
322
|
+
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
|
|
323
|
+
*
|
|
324
|
+
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
325
|
+
*/
|
|
326
|
+
function twJoin() {
|
|
327
|
+
let index = 0;
|
|
328
|
+
let argument;
|
|
329
|
+
let resolvedValue;
|
|
330
|
+
let string = '';
|
|
331
|
+
while (index < arguments.length) {
|
|
332
|
+
if (argument = arguments[index++]) {
|
|
333
|
+
if (resolvedValue = toValue(argument)) {
|
|
334
|
+
string && (string += ' ');
|
|
335
|
+
string += resolvedValue;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
371
338
|
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
339
|
+
return string;
|
|
340
|
+
}
|
|
341
|
+
function toValue(mix) {
|
|
342
|
+
if (typeof mix === 'string') {
|
|
343
|
+
return mix;
|
|
344
|
+
}
|
|
345
|
+
let resolvedValue;
|
|
346
|
+
let string = '';
|
|
347
|
+
for (let k = 0; k < mix.length; k++) {
|
|
348
|
+
if (mix[k]) {
|
|
349
|
+
if (resolvedValue = toValue(mix[k])) {
|
|
350
|
+
string && (string += ' ');
|
|
351
|
+
string += resolvedValue;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
return string;
|
|
356
|
+
}
|
|
357
|
+
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
|
|
358
|
+
let configUtils;
|
|
359
|
+
let cacheGet;
|
|
360
|
+
let cacheSet;
|
|
361
|
+
let functionToCall = initTailwindMerge;
|
|
376
362
|
function initTailwindMerge(classList) {
|
|
377
|
-
|
|
378
|
-
restCreateConfig = createConfig.slice(1);
|
|
379
|
-
var config = restCreateConfig.reduce(function (previousConfig, createConfigCurrent) {
|
|
380
|
-
return createConfigCurrent(previousConfig);
|
|
381
|
-
}, firstCreateConfig());
|
|
363
|
+
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
|
|
382
364
|
configUtils = createConfigUtils(config);
|
|
383
365
|
cacheGet = configUtils.cache.get;
|
|
384
366
|
cacheSet = configUtils.cache.set;
|
|
@@ -386,11 +368,11 @@ function createTailwindMerge() {
|
|
|
386
368
|
return tailwindMerge(classList);
|
|
387
369
|
}
|
|
388
370
|
function tailwindMerge(classList) {
|
|
389
|
-
|
|
371
|
+
const cachedResult = cacheGet(classList);
|
|
390
372
|
if (cachedResult) {
|
|
391
373
|
return cachedResult;
|
|
392
374
|
}
|
|
393
|
-
|
|
375
|
+
const result = mergeClassList(classList, configUtils);
|
|
394
376
|
cacheSet(classList, result);
|
|
395
377
|
return result;
|
|
396
378
|
}
|
|
@@ -398,66 +380,65 @@ function createTailwindMerge() {
|
|
|
398
380
|
return functionToCall(twJoin.apply(null, arguments));
|
|
399
381
|
};
|
|
400
382
|
}
|
|
401
|
-
|
|
402
383
|
function fromTheme(key) {
|
|
403
|
-
|
|
404
|
-
return theme[key] || [];
|
|
405
|
-
};
|
|
384
|
+
const themeGetter = theme => theme[key] || [];
|
|
406
385
|
themeGetter.isThemeGetter = true;
|
|
407
386
|
return themeGetter;
|
|
408
387
|
}
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
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$/;
|
|
388
|
+
const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
|
|
389
|
+
const fractionRegex = /^\d+\/\d+$/;
|
|
390
|
+
const stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']);
|
|
391
|
+
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
|
|
392
|
+
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$/;
|
|
415
393
|
// Shadow always begins with x and y offset separated by underscore
|
|
416
|
-
|
|
394
|
+
const shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
|
|
395
|
+
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
|
|
417
396
|
function isLength(value) {
|
|
418
|
-
return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value)
|
|
397
|
+
return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
|
|
419
398
|
}
|
|
420
399
|
function isArbitraryLength(value) {
|
|
421
400
|
return getIsArbitraryValue(value, 'length', isLengthOnly);
|
|
422
401
|
}
|
|
423
|
-
function
|
|
424
|
-
return
|
|
425
|
-
}
|
|
426
|
-
function isArbitraryPosition(value) {
|
|
427
|
-
return getIsArbitraryValue(value, 'position', isNever);
|
|
428
|
-
}
|
|
429
|
-
function isArbitraryUrl(value) {
|
|
430
|
-
return getIsArbitraryValue(value, 'url', isUrl);
|
|
402
|
+
function isNumber(value) {
|
|
403
|
+
return Boolean(value) && !Number.isNaN(Number(value));
|
|
431
404
|
}
|
|
432
405
|
function isArbitraryNumber(value) {
|
|
433
406
|
return getIsArbitraryValue(value, 'number', isNumber);
|
|
434
407
|
}
|
|
435
|
-
function
|
|
436
|
-
return
|
|
408
|
+
function isInteger(value) {
|
|
409
|
+
return Boolean(value) && Number.isInteger(Number(value));
|
|
437
410
|
}
|
|
438
411
|
function isPercent(value) {
|
|
439
412
|
return value.endsWith('%') && isNumber(value.slice(0, -1));
|
|
440
413
|
}
|
|
441
|
-
function isInteger(value) {
|
|
442
|
-
return isIntegerOnly(value) || getIsArbitraryValue(value, 'number', isIntegerOnly);
|
|
443
|
-
}
|
|
444
414
|
function isArbitraryValue(value) {
|
|
445
415
|
return arbitraryValueRegex.test(value);
|
|
446
416
|
}
|
|
447
|
-
function isAny() {
|
|
448
|
-
return true;
|
|
449
|
-
}
|
|
450
417
|
function isTshirtSize(value) {
|
|
451
418
|
return tshirtUnitRegex.test(value);
|
|
452
419
|
}
|
|
420
|
+
const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
|
|
421
|
+
function isArbitrarySize(value) {
|
|
422
|
+
return getIsArbitraryValue(value, sizeLabels, isNever);
|
|
423
|
+
}
|
|
424
|
+
function isArbitraryPosition(value) {
|
|
425
|
+
return getIsArbitraryValue(value, 'position', isNever);
|
|
426
|
+
}
|
|
427
|
+
const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
|
|
428
|
+
function isArbitraryImage(value) {
|
|
429
|
+
return getIsArbitraryValue(value, imageLabels, isImage);
|
|
430
|
+
}
|
|
453
431
|
function isArbitraryShadow(value) {
|
|
454
432
|
return getIsArbitraryValue(value, '', isShadow);
|
|
455
433
|
}
|
|
434
|
+
function isAny() {
|
|
435
|
+
return true;
|
|
436
|
+
}
|
|
456
437
|
function getIsArbitraryValue(value, label, testValue) {
|
|
457
|
-
|
|
438
|
+
const result = arbitraryValueRegex.exec(value);
|
|
458
439
|
if (result) {
|
|
459
440
|
if (result[1]) {
|
|
460
|
-
return result[1] === label;
|
|
441
|
+
return typeof label === 'string' ? result[1] === label : label.has(result[1]);
|
|
461
442
|
}
|
|
462
443
|
return testValue(result[2]);
|
|
463
444
|
}
|
|
@@ -469,95 +450,64 @@ function isLengthOnly(value) {
|
|
|
469
450
|
function isNever() {
|
|
470
451
|
return false;
|
|
471
452
|
}
|
|
472
|
-
function isUrl(value) {
|
|
473
|
-
return value.startsWith('url(');
|
|
474
|
-
}
|
|
475
|
-
function isIntegerOnly(value) {
|
|
476
|
-
return Number.isInteger(Number(value));
|
|
477
|
-
}
|
|
478
453
|
function isShadow(value) {
|
|
479
454
|
return shadowRegex.test(value);
|
|
480
455
|
}
|
|
481
|
-
|
|
456
|
+
function isImage(value) {
|
|
457
|
+
return imageRegex.test(value);
|
|
458
|
+
}
|
|
482
459
|
function getDefaultConfig() {
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
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
|
-
var getNumberWithAutoAndArbitrary = function getNumberWithAutoAndArbitrary() {
|
|
524
|
-
return ['auto', isNumber, isArbitraryValue];
|
|
525
|
-
};
|
|
526
|
-
var getPositions = function getPositions() {
|
|
527
|
-
return ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
|
|
528
|
-
};
|
|
529
|
-
var getLineStyles = function getLineStyles() {
|
|
530
|
-
return ['solid', 'dashed', 'dotted', 'double', 'none'];
|
|
531
|
-
};
|
|
532
|
-
var getBlendModes = function getBlendModes() {
|
|
533
|
-
return ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
|
|
534
|
-
};
|
|
535
|
-
var getAlign = function getAlign() {
|
|
536
|
-
return ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'];
|
|
537
|
-
};
|
|
538
|
-
var getZeroAndEmpty = function getZeroAndEmpty() {
|
|
539
|
-
return ['', '0', isArbitraryValue];
|
|
540
|
-
};
|
|
541
|
-
var getBreaks = function getBreaks() {
|
|
542
|
-
return ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
|
|
543
|
-
};
|
|
544
|
-
var getNumber = function getNumber() {
|
|
545
|
-
return [isNumber, isArbitraryNumber];
|
|
546
|
-
};
|
|
547
|
-
var getNumberAndArbitrary = function getNumberAndArbitrary() {
|
|
548
|
-
return [isNumber, isArbitraryValue];
|
|
549
|
-
};
|
|
460
|
+
const colors = fromTheme('colors');
|
|
461
|
+
const spacing = fromTheme('spacing');
|
|
462
|
+
const blur = fromTheme('blur');
|
|
463
|
+
const brightness = fromTheme('brightness');
|
|
464
|
+
const borderColor = fromTheme('borderColor');
|
|
465
|
+
const borderRadius = fromTheme('borderRadius');
|
|
466
|
+
const borderSpacing = fromTheme('borderSpacing');
|
|
467
|
+
const borderWidth = fromTheme('borderWidth');
|
|
468
|
+
const contrast = fromTheme('contrast');
|
|
469
|
+
const grayscale = fromTheme('grayscale');
|
|
470
|
+
const hueRotate = fromTheme('hueRotate');
|
|
471
|
+
const invert = fromTheme('invert');
|
|
472
|
+
const gap = fromTheme('gap');
|
|
473
|
+
const gradientColorStops = fromTheme('gradientColorStops');
|
|
474
|
+
const gradientColorStopPositions = fromTheme('gradientColorStopPositions');
|
|
475
|
+
const inset = fromTheme('inset');
|
|
476
|
+
const margin = fromTheme('margin');
|
|
477
|
+
const opacity = fromTheme('opacity');
|
|
478
|
+
const padding = fromTheme('padding');
|
|
479
|
+
const saturate = fromTheme('saturate');
|
|
480
|
+
const scale = fromTheme('scale');
|
|
481
|
+
const sepia = fromTheme('sepia');
|
|
482
|
+
const skew = fromTheme('skew');
|
|
483
|
+
const space = fromTheme('space');
|
|
484
|
+
const translate = fromTheme('translate');
|
|
485
|
+
const getOverscroll = () => ['auto', 'contain', 'none'];
|
|
486
|
+
const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
|
|
487
|
+
const getSpacingWithAutoAndArbitrary = () => ['auto', isArbitraryValue, spacing];
|
|
488
|
+
const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
|
|
489
|
+
const getLengthWithEmptyAndArbitrary = () => ['', isLength, isArbitraryLength];
|
|
490
|
+
const getNumberWithAutoAndArbitrary = () => ['auto', isNumber, isArbitraryValue];
|
|
491
|
+
const getPositions = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
|
|
492
|
+
const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'];
|
|
493
|
+
const getBlendModes = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
|
|
494
|
+
const getAlign = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'];
|
|
495
|
+
const getZeroAndEmpty = () => ['', '0', isArbitraryValue];
|
|
496
|
+
const getBreaks = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
|
|
497
|
+
const getNumber = () => [isNumber, isArbitraryNumber];
|
|
498
|
+
const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
|
|
550
499
|
return {
|
|
551
500
|
cacheSize: 500,
|
|
501
|
+
separator: ':',
|
|
552
502
|
theme: {
|
|
553
503
|
colors: [isAny],
|
|
554
|
-
spacing: [isLength],
|
|
504
|
+
spacing: [isLength, isArbitraryLength],
|
|
555
505
|
blur: ['none', '', isTshirtSize, isArbitraryValue],
|
|
556
506
|
brightness: getNumber(),
|
|
557
507
|
borderColor: [colors],
|
|
558
508
|
borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue],
|
|
559
509
|
borderSpacing: getSpacingWithArbitrary(),
|
|
560
|
-
borderWidth:
|
|
510
|
+
borderWidth: getLengthWithEmptyAndArbitrary(),
|
|
561
511
|
contrast: getNumber(),
|
|
562
512
|
grayscale: getZeroAndEmpty(),
|
|
563
513
|
hueRotate: getNumberAndArbitrary(),
|
|
@@ -641,8 +591,8 @@ function getDefaultConfig() {
|
|
|
641
591
|
* Floats
|
|
642
592
|
* @see https://tailwindcss.com/docs/float
|
|
643
593
|
*/
|
|
644
|
-
|
|
645
|
-
|
|
594
|
+
float: [{
|
|
595
|
+
float: ['right', 'left', 'none']
|
|
646
596
|
}],
|
|
647
597
|
/**
|
|
648
598
|
* Clear
|
|
@@ -668,7 +618,7 @@ function getDefaultConfig() {
|
|
|
668
618
|
* @see https://tailwindcss.com/docs/object-position
|
|
669
619
|
*/
|
|
670
620
|
'object-position': [{
|
|
671
|
-
object: [
|
|
621
|
+
object: [...getPositions(), isArbitraryValue]
|
|
672
622
|
}],
|
|
673
623
|
/**
|
|
674
624
|
* Overflow
|
|
@@ -790,7 +740,7 @@ function getDefaultConfig() {
|
|
|
790
740
|
* @see https://tailwindcss.com/docs/z-index
|
|
791
741
|
*/
|
|
792
742
|
z: [{
|
|
793
|
-
z: ['auto', isInteger]
|
|
743
|
+
z: ['auto', isInteger, isArbitraryValue]
|
|
794
744
|
}],
|
|
795
745
|
// Flexbox and Grid
|
|
796
746
|
/**
|
|
@@ -840,7 +790,7 @@ function getDefaultConfig() {
|
|
|
840
790
|
* @see https://tailwindcss.com/docs/order
|
|
841
791
|
*/
|
|
842
792
|
order: [{
|
|
843
|
-
order: ['first', 'last', 'none', isInteger]
|
|
793
|
+
order: ['first', 'last', 'none', isInteger, isArbitraryValue]
|
|
844
794
|
}],
|
|
845
795
|
/**
|
|
846
796
|
* Grid Template Columns
|
|
@@ -855,7 +805,7 @@ function getDefaultConfig() {
|
|
|
855
805
|
*/
|
|
856
806
|
'col-start-end': [{
|
|
857
807
|
col: ['auto', {
|
|
858
|
-
span: ['full', isInteger]
|
|
808
|
+
span: ['full', isInteger, isArbitraryValue]
|
|
859
809
|
}, isArbitraryValue]
|
|
860
810
|
}],
|
|
861
811
|
/**
|
|
@@ -885,7 +835,7 @@ function getDefaultConfig() {
|
|
|
885
835
|
*/
|
|
886
836
|
'row-start-end': [{
|
|
887
837
|
row: ['auto', {
|
|
888
|
-
span: [isInteger]
|
|
838
|
+
span: [isInteger, isArbitraryValue]
|
|
889
839
|
}, isArbitraryValue]
|
|
890
840
|
}],
|
|
891
841
|
/**
|
|
@@ -949,7 +899,7 @@ function getDefaultConfig() {
|
|
|
949
899
|
* @see https://tailwindcss.com/docs/justify-content
|
|
950
900
|
*/
|
|
951
901
|
'justify-content': [{
|
|
952
|
-
justify: ['normal'
|
|
902
|
+
justify: ['normal', ...getAlign()]
|
|
953
903
|
}],
|
|
954
904
|
/**
|
|
955
905
|
* Justify Items
|
|
@@ -970,7 +920,7 @@ function getDefaultConfig() {
|
|
|
970
920
|
* @see https://tailwindcss.com/docs/align-content
|
|
971
921
|
*/
|
|
972
922
|
'align-content': [{
|
|
973
|
-
content: ['normal'
|
|
923
|
+
content: ['normal', ...getAlign(), 'baseline']
|
|
974
924
|
}],
|
|
975
925
|
/**
|
|
976
926
|
* Align Items
|
|
@@ -991,7 +941,7 @@ function getDefaultConfig() {
|
|
|
991
941
|
* @see https://tailwindcss.com/docs/place-content
|
|
992
942
|
*/
|
|
993
943
|
'place-content': [{
|
|
994
|
-
'place-content': [
|
|
944
|
+
'place-content': [...getAlign(), 'baseline']
|
|
995
945
|
}],
|
|
996
946
|
/**
|
|
997
947
|
* Place Items
|
|
@@ -1194,7 +1144,7 @@ function getDefaultConfig() {
|
|
|
1194
1144
|
* @see https://tailwindcss.com/docs/min-height
|
|
1195
1145
|
*/
|
|
1196
1146
|
'min-h': [{
|
|
1197
|
-
'min-h': ['min', 'max', 'fit',
|
|
1147
|
+
'min-h': ['min', 'max', 'fit', isLength, isArbitraryValue]
|
|
1198
1148
|
}],
|
|
1199
1149
|
/**
|
|
1200
1150
|
* Max-Height
|
|
@@ -1284,7 +1234,7 @@ function getDefaultConfig() {
|
|
|
1284
1234
|
* @see https://tailwindcss.com/docs/line-height
|
|
1285
1235
|
*/
|
|
1286
1236
|
leading: [{
|
|
1287
|
-
leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose',
|
|
1237
|
+
leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength, isArbitraryValue]
|
|
1288
1238
|
}],
|
|
1289
1239
|
/**
|
|
1290
1240
|
* List Style Image
|
|
@@ -1353,21 +1303,21 @@ function getDefaultConfig() {
|
|
|
1353
1303
|
* @see https://tailwindcss.com/docs/text-decoration-style
|
|
1354
1304
|
*/
|
|
1355
1305
|
'text-decoration-style': [{
|
|
1356
|
-
decoration: [
|
|
1306
|
+
decoration: [...getLineStyles(), 'wavy']
|
|
1357
1307
|
}],
|
|
1358
1308
|
/**
|
|
1359
1309
|
* Text Decoration Thickness
|
|
1360
1310
|
* @see https://tailwindcss.com/docs/text-decoration-thickness
|
|
1361
1311
|
*/
|
|
1362
1312
|
'text-decoration-thickness': [{
|
|
1363
|
-
decoration: ['auto', 'from-font', isLength]
|
|
1313
|
+
decoration: ['auto', 'from-font', isLength, isArbitraryLength]
|
|
1364
1314
|
}],
|
|
1365
1315
|
/**
|
|
1366
1316
|
* Text Underline Offset
|
|
1367
1317
|
* @see https://tailwindcss.com/docs/text-underline-offset
|
|
1368
1318
|
*/
|
|
1369
1319
|
'underline-offset': [{
|
|
1370
|
-
'underline-offset': ['auto',
|
|
1320
|
+
'underline-offset': ['auto', isLength, isArbitraryValue]
|
|
1371
1321
|
}],
|
|
1372
1322
|
/**
|
|
1373
1323
|
* Text Decoration Color
|
|
@@ -1411,8 +1361,8 @@ function getDefaultConfig() {
|
|
|
1411
1361
|
* Word Break
|
|
1412
1362
|
* @see https://tailwindcss.com/docs/word-break
|
|
1413
1363
|
*/
|
|
1414
|
-
|
|
1415
|
-
|
|
1364
|
+
break: [{
|
|
1365
|
+
break: ['normal', 'words', 'all', 'keep']
|
|
1416
1366
|
}],
|
|
1417
1367
|
/**
|
|
1418
1368
|
* Hyphens
|
|
@@ -1463,7 +1413,7 @@ function getDefaultConfig() {
|
|
|
1463
1413
|
* @see https://tailwindcss.com/docs/background-position
|
|
1464
1414
|
*/
|
|
1465
1415
|
'bg-position': [{
|
|
1466
|
-
bg: [
|
|
1416
|
+
bg: [...getPositions(), isArbitraryPosition]
|
|
1467
1417
|
}],
|
|
1468
1418
|
/**
|
|
1469
1419
|
* Background Repeat
|
|
@@ -1488,7 +1438,7 @@ function getDefaultConfig() {
|
|
|
1488
1438
|
'bg-image': [{
|
|
1489
1439
|
bg: ['none', {
|
|
1490
1440
|
'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
|
|
1491
|
-
},
|
|
1441
|
+
}, isArbitraryImage]
|
|
1492
1442
|
}],
|
|
1493
1443
|
/**
|
|
1494
1444
|
* Background Color
|
|
@@ -1720,7 +1670,7 @@ function getDefaultConfig() {
|
|
|
1720
1670
|
* @see https://tailwindcss.com/docs/border-style
|
|
1721
1671
|
*/
|
|
1722
1672
|
'border-style': [{
|
|
1723
|
-
border: [
|
|
1673
|
+
border: [...getLineStyles(), 'hidden']
|
|
1724
1674
|
}],
|
|
1725
1675
|
/**
|
|
1726
1676
|
* Divide Width X
|
|
@@ -1821,21 +1771,21 @@ function getDefaultConfig() {
|
|
|
1821
1771
|
* @see https://tailwindcss.com/docs/outline-style
|
|
1822
1772
|
*/
|
|
1823
1773
|
'outline-style': [{
|
|
1824
|
-
outline: [''
|
|
1774
|
+
outline: ['', ...getLineStyles()]
|
|
1825
1775
|
}],
|
|
1826
1776
|
/**
|
|
1827
1777
|
* Outline Offset
|
|
1828
1778
|
* @see https://tailwindcss.com/docs/outline-offset
|
|
1829
1779
|
*/
|
|
1830
1780
|
'outline-offset': [{
|
|
1831
|
-
'outline-offset': [
|
|
1781
|
+
'outline-offset': [isLength, isArbitraryValue]
|
|
1832
1782
|
}],
|
|
1833
1783
|
/**
|
|
1834
1784
|
* Outline Width
|
|
1835
1785
|
* @see https://tailwindcss.com/docs/outline-width
|
|
1836
1786
|
*/
|
|
1837
1787
|
'outline-w': [{
|
|
1838
|
-
outline: [isLength]
|
|
1788
|
+
outline: [isLength, isArbitraryLength]
|
|
1839
1789
|
}],
|
|
1840
1790
|
/**
|
|
1841
1791
|
* Outline Color
|
|
@@ -1849,7 +1799,7 @@ function getDefaultConfig() {
|
|
|
1849
1799
|
* @see https://tailwindcss.com/docs/ring-width
|
|
1850
1800
|
*/
|
|
1851
1801
|
'ring-w': [{
|
|
1852
|
-
ring:
|
|
1802
|
+
ring: getLengthWithEmptyAndArbitrary()
|
|
1853
1803
|
}],
|
|
1854
1804
|
/**
|
|
1855
1805
|
* Ring Width Inset
|
|
@@ -1875,7 +1825,7 @@ function getDefaultConfig() {
|
|
|
1875
1825
|
* @see https://tailwindcss.com/docs/ring-offset-width
|
|
1876
1826
|
*/
|
|
1877
1827
|
'ring-offset-w': [{
|
|
1878
|
-
'ring-offset': [isLength]
|
|
1828
|
+
'ring-offset': [isLength, isArbitraryLength]
|
|
1879
1829
|
}],
|
|
1880
1830
|
/**
|
|
1881
1831
|
* Ring Offset Color
|
|
@@ -2420,10 +2370,27 @@ function getDefaultConfig() {
|
|
|
2420
2370
|
* @see https://tailwindcss.com/docs/touch-action
|
|
2421
2371
|
*/
|
|
2422
2372
|
touch: [{
|
|
2423
|
-
touch: ['auto', 'none', '
|
|
2424
|
-
|
|
2425
|
-
|
|
2373
|
+
touch: ['auto', 'none', 'manipulation']
|
|
2374
|
+
}],
|
|
2375
|
+
/**
|
|
2376
|
+
* Touch Action X
|
|
2377
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2378
|
+
*/
|
|
2379
|
+
'touch-x': [{
|
|
2380
|
+
'touch-pan': ['x', 'left', 'right']
|
|
2426
2381
|
}],
|
|
2382
|
+
/**
|
|
2383
|
+
* Touch Action Y
|
|
2384
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2385
|
+
*/
|
|
2386
|
+
'touch-y': [{
|
|
2387
|
+
'touch-pan': ['y', 'up', 'down']
|
|
2388
|
+
}],
|
|
2389
|
+
/**
|
|
2390
|
+
* Touch Action Pinch Zoom
|
|
2391
|
+
* @see https://tailwindcss.com/docs/touch-action
|
|
2392
|
+
*/
|
|
2393
|
+
'touch-pz': ['touch-pinch-zoom'],
|
|
2427
2394
|
/**
|
|
2428
2395
|
* User Select
|
|
2429
2396
|
* @see https://tailwindcss.com/docs/user-select
|
|
@@ -2451,7 +2418,7 @@ function getDefaultConfig() {
|
|
|
2451
2418
|
* @see https://tailwindcss.com/docs/stroke-width
|
|
2452
2419
|
*/
|
|
2453
2420
|
'stroke-w': [{
|
|
2454
|
-
stroke: [isLength, isArbitraryNumber]
|
|
2421
|
+
stroke: [isLength, isArbitraryLength, isArbitraryNumber]
|
|
2455
2422
|
}],
|
|
2456
2423
|
/**
|
|
2457
2424
|
* Stroke
|
|
@@ -2507,7 +2474,11 @@ function getDefaultConfig() {
|
|
|
2507
2474
|
'scroll-my': ['scroll-mt', 'scroll-mb'],
|
|
2508
2475
|
'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
|
|
2509
2476
|
'scroll-px': ['scroll-pr', 'scroll-pl'],
|
|
2510
|
-
'scroll-py': ['scroll-pt', 'scroll-pb']
|
|
2477
|
+
'scroll-py': ['scroll-pt', 'scroll-pb'],
|
|
2478
|
+
touch: ['touch-x', 'touch-y', 'touch-pz'],
|
|
2479
|
+
'touch-x': ['touch'],
|
|
2480
|
+
'touch-y': ['touch'],
|
|
2481
|
+
'touch-pz': ['touch']
|
|
2511
2482
|
},
|
|
2512
2483
|
conflictingClassGroupModifiers: {
|
|
2513
2484
|
'font-size': ['leading']
|
|
@@ -2515,12 +2486,75 @@ function getDefaultConfig() {
|
|
|
2515
2486
|
};
|
|
2516
2487
|
}
|
|
2517
2488
|
|
|
2518
|
-
|
|
2489
|
+
/**
|
|
2490
|
+
* @param baseConfig Config where other config will be merged into. This object will be mutated.
|
|
2491
|
+
* @param configExtension Partial config to merge into the `baseConfig`.
|
|
2492
|
+
*/
|
|
2493
|
+
function mergeConfigs(baseConfig, {
|
|
2494
|
+
cacheSize,
|
|
2495
|
+
prefix,
|
|
2496
|
+
separator,
|
|
2497
|
+
extend = {},
|
|
2498
|
+
override = {}
|
|
2499
|
+
}) {
|
|
2500
|
+
overrideProperty(baseConfig, 'cacheSize', cacheSize);
|
|
2501
|
+
overrideProperty(baseConfig, 'prefix', prefix);
|
|
2502
|
+
overrideProperty(baseConfig, 'separator', separator);
|
|
2503
|
+
for (const configKey in override) {
|
|
2504
|
+
overrideConfigProperties(baseConfig[configKey], override[configKey]);
|
|
2505
|
+
}
|
|
2506
|
+
for (const key in extend) {
|
|
2507
|
+
mergeConfigProperties(baseConfig[key], extend[key]);
|
|
2508
|
+
}
|
|
2509
|
+
return baseConfig;
|
|
2510
|
+
}
|
|
2511
|
+
function overrideProperty(baseObject, overrideKey, overrideValue) {
|
|
2512
|
+
if (overrideValue !== undefined) {
|
|
2513
|
+
baseObject[overrideKey] = overrideValue;
|
|
2514
|
+
}
|
|
2515
|
+
}
|
|
2516
|
+
function overrideConfigProperties(baseObject, overrideObject) {
|
|
2517
|
+
if (overrideObject) {
|
|
2518
|
+
for (const key in overrideObject) {
|
|
2519
|
+
overrideProperty(baseObject, key, overrideObject[key]);
|
|
2520
|
+
}
|
|
2521
|
+
}
|
|
2522
|
+
}
|
|
2523
|
+
function mergeConfigProperties(baseObject, mergeObject) {
|
|
2524
|
+
if (mergeObject) {
|
|
2525
|
+
for (const key in mergeObject) {
|
|
2526
|
+
const mergeValue = mergeObject[key];
|
|
2527
|
+
if (mergeValue !== undefined) {
|
|
2528
|
+
baseObject[key] = (baseObject[key] || []).concat(mergeValue);
|
|
2529
|
+
}
|
|
2530
|
+
}
|
|
2531
|
+
}
|
|
2532
|
+
}
|
|
2533
|
+
function extendTailwindMerge(configExtension, ...createConfig) {
|
|
2534
|
+
return typeof configExtension === 'function' ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) : createTailwindMerge(() => mergeConfigs(getDefaultConfig(), configExtension), ...createConfig);
|
|
2535
|
+
}
|
|
2519
2536
|
|
|
2520
2537
|
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}
|
|
2521
2538
|
|
|
2539
|
+
const customTwMerge = extendTailwindMerge({
|
|
2540
|
+
classGroups: {
|
|
2541
|
+
shadow: Object.keys(boxShadows).map((s) => `shadow-${s}`),
|
|
2542
|
+
"font-size": Object.keys(fontSizes).map((s) => `text-${s}`),
|
|
2543
|
+
"font-weight": Object.keys(fontWeights).map((s) => `font-${s}`),
|
|
2544
|
+
"line-height": Object.keys(lineHeights).map((s) => `leading-${s}`),
|
|
2545
|
+
scale: Object.keys(scales).map((s) => `scale-${s}`),
|
|
2546
|
+
height: Object.keys(heights).map((s) => `h-${s}`),
|
|
2547
|
+
borderRadius: Object.keys(borderRadius).map((s) => `rounded-${s}`),
|
|
2548
|
+
colors: Object.entries(colorPalette).reduce((acc, currentVal) => {
|
|
2549
|
+
const colors = Object.keys(currentVal[1]).map(
|
|
2550
|
+
(c) => `text-${currentVal[0]}-${c}`
|
|
2551
|
+
);
|
|
2552
|
+
return [...acc, ...colors];
|
|
2553
|
+
}, [])
|
|
2554
|
+
}
|
|
2555
|
+
});
|
|
2522
2556
|
const cn = (...inputs) => {
|
|
2523
|
-
return
|
|
2557
|
+
return customTwMerge(clsx(inputs));
|
|
2524
2558
|
};
|
|
2525
2559
|
|
|
2526
2560
|
export { cn };
|