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