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