tailwindcss 0.0.0-oxide.1 → 0.0.0-oxide.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cli.js CHANGED
@@ -102,7 +102,7 @@ function convertString(value) {
102
102
  }
103
103
 
104
104
  // package.json
105
- var version = "0.0.0-oxide.1";
105
+ var version = "0.0.0-oxide.2";
106
106
  var package_default = {
107
107
  name: "tailwindcss",
108
108
  version,
@@ -211,184 +211,6 @@ function walk(ast, visit) {
211
211
  }
212
212
  }
213
213
 
214
- // src/css-parser.ts
215
- function parse2(input) {
216
- let ast = [];
217
- let licenseComments = [];
218
- let stack = [];
219
- let parent = null;
220
- let node = null;
221
- let current = "";
222
- let closingBracketStack = "";
223
- for (let i = 0; i < input.length; i++) {
224
- let char = input[i];
225
- if (char === "\\") {
226
- current += input.slice(i, i + 2);
227
- i += 1;
228
- } else if (char === "/" && input[i + 1] === "*") {
229
- let start = i;
230
- for (let j = i + 2; j < input.length; j++) {
231
- if (input[j] === "\\") {
232
- j += 1;
233
- } else if (input[j] === "*" && input[j + 1] === "/") {
234
- i = j + 1;
235
- break;
236
- }
237
- }
238
- let commentString = input.slice(start, i + 1);
239
- if (commentString[2] === "!") {
240
- licenseComments.push(comment(commentString.slice(2, -2)));
241
- }
242
- } else if (char === '"' || char === "'") {
243
- let start = i;
244
- for (let j = i + 1; j < input.length; j++) {
245
- if (input[j] === "\\") {
246
- j += 1;
247
- } else if (input[j] === char) {
248
- i = j;
249
- break;
250
- } else if (input[j] === ";" && input[j + 1] === "\n") {
251
- throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`);
252
- } else if (input[j] === "\n") {
253
- throw new Error(`Unterminated string: ${input.slice(start, j) + char}`);
254
- }
255
- }
256
- current += input.slice(start, i + 1);
257
- } else if ((char === " " || char === "\n" || char === " ") && (input[i + 1] === " " || input[i + 1] === "\n" || input[i + 1] === " ")) {
258
- continue;
259
- } else if (char === "-" && input[i + 1] === "-" && current.length === 0) {
260
- let closingBracketStack2 = "";
261
- let start = i;
262
- let colonIdx = -1;
263
- for (let j = i + 2; j < input.length; j++) {
264
- if (input[j] === "\\") {
265
- j += 1;
266
- } else if (input[j] === "/" && input[j + 1] === "*") {
267
- for (let k = j + 2; k < input.length; k++) {
268
- if (input[k] === "\\") {
269
- k += 1;
270
- } else if (input[k] === "*" && input[k + 1] === "/") {
271
- j = k + 1;
272
- break;
273
- }
274
- }
275
- } else if (colonIdx === -1 && input[j] === ":") {
276
- colonIdx = current.length + j - start;
277
- } else if (input[j] === ";" && closingBracketStack2.length === 0) {
278
- current += input.slice(start, j);
279
- i = j;
280
- break;
281
- } else if (input[j] === "(") {
282
- closingBracketStack2 += ")";
283
- } else if (input[j] === "[") {
284
- closingBracketStack2 += "]";
285
- } else if (input[j] === "{") {
286
- closingBracketStack2 += "}";
287
- } else if ((input[j] === "}" || input.length - 1 === j) && closingBracketStack2.length === 0) {
288
- i = j - 1;
289
- current += input.slice(start, j);
290
- break;
291
- } else if (input[j] === ")" || input[j] === "]" || input[j] === "}") {
292
- if (closingBracketStack2.length > 0 && input[j] === closingBracketStack2[closingBracketStack2.length - 1]) {
293
- closingBracketStack2 = closingBracketStack2.slice(0, -1);
294
- }
295
- }
296
- }
297
- let declaration = parseDeclaration(current, colonIdx);
298
- if (parent) {
299
- parent.nodes.push(declaration);
300
- } else {
301
- ast.push(declaration);
302
- }
303
- current = "";
304
- } else if (char === ";" && current[0] === "@") {
305
- node = rule(current, []);
306
- if (parent) {
307
- parent.nodes.push(node);
308
- } else {
309
- ast.push(node);
310
- }
311
- current = "";
312
- node = null;
313
- } else if (char === ";") {
314
- let declaration = parseDeclaration(current);
315
- if (parent) {
316
- parent.nodes.push(declaration);
317
- } else {
318
- ast.push(declaration);
319
- }
320
- current = "";
321
- } else if (char === "{") {
322
- closingBracketStack += "}";
323
- node = rule(current.trim(), []);
324
- if (parent) {
325
- parent.nodes.push(node);
326
- }
327
- stack.push(parent);
328
- parent = node;
329
- current = "";
330
- node = null;
331
- } else if (char === "}") {
332
- if (closingBracketStack === "") {
333
- throw new Error(`Missing opening {`);
334
- } else {
335
- closingBracketStack = closingBracketStack.slice(0, -1);
336
- }
337
- if (current.length > 0) {
338
- if (current[0] === "@") {
339
- node = rule(current.trim(), []);
340
- if (parent) {
341
- parent.nodes.push(node);
342
- } else {
343
- ast.push(node);
344
- }
345
- current = "";
346
- node = null;
347
- } else {
348
- let colonIdx = current.indexOf(":");
349
- if (parent) {
350
- let importantIdx = current.indexOf("!important", colonIdx + 1);
351
- parent.nodes.push({
352
- kind: "declaration",
353
- property: current.slice(0, colonIdx).trim(),
354
- value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
355
- important: importantIdx !== -1
356
- });
357
- }
358
- }
359
- }
360
- let grandParent = stack.pop() ?? null;
361
- if (grandParent === null && parent) {
362
- ast.push(parent);
363
- }
364
- parent = grandParent;
365
- current = "";
366
- node = null;
367
- } else {
368
- if (current.length === 0 && (char === " " || char === "\n" || char === " ")) {
369
- continue;
370
- }
371
- current += char;
372
- }
373
- }
374
- if (closingBracketStack.length > 0 && parent) {
375
- throw new Error(`Missing closing } at ${parent.selector}`);
376
- }
377
- if (licenseComments.length > 0) {
378
- return licenseComments.concat(ast);
379
- }
380
- return ast;
381
- }
382
- function parseDeclaration(current, colonIdx = current.indexOf(":")) {
383
- let importantIdx = current.indexOf("!important", colonIdx + 1);
384
- return {
385
- kind: "declaration",
386
- property: current.slice(0, colonIdx).trim(),
387
- value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
388
- important: importantIdx !== -1
389
- };
390
- }
391
-
392
214
  // src/utils/math-operators.ts
393
215
  var mathFunctions = [
394
216
  "calc",
@@ -789,512 +611,9 @@ function parseCandidate(input, utilities, parsedVariants) {
789
611
  return candidate;
790
612
  }
791
613
 
792
- // src/property-order.ts
793
- var property_order_default = [
794
- "pointer-events",
795
- "visibility",
796
- "position",
797
- // How do we make `inset-x-0` come before `top-0`?
798
- "inset",
799
- "inset-inline",
800
- "inset-block",
801
- "inset-inline-start",
802
- "inset-inline-end",
803
- "top",
804
- "right",
805
- "bottom",
806
- "left",
807
- "isolation",
808
- "z-index",
809
- "order",
810
- "grid-column",
811
- "grid-column-start",
812
- "grid-column-end",
813
- "grid-row",
814
- "grid-row-start",
815
- "grid-row-end",
816
- "float",
817
- "clear",
818
- // How do we make `mx-0` come before `mt-0`?
819
- // Idea: `margin-x` property that we compile away with a Visitor plugin?
820
- "margin",
821
- "margin-inline",
822
- "margin-block",
823
- "margin-inline-start",
824
- "margin-inline-end",
825
- "margin-top",
826
- "margin-right",
827
- "margin-bottom",
828
- "margin-left",
829
- "box-sizing",
830
- "display",
831
- "aspect-ratio",
832
- "height",
833
- "max-height",
834
- "min-height",
835
- "width",
836
- "max-width",
837
- "min-width",
838
- "flex",
839
- "flex-shrink",
840
- "flex-grow",
841
- "flex-basis",
842
- "table-layout",
843
- "caption-side",
844
- "border-collapse",
845
- // There's no `border-spacing-x` property, we use variables, how to sort?
846
- "border-spacing",
847
- // '--tw-border-spacing-x',
848
- // '--tw-border-spacing-y',
849
- "transform-origin",
850
- // '--tw-translate-x',
851
- // '--tw-translate-y',
852
- "translate",
853
- "rotate",
854
- // '--tw-rotate',
855
- "--tw-skew-x",
856
- "--tw-skew-y",
857
- "scale",
858
- // '--tw-scale-x',
859
- // '--tw-scale-y',
860
- "transform",
861
- "animation",
862
- "cursor",
863
- "touch-action",
864
- "--tw-pan-x",
865
- "--tw-pan-y",
866
- "--tw-pinch-zoom",
867
- "resize",
868
- "scroll-snap-type",
869
- "--tw-scroll-snap-strictness",
870
- "scroll-snap-align",
871
- "scroll-snap-stop",
872
- "scroll-margin",
873
- "scroll-margin-inline-start",
874
- "scroll-margin-inline-end",
875
- "scroll-margin-top",
876
- "scroll-margin-right",
877
- "scroll-margin-bottom",
878
- "scroll-margin-left",
879
- "scroll-padding",
880
- "scroll-padding-inline-start",
881
- "scroll-padding-inline-end",
882
- "scroll-padding-top",
883
- "scroll-padding-right",
884
- "scroll-padding-bottom",
885
- "scroll-padding-left",
886
- "list-style-position",
887
- "list-style-type",
888
- "list-style-image",
889
- "appearance",
890
- "columns",
891
- "break-before",
892
- "break-inside",
893
- "break-after",
894
- "grid-auto-columns",
895
- "grid-auto-flow",
896
- "grid-auto-rows",
897
- "grid-template-columns",
898
- "grid-template-rows",
899
- "flex-direction",
900
- "flex-wrap",
901
- "place-content",
902
- "place-items",
903
- "align-content",
904
- "align-items",
905
- "justify-content",
906
- "justify-items",
907
- "gap",
908
- "column-gap",
909
- "row-gap",
910
- "--tw-space-x-reverse",
911
- "--tw-space-y-reverse",
912
- // Is there a more "real" property we could use for this?
913
- "divide-x-width",
914
- "divide-y-width",
915
- "--tw-divide-y-reverse",
916
- "divide-style",
917
- "divide-color",
918
- "--tw-divide-opacity",
919
- "place-self",
920
- "align-self",
921
- "justify-self",
922
- "overflow",
923
- "overflow-x",
924
- "overflow-y",
925
- "overscroll-behavior",
926
- "overscroll-behavior-x",
927
- "overscroll-behavior-y",
928
- "scroll-behavior",
929
- "text-overflow",
930
- "hyphens",
931
- "white-space",
932
- "text-wrap",
933
- "overflow-wrap",
934
- "work-break",
935
- "border-radius",
936
- "border-start-radius",
937
- // Not real
938
- "border-end-radius",
939
- // Not real
940
- "border-top-radius",
941
- // Not real
942
- "border-right-radius",
943
- // Not real
944
- "border-bottom-radius",
945
- // Not real
946
- "border-left-radius",
947
- // Not real
948
- "border-start-start-radius",
949
- "border-start-end-radius",
950
- "border-end-end-radius",
951
- "border-end-start-radius",
952
- "border-top-left-radius",
953
- "border-top-right-radius",
954
- "border-bottom-right-radius",
955
- "border-bottom-left-radius",
956
- "border-width",
957
- "border-inline-width",
958
- // Not real
959
- "border-inline-start-width",
960
- "border-inline-end-width",
961
- "border-top-width",
962
- "border-right-width",
963
- "border-bottom-width",
964
- "border-left-width",
965
- "border-style",
966
- "border-color",
967
- "border-x-color",
968
- // Not real
969
- "border-y-color",
970
- // Not real
971
- "border-inline-start-color",
972
- "border-inline-end-color",
973
- "border-top-color",
974
- "border-right-color",
975
- "border-bottom-color",
976
- "border-left-color",
977
- "--tw-border-opacity",
978
- "background-color",
979
- "--tw-bg-opacity",
980
- "background-image",
981
- "--tw-gradient-stops",
982
- "--tw-gradient-via-stops",
983
- "--tw-gradient-from",
984
- "--tw-gradient-from-position",
985
- "--tw-gradient-via",
986
- "--tw-gradient-via-position",
987
- "--tw-gradient-to",
988
- "--tw-gradient-to-position",
989
- "box-decoration-break",
990
- "background-size",
991
- "background-attachment",
992
- "background-clip",
993
- "background-position",
994
- "background-repeat",
995
- "background-origin",
996
- "fill",
997
- "stroke",
998
- "stroke-width",
999
- "object-fit",
1000
- "object-position",
1001
- "padding",
1002
- "padding-inline",
1003
- "padding-block",
1004
- "padding-inline-start",
1005
- "padding-inline-end",
1006
- "padding-top",
1007
- "padding-right",
1008
- "padding-bottom",
1009
- "padding-left",
1010
- "text-align",
1011
- "text-indent",
1012
- "vertical-align",
1013
- "font-family",
1014
- "font-size",
1015
- "font-weight",
1016
- "text-transform",
1017
- "font-style",
1018
- "font-variant-numeric",
1019
- "line-height",
1020
- "letter-spacing",
1021
- "color",
1022
- "--tw-text-opacity",
1023
- "text-decoration-line",
1024
- "text-decoration-color",
1025
- "text-decoration-style",
1026
- "text-decoration-thickness",
1027
- "text-underline-offset",
1028
- "-webkit-font-smoothing",
1029
- "placeholder-color",
1030
- // Not real
1031
- "--tw-placeholder-opacity",
1032
- "caret-color",
1033
- "accent-color",
1034
- "opacity",
1035
- "background-blend-mode",
1036
- "mix-blend-mode",
1037
- "box-shadow",
1038
- "--tw-shadow",
1039
- "--tw-shadow-color",
1040
- "--tw-ring-shadow",
1041
- "--tw-ring-color",
1042
- "--tw-inset-shadow",
1043
- "--tw-inset-shadow-color",
1044
- "--tw-inset-ring-shadow",
1045
- "--tw-inset-ring-color",
1046
- "--tw-ring-opacity",
1047
- "--tw-ring-offset-width",
1048
- "--tw-ring-offset-color",
1049
- "outline",
1050
- "outline-width",
1051
- "outline-offset",
1052
- "outline-color",
1053
- "--tw-blur",
1054
- "--tw-brightness",
1055
- "--tw-contast",
1056
- "--tw-drop-shadow",
1057
- "--tw-grayscale",
1058
- "--tw-hue-rotate",
1059
- "--tw-invert",
1060
- "--tw-saturate",
1061
- "--tw-sepia",
1062
- "filter",
1063
- "--tw-backdrop-blur",
1064
- "--tw-backdrop-brightness",
1065
- "--tw-backdrop-contast",
1066
- "--tw-backdrop-grayscale",
1067
- "--tw-backdrop-hue-rotate",
1068
- "--tw-backdrop-invert",
1069
- "--tw-backdrop-opacity",
1070
- "--tw-backdrop-saturate",
1071
- "--tw-backdrop-sepia",
1072
- "backdrop-filter",
1073
- "transition-property",
1074
- "transition-delay",
1075
- "transition-duration",
1076
- "transition-timing-function",
1077
- "will-change",
1078
- "contain",
1079
- "content",
1080
- "forced-color-adjust"
1081
- ];
1082
-
1083
- // src/utils/default-map.ts
1084
- var DefaultMap = class extends Map {
1085
- constructor(factory) {
1086
- super();
1087
- this.factory = factory;
1088
- }
1089
- get(key) {
1090
- let value = super.get(key);
1091
- if (value === void 0) {
1092
- value = this.factory(key, this);
1093
- this.set(key, value);
1094
- }
1095
- return value;
1096
- }
1097
- };
1098
-
1099
- // src/utils/escape.ts
1100
- function escape(value) {
1101
- if (arguments.length == 0) {
1102
- throw new TypeError("`CSS.escape` requires an argument.");
1103
- }
1104
- var string = String(value);
1105
- var length = string.length;
1106
- var index = -1;
1107
- var codeUnit;
1108
- var result = "";
1109
- var firstCodeUnit = string.charCodeAt(0);
1110
- if (
1111
- // If the character is the first character and is a `-` (U+002D), and
1112
- // there is no second character, […]
1113
- length == 1 && firstCodeUnit == 45
1114
- ) {
1115
- return "\\" + string;
1116
- }
1117
- while (++index < length) {
1118
- codeUnit = string.charCodeAt(index);
1119
- if (codeUnit == 0) {
1120
- result += "\uFFFD";
1121
- continue;
1122
- }
1123
- if (
1124
- // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
1125
- // U+007F, […]
1126
- codeUnit >= 1 && codeUnit <= 31 || codeUnit == 127 || // If the character is the first character and is in the range [0-9]
1127
- // (U+0030 to U+0039), […]
1128
- index == 0 && codeUnit >= 48 && codeUnit <= 57 || // If the character is the second character and is in the range [0-9]
1129
- // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
1130
- index == 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit == 45
1131
- ) {
1132
- result += "\\" + codeUnit.toString(16) + " ";
1133
- continue;
1134
- }
1135
- if (codeUnit >= 128 || codeUnit == 45 || codeUnit == 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
1136
- result += string.charAt(index);
1137
- continue;
1138
- }
1139
- result += "\\" + string.charAt(index);
1140
- }
1141
- return result;
1142
- }
1143
-
1144
- // src/parse.ts
1145
- function applyImportant(ast) {
1146
- for (let node of ast) {
1147
- if (node.kind === "rule" && node.selector === "@at-root") {
1148
- continue;
1149
- }
1150
- if (node.kind === "declaration") {
1151
- node.important = true;
1152
- } else if (node.kind === "rule") {
1153
- applyImportant(node.nodes);
1154
- }
1155
- }
1156
- }
1157
- function applyVariant(node, variant, variants) {
1158
- if (variant.kind === "arbitrary") {
1159
- node.nodes = [rule(variant.selector, node.nodes)];
1160
- return;
1161
- }
1162
- let applyVariantFn = variants.get(variant.root);
1163
- if (variant.kind === "compound") {
1164
- let result2 = applyVariant(node, variant.variant, variants);
1165
- if (result2 === null)
1166
- return null;
1167
- for (let child of node.nodes) {
1168
- let result3 = applyVariantFn(child, variant);
1169
- if (result3 === null)
1170
- return null;
1171
- }
1172
- return;
1173
- }
1174
- let result = applyVariantFn(node, variant);
1175
- if (result === null)
1176
- return null;
1177
- }
1178
- function parse3(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
1179
- rawCandidates.sort();
1180
- let nodeSorting = /* @__PURE__ */ new Map();
1181
- let astNodes = [];
1182
- let parsedVariants = new DefaultMap((variant, map) => {
1183
- return parseVariant(variant, designSystem.variants, map);
1184
- });
1185
- let candidates = /* @__PURE__ */ new Map();
1186
- next:
1187
- for (let rawCandidate of rawCandidates) {
1188
- let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants);
1189
- if (candidate === null) {
1190
- if (throwOnInvalidCandidate) {
1191
- throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
1192
- } else {
1193
- continue next;
1194
- }
1195
- }
1196
- candidates.set(candidate, rawCandidate);
1197
- }
1198
- let variants = Array.from(parsedVariants.values()).sort((a, z) => {
1199
- return designSystem.variants.compare(a, z);
1200
- });
1201
- next:
1202
- for (let [candidate, rawCandidate] of candidates) {
1203
- let ruleNodes = [];
1204
- if (candidate.kind === "arbitrary") {
1205
- ruleNodes = [decl(candidate.property, candidate.value)];
1206
- } else if (candidate.kind === "static" || candidate.kind === "functional") {
1207
- let { matchFn } = designSystem.utilities.get(candidate.root);
1208
- let matchNodes = matchFn(candidate);
1209
- if (matchNodes === void 0) {
1210
- if (throwOnInvalidCandidate) {
1211
- throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
1212
- } else {
1213
- continue next;
1214
- }
1215
- }
1216
- ruleNodes = matchNodes;
1217
- }
1218
- let propertySort = getPropertySort(ruleNodes);
1219
- if (candidate.important) {
1220
- applyImportant(ruleNodes);
1221
- }
1222
- let node = {
1223
- kind: "rule",
1224
- selector: `.${escape(rawCandidate)}`,
1225
- nodes: ruleNodes
1226
- };
1227
- let variantOrder = 0n;
1228
- for (let variant of candidate.variants) {
1229
- let result = applyVariant(node, variant, designSystem.variants);
1230
- if (result === null) {
1231
- if (throwOnInvalidCandidate) {
1232
- throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
1233
- } else {
1234
- continue next;
1235
- }
1236
- }
1237
- variantOrder |= 1n << BigInt(variants.indexOf(variant));
1238
- }
1239
- nodeSorting.set(node, {
1240
- properties: propertySort,
1241
- variants: variantOrder,
1242
- candidate: rawCandidate
1243
- });
1244
- astNodes.push(node);
1245
- }
1246
- astNodes.sort((a, z) => {
1247
- let aSorting = nodeSorting.get(a);
1248
- let zSorting = nodeSorting.get(z);
1249
- if (aSorting.variants - zSorting.variants !== 0n) {
1250
- return Number(aSorting.variants - zSorting.variants);
1251
- }
1252
- let offset = 0;
1253
- while (aSorting.properties.length < offset && zSorting.properties.length < offset && aSorting.properties[offset] === zSorting.properties[offset]) {
1254
- offset += 1;
1255
- }
1256
- return (
1257
- // Sort by lowest property index first
1258
- (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties
1259
- zSorting.properties.length - aSorting.properties.length
1260
- );
1261
- });
1262
- return {
1263
- astNodes,
1264
- nodeSorting
1265
- };
1266
- }
1267
- function getPropertySort(nodes) {
1268
- let propertySort = /* @__PURE__ */ new Set();
1269
- let q = nodes.slice();
1270
- next:
1271
- while (q.length > 0) {
1272
- let node = q.shift();
1273
- if (node.kind === "declaration") {
1274
- if (node.property === "--tw-sort") {
1275
- let idx2 = property_order_default.indexOf(node.value);
1276
- if (idx2 !== -1) {
1277
- propertySort.add(idx2);
1278
- break next;
1279
- }
1280
- }
1281
- let idx = property_order_default.indexOf(node.property);
1282
- if (idx !== -1)
1283
- propertySort.add(idx);
1284
- } else if (node.kind === "rule") {
1285
- if (node.selector === "@at-root")
1286
- continue;
1287
- for (let child of node.nodes) {
1288
- q.push(child);
1289
- }
1290
- }
1291
- }
1292
- return Array.from(propertySort).sort((a, z) => a - z);
1293
- }
1294
-
1295
614
  // src/sort.ts
1296
615
  function getClassOrder(design, classes) {
1297
- let { astNodes, nodeSorting } = parse3(Array.from(classes), design, {
616
+ let { astNodes, nodeSorting } = compileCandidates(Array.from(classes), design, {
1298
617
  throwOnInvalidCandidate: false
1299
618
  });
1300
619
  let sorted = new Map(classes.map((className) => [className, null]));
@@ -1701,11 +1020,11 @@ function replaceShadowColors(input, replacement) {
1701
1020
  // src/utilities.ts
1702
1021
  var Utilities = class {
1703
1022
  utilities = /* @__PURE__ */ new Map();
1704
- static(name, matchFn) {
1705
- this.set(name, { kind: "static", matchFn });
1023
+ static(name, compileFn) {
1024
+ this.set(name, { kind: "static", compileFn });
1706
1025
  }
1707
- functional(name, matchFn) {
1708
- this.set(name, { kind: "functional", matchFn });
1026
+ functional(name, compileFn) {
1027
+ this.set(name, { kind: "functional", compileFn });
1709
1028
  }
1710
1029
  has(name) {
1711
1030
  return this.utilities.has(name);
@@ -1719,10 +1038,10 @@ var Utilities = class {
1719
1038
  keys() {
1720
1039
  return this.utilities.keys();
1721
1040
  }
1722
- set(name, { kind, matchFn }) {
1041
+ set(name, { kind, compileFn }) {
1723
1042
  this.utilities.set(name, {
1724
1043
  kind,
1725
- matchFn
1044
+ compileFn
1726
1045
  });
1727
1046
  }
1728
1047
  };
@@ -4303,558 +3622,1239 @@ function createUtilities(theme) {
4303
3622
  }
4304
3623
  }
4305
3624
  }
4306
- switch (candidate.value.value) {
4307
- case "none":
4308
- return [
4309
- boxShadowProperties(),
4310
- decl("--tw-inset-shadow", nullShadow),
4311
- decl("--tw-inset-shadow-colored", nullShadow),
4312
- decl("box-shadow", cssBoxShadowValue)
4313
- ];
4314
- }
3625
+ switch (candidate.value.value) {
3626
+ case "none":
3627
+ return [
3628
+ boxShadowProperties(),
3629
+ decl("--tw-inset-shadow", nullShadow),
3630
+ decl("--tw-inset-shadow-colored", nullShadow),
3631
+ decl("box-shadow", cssBoxShadowValue)
3632
+ ];
3633
+ }
3634
+ {
3635
+ let value = theme.resolve(candidate.value.value, ["--inset-shadow"]);
3636
+ if (value) {
3637
+ return [
3638
+ boxShadowProperties(),
3639
+ decl("--tw-inset-shadow", value),
3640
+ decl(
3641
+ "--tw-inset-shadow-colored",
3642
+ replaceShadowColors(value, "var(--tw-inset-shadow-color)")
3643
+ ),
3644
+ decl("box-shadow", cssBoxShadowValue)
3645
+ ];
3646
+ }
3647
+ }
3648
+ {
3649
+ let value = resolveThemeColor(candidate, theme, ["--box-shadow-color", "--color"]);
3650
+ if (value) {
3651
+ return [
3652
+ boxShadowProperties(),
3653
+ decl("--tw-inset-shadow-color", value),
3654
+ decl("--tw-inset-shadow", "var(--tw-inset-shadow-colored)")
3655
+ ];
3656
+ }
3657
+ }
3658
+ });
3659
+ staticUtility("ring-inset", [boxShadowProperties, ["--tw-ring-inset", "inset"]]);
3660
+ utilities.functional("ring", (candidate) => {
3661
+ if (candidate.negative)
3662
+ return;
3663
+ if (!candidate.value) {
3664
+ return [
3665
+ boxShadowProperties(),
3666
+ decl("--tw-ring-shadow", ringShadowValue2("var(--default-ring-width)")),
3667
+ decl("box-shadow", cssBoxShadowValue)
3668
+ ];
3669
+ }
3670
+ if (candidate.value.kind === "arbitrary") {
3671
+ let value = candidate.value.value;
3672
+ let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
3673
+ switch (type) {
3674
+ case "length": {
3675
+ return [
3676
+ boxShadowProperties(),
3677
+ decl("--tw-ring-shadow", ringShadowValue2(value)),
3678
+ decl("box-shadow", cssBoxShadowValue)
3679
+ ];
3680
+ }
3681
+ default: {
3682
+ value = asColor(value, candidate.modifier, theme);
3683
+ return [decl("--tw-ring-color", value)];
3684
+ }
3685
+ }
3686
+ }
3687
+ {
3688
+ let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
3689
+ if (value) {
3690
+ return [decl("--tw-ring-color", value)];
3691
+ }
3692
+ }
3693
+ {
3694
+ let value = theme.resolve(candidate.value.value, ["--ring-width"]);
3695
+ if (!value && !isNaN(Number(candidate.value.value))) {
3696
+ value = `${candidate.value.value}px`;
3697
+ }
3698
+ if (value) {
3699
+ return [
3700
+ boxShadowProperties(),
3701
+ decl("--tw-ring-shadow", ringShadowValue2(value)),
3702
+ decl("box-shadow", cssBoxShadowValue)
3703
+ ];
3704
+ }
3705
+ }
3706
+ });
3707
+ utilities.functional("inset-ring", (candidate) => {
3708
+ if (candidate.negative)
3709
+ return;
3710
+ if (!candidate.value) {
3711
+ return [
3712
+ boxShadowProperties(),
3713
+ decl("--tw-inset-ring-shadow", insetRingShadowValue2("1px")),
3714
+ decl("box-shadow", cssBoxShadowValue)
3715
+ ];
3716
+ }
3717
+ if (candidate.value.kind === "arbitrary") {
3718
+ let value = candidate.value.value;
3719
+ let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
3720
+ switch (type) {
3721
+ case "length": {
3722
+ return [
3723
+ boxShadowProperties(),
3724
+ decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
3725
+ decl("box-shadow", cssBoxShadowValue)
3726
+ ];
3727
+ }
3728
+ default: {
3729
+ value = asColor(value, candidate.modifier, theme);
3730
+ return [decl("--tw-inset-ring-color", value)];
3731
+ }
3732
+ }
3733
+ }
3734
+ {
3735
+ let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
3736
+ if (value) {
3737
+ return [decl("--tw-inset-ring-color", value)];
3738
+ }
3739
+ }
3740
+ {
3741
+ let value = theme.resolve(candidate.value.value, ["--ring-width"]);
3742
+ if (!value && !isNaN(Number(candidate.value.value))) {
3743
+ value = `${candidate.value.value}px`;
3744
+ }
3745
+ if (value) {
3746
+ return [
3747
+ boxShadowProperties(),
3748
+ decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
3749
+ decl("box-shadow", cssBoxShadowValue)
3750
+ ];
3751
+ }
3752
+ }
3753
+ });
3754
+ let ringOffsetShadowValue = "var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)";
3755
+ utilities.functional("ring-offset", (candidate) => {
3756
+ if (candidate.negative || !candidate.value) {
3757
+ return;
3758
+ }
3759
+ if (candidate.value.kind === "arbitrary") {
3760
+ let value = candidate.value.value;
3761
+ let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
3762
+ switch (type) {
3763
+ case "length": {
3764
+ return [
3765
+ decl("--tw-ring-offset-width", value),
3766
+ decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
3767
+ ];
3768
+ }
3769
+ default: {
3770
+ value = asColor(value, candidate.modifier, theme);
3771
+ return [decl("--tw-ring-offset-color", value)];
3772
+ }
3773
+ }
3774
+ }
4315
3775
  {
4316
- let value = theme.resolve(candidate.value.value, ["--inset-shadow"]);
3776
+ let value = theme.resolve(candidate.value.value, ["--ring-offset-width"]);
4317
3777
  if (value) {
4318
3778
  return [
4319
- boxShadowProperties(),
4320
- decl("--tw-inset-shadow", value),
4321
- decl(
4322
- "--tw-inset-shadow-colored",
4323
- replaceShadowColors(value, "var(--tw-inset-shadow-color)")
4324
- ),
4325
- decl("box-shadow", cssBoxShadowValue)
3779
+ decl("--tw-ring-offset-width", value),
3780
+ decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
3781
+ ];
3782
+ } else if (!isNaN(Number(candidate.value.value))) {
3783
+ return [
3784
+ decl("--tw-ring-offset-width", `${candidate.value.value}px`),
3785
+ decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4326
3786
  ];
4327
3787
  }
4328
3788
  }
4329
3789
  {
4330
- let value = resolveThemeColor(candidate, theme, ["--box-shadow-color", "--color"]);
3790
+ let value = resolveThemeColor(candidate, theme, ["--ring-offset-color", "--color"]);
4331
3791
  if (value) {
4332
- return [
4333
- boxShadowProperties(),
4334
- decl("--tw-inset-shadow-color", value),
4335
- decl("--tw-inset-shadow", "var(--tw-inset-shadow-colored)")
4336
- ];
3792
+ return [decl("--tw-ring-offset-color", value)];
4337
3793
  }
4338
3794
  }
4339
3795
  });
4340
- staticUtility("ring-inset", [boxShadowProperties, ["--tw-ring-inset", "inset"]]);
4341
- utilities.functional("ring", (candidate) => {
4342
- if (candidate.negative)
3796
+ }
3797
+ return utilities;
3798
+ }
3799
+
3800
+ // src/utils/default-map.ts
3801
+ var DefaultMap = class extends Map {
3802
+ constructor(factory) {
3803
+ super();
3804
+ this.factory = factory;
3805
+ }
3806
+ get(key) {
3807
+ let value = super.get(key);
3808
+ if (value === void 0) {
3809
+ value = this.factory(key, this);
3810
+ this.set(key, value);
3811
+ }
3812
+ return value;
3813
+ }
3814
+ };
3815
+
3816
+ // src/variants.ts
3817
+ var Variants = class {
3818
+ compareFns = /* @__PURE__ */ new Map();
3819
+ variants = /* @__PURE__ */ new Map();
3820
+ /**
3821
+ * Registering a group of variants should result in the same sort number for
3822
+ * all the variants. This is to ensure that the variants are applied in the
3823
+ * correct order.
3824
+ */
3825
+ groupOrder = null;
3826
+ /**
3827
+ * Keep track of the last sort order instead of using the size of the map to
3828
+ * avoid unnecessarily skipping order numbers.
3829
+ */
3830
+ lastOrder = 0;
3831
+ static(name, applyFn, { compounds } = {}) {
3832
+ this.set(name, { kind: "static", applyFn, compounds: compounds ?? true });
3833
+ }
3834
+ functional(name, applyFn, { compounds } = {}) {
3835
+ this.set(name, { kind: "functional", applyFn, compounds: compounds ?? true });
3836
+ }
3837
+ compound(name, applyFn, { compounds } = {}) {
3838
+ this.set(name, { kind: "compound", applyFn, compounds: compounds ?? true });
3839
+ }
3840
+ group(fn, compareFn) {
3841
+ this.groupOrder = this.nextOrder();
3842
+ if (compareFn)
3843
+ this.compareFns.set(this.groupOrder, compareFn);
3844
+ fn();
3845
+ this.groupOrder = null;
3846
+ }
3847
+ has(name) {
3848
+ return this.variants.has(name);
3849
+ }
3850
+ get(name) {
3851
+ return this.variants.get(name)?.applyFn;
3852
+ }
3853
+ kind(name) {
3854
+ return this.variants.get(name)?.kind;
3855
+ }
3856
+ compounds(name) {
3857
+ return this.variants.get(name)?.compounds;
3858
+ }
3859
+ compare(a, z) {
3860
+ if (a === z)
3861
+ return 0;
3862
+ if (a === null)
3863
+ return -1;
3864
+ if (z === null)
3865
+ return 1;
3866
+ if (a.kind === "arbitrary" && z.kind === "arbitrary") {
3867
+ return a.selector.localeCompare(z.selector);
3868
+ } else if (a.kind === "arbitrary") {
3869
+ return 1;
3870
+ } else if (z.kind === "arbitrary") {
3871
+ return -1;
3872
+ }
3873
+ let aOrder = this.variants.get(a.root).order;
3874
+ let zOrder = this.variants.get(z.root).order;
3875
+ let orderedByVariant = aOrder - zOrder;
3876
+ if (orderedByVariant !== 0)
3877
+ return orderedByVariant;
3878
+ if (a.kind === "compound" && z.kind === "compound") {
3879
+ return this.compare(a.variant, z.variant);
3880
+ }
3881
+ let compareFn = this.compareFns.get(aOrder);
3882
+ if (compareFn === void 0)
3883
+ return 0;
3884
+ return compareFn(a, z);
3885
+ }
3886
+ keys() {
3887
+ return this.variants.keys();
3888
+ }
3889
+ set(name, { kind, applyFn, compounds }) {
3890
+ this.lastOrder = this.nextOrder();
3891
+ this.variants.set(name, {
3892
+ kind,
3893
+ applyFn,
3894
+ order: this.lastOrder,
3895
+ compounds
3896
+ });
3897
+ }
3898
+ nextOrder() {
3899
+ return this.groupOrder ?? this.lastOrder + 1;
3900
+ }
3901
+ };
3902
+ function createVariants(theme) {
3903
+ let variants = new Variants();
3904
+ function staticVariant(name, selectors, { compounds } = {}) {
3905
+ variants.static(
3906
+ name,
3907
+ (r) => {
3908
+ r.nodes = selectors.map((selector) => rule(selector, r.nodes));
3909
+ },
3910
+ { compounds }
3911
+ );
3912
+ }
3913
+ variants.static("force", () => {
3914
+ }, { compounds: false });
3915
+ staticVariant("*", ["& > *"], { compounds: false });
3916
+ variants.compound("not", (ruleNode) => {
3917
+ ruleNode.selector = `&:not(${ruleNode.selector.replace("&", "*")})`;
3918
+ });
3919
+ variants.compound("group", (ruleNode, variant) => {
3920
+ let groupSelector = variant.modifier ? `:where(.group\\/${variant.modifier.value})` : ":where(.group)";
3921
+ ruleNode.selector = ruleNode.selector.replace("&", groupSelector);
3922
+ ruleNode.selector = `&:is(${ruleNode.selector} *)`;
3923
+ });
3924
+ variants.compound("peer", (ruleNode, variant) => {
3925
+ let peerSelector = variant.modifier ? `:where(.peer\\/${variant.modifier.value})` : ":where(.peer)";
3926
+ ruleNode.selector = ruleNode.selector.replace("&", peerSelector);
3927
+ ruleNode.selector = `&:is(${ruleNode.selector} ~ *)`;
3928
+ });
3929
+ staticVariant("first-letter", ["&::first-letter"], { compounds: false });
3930
+ staticVariant("first-line", ["&::first-line"], { compounds: false });
3931
+ staticVariant("marker", ["& *::marker", "&::marker"], { compounds: false });
3932
+ staticVariant("selection", ["& *::selection", "&::selection"], { compounds: false });
3933
+ staticVariant("file", ["&::file-selector-button"], { compounds: false });
3934
+ staticVariant("placeholder", ["&::placeholder"], { compounds: false });
3935
+ staticVariant("backdrop", ["&::backdrop"], { compounds: false });
3936
+ {
3937
+ let contentProperties2 = function() {
3938
+ return rule("@at-root", [
3939
+ rule("@property --tw-content", [
3940
+ decl("syntax", '"*"'),
3941
+ decl("initial-value", '""'),
3942
+ decl("inherits", "false")
3943
+ ])
3944
+ ]);
3945
+ };
3946
+ variants.static(
3947
+ "before",
3948
+ (v) => {
3949
+ v.nodes = [
3950
+ rule("&::before", [
3951
+ contentProperties2(),
3952
+ decl("content", "var(--tw-content)"),
3953
+ ...v.nodes
3954
+ ])
3955
+ ];
3956
+ },
3957
+ { compounds: false }
3958
+ );
3959
+ variants.static(
3960
+ "after",
3961
+ (v) => {
3962
+ v.nodes = [
3963
+ rule("&::after", [contentProperties2(), decl("content", "var(--tw-content)"), ...v.nodes])
3964
+ ];
3965
+ },
3966
+ { compounds: false }
3967
+ );
3968
+ }
3969
+ let pseudos = [
3970
+ // Positional
3971
+ ["first", "&:first-child"],
3972
+ ["last", "&:last-child"],
3973
+ ["only", "&:only-child"],
3974
+ ["odd", "&:nth-child(odd)"],
3975
+ ["even", "&:nth-child(even)"],
3976
+ ["first-of-type", "&:first-of-type"],
3977
+ ["last-of-type", "&:last-of-type"],
3978
+ ["only-of-type", "&:only-of-type"],
3979
+ // State
3980
+ // TODO: Remove alpha vars or no?
3981
+ ["visited", "&:visited"],
3982
+ ["target", "&:target"],
3983
+ ["open", "&[open]"],
3984
+ // Forms
3985
+ ["default", "&:default"],
3986
+ ["checked", "&:checked"],
3987
+ ["indeterminate", "&:indeterminate"],
3988
+ ["placeholder-shown", "&:placeholder-shown"],
3989
+ ["autofill", "&:autofill"],
3990
+ ["optional", "&:optional"],
3991
+ ["required", "&:required"],
3992
+ ["valid", "&:valid"],
3993
+ ["invalid", "&:invalid"],
3994
+ ["in-range", "&:in-range"],
3995
+ ["out-of-range", "&:out-of-range"],
3996
+ ["read-only", "&:read-only"],
3997
+ // Content
3998
+ ["empty", "&:empty"],
3999
+ // Interactive
4000
+ ["focus-within", "&:focus-within"],
4001
+ [
4002
+ "hover",
4003
+ "&:hover"
4004
+ // TODO: Update tests for this:
4005
+ // v => {
4006
+ // v.nodes = [
4007
+ // rule('@media (hover: hover) and (pointer: fine)', [
4008
+ // rule('&:hover', v.nodes),
4009
+ // ]),
4010
+ // ]
4011
+ // }
4012
+ ],
4013
+ ["focus", "&:focus"],
4014
+ ["focus-visible", "&:focus-visible"],
4015
+ ["active", "&:active"],
4016
+ ["enabled", "&:enabled"],
4017
+ ["disabled", "&:disabled"]
4018
+ ];
4019
+ for (let [key, value] of pseudos) {
4020
+ staticVariant(key, [value]);
4021
+ }
4022
+ variants.compound("has", (ruleNode) => {
4023
+ ruleNode.selector = `&:has(${ruleNode.selector.replace("&", "*")})`;
4024
+ });
4025
+ variants.functional("aria", (ruleNode, variant) => {
4026
+ if (variant.value === null)
4027
+ return null;
4028
+ if (variant.value.kind == "arbitrary") {
4029
+ ruleNode.nodes = [rule(`&[aria-${variant.value.value}]`, ruleNode.nodes)];
4030
+ } else {
4031
+ ruleNode.nodes = [rule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)];
4032
+ }
4033
+ });
4034
+ variants.functional("data", (ruleNode, variant) => {
4035
+ if (variant.value === null)
4036
+ return null;
4037
+ ruleNode.nodes = [rule(`&[data-${variant.value.value}]`, ruleNode.nodes)];
4038
+ });
4039
+ variants.functional(
4040
+ "supports",
4041
+ (ruleNode, variant) => {
4042
+ if (variant.value === null)
4043
+ return null;
4044
+ let value = variant.value.value;
4045
+ if (value === null)
4046
+ return null;
4047
+ if (/^\w*\s*\(/.test(value)) {
4048
+ let query = value.replace(/\b(and|or|not)\b/g, " $1 ");
4049
+ ruleNode.nodes = [rule(`@supports ${query}`, ruleNode.nodes)];
4343
4050
  return;
4344
- if (!candidate.value) {
4345
- return [
4346
- boxShadowProperties(),
4347
- decl("--tw-ring-shadow", ringShadowValue2("var(--default-ring-width)")),
4348
- decl("box-shadow", cssBoxShadowValue)
4349
- ];
4350
- }
4351
- if (candidate.value.kind === "arbitrary") {
4352
- let value = candidate.value.value;
4353
- let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
4354
- switch (type) {
4355
- case "length": {
4356
- return [
4357
- boxShadowProperties(),
4358
- decl("--tw-ring-shadow", ringShadowValue2(value)),
4359
- decl("box-shadow", cssBoxShadowValue)
4360
- ];
4361
- }
4362
- default: {
4363
- value = asColor(value, candidate.modifier, theme);
4364
- return [decl("--tw-ring-color", value)];
4365
- }
4366
- }
4367
- }
4368
- {
4369
- let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
4370
- if (value) {
4371
- return [decl("--tw-ring-color", value)];
4372
- }
4373
- }
4374
- {
4375
- let value = theme.resolve(candidate.value.value, ["--ring-width"]);
4376
- if (!value && !isNaN(Number(candidate.value.value))) {
4377
- value = `${candidate.value.value}px`;
4378
- }
4379
- if (value) {
4380
- return [
4381
- boxShadowProperties(),
4382
- decl("--tw-ring-shadow", ringShadowValue2(value)),
4383
- decl("box-shadow", cssBoxShadowValue)
4384
- ];
4385
- }
4386
4051
  }
4387
- });
4388
- utilities.functional("inset-ring", (candidate) => {
4389
- if (candidate.negative)
4390
- return;
4391
- if (!candidate.value) {
4392
- return [
4393
- boxShadowProperties(),
4394
- decl("--tw-inset-ring-shadow", insetRingShadowValue2("1px")),
4395
- decl("box-shadow", cssBoxShadowValue)
4396
- ];
4052
+ if (!value.includes(":")) {
4053
+ value = `${value}: var(--tw)`;
4397
4054
  }
4398
- if (candidate.value.kind === "arbitrary") {
4399
- let value = candidate.value.value;
4400
- let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
4401
- switch (type) {
4402
- case "length": {
4403
- return [
4404
- boxShadowProperties(),
4405
- decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
4406
- decl("box-shadow", cssBoxShadowValue)
4407
- ];
4408
- }
4409
- default: {
4410
- value = asColor(value, candidate.modifier, theme);
4411
- return [decl("--tw-inset-ring-color", value)];
4412
- }
4413
- }
4055
+ if (value[0] !== "(" || value[value.length - 1] !== ")") {
4056
+ value = `(${value})`;
4414
4057
  }
4415
- {
4416
- let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
4417
- if (value) {
4418
- return [decl("--tw-inset-ring-color", value)];
4419
- }
4058
+ ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)];
4059
+ },
4060
+ { compounds: false }
4061
+ );
4062
+ staticVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"], {
4063
+ compounds: false
4064
+ });
4065
+ staticVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"], { compounds: false });
4066
+ staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
4067
+ staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
4068
+ {
4069
+ let compareBreakpoints2 = function(a, z, direction) {
4070
+ if (a === z)
4071
+ return 0;
4072
+ let aValue = resolvedBreakpoints.get(a);
4073
+ if (aValue === null)
4074
+ return direction === "asc" ? -1 : 1;
4075
+ let zValue = resolvedBreakpoints.get(z);
4076
+ if (zValue === null)
4077
+ return direction === "asc" ? 1 : -1;
4078
+ if (aValue === zValue)
4079
+ return 0;
4080
+ let aIsCssFunction = aValue.indexOf("(");
4081
+ let zIsCssFunction = zValue.indexOf("(");
4082
+ let aBucket = aIsCssFunction === -1 ? (
4083
+ // No CSS function found, bucket by unit instead
4084
+ aValue.replace(/[\d.]+/g, "")
4085
+ ) : (
4086
+ // CSS function found, bucket by function name
4087
+ aValue.slice(0, aIsCssFunction)
4088
+ );
4089
+ let zBucket = zIsCssFunction === -1 ? (
4090
+ // No CSS function found, bucket by unit
4091
+ zValue.replace(/[\d.]+/g, "")
4092
+ ) : (
4093
+ // CSS function found, bucket by function name
4094
+ zValue.slice(0, zIsCssFunction)
4095
+ );
4096
+ let order = (
4097
+ // Compare by bucket name
4098
+ aBucket.localeCompare(zBucket) || // If bucket names are the same, compare by value
4099
+ (direction === "asc" ? parseInt(aValue) - parseInt(zValue) : parseInt(zValue) - parseInt(aValue))
4100
+ );
4101
+ if (isNaN(order)) {
4102
+ return aValue.localeCompare(zValue);
4420
4103
  }
4421
- {
4422
- let value = theme.resolve(candidate.value.value, ["--ring-width"]);
4423
- if (!value && !isNaN(Number(candidate.value.value))) {
4424
- value = `${candidate.value.value}px`;
4425
- }
4426
- if (value) {
4427
- return [
4428
- boxShadowProperties(),
4429
- decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
4430
- decl("box-shadow", cssBoxShadowValue)
4431
- ];
4104
+ return order;
4105
+ };
4106
+ let breakpoints = theme.namespace("--breakpoint");
4107
+ let resolvedBreakpoints = new DefaultMap((variant) => {
4108
+ switch (variant.kind) {
4109
+ case "static": {
4110
+ return breakpoints.get(variant.root) ?? null;
4432
4111
  }
4433
- }
4434
- });
4435
- let ringOffsetShadowValue = "var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)";
4436
- utilities.functional("ring-offset", (candidate) => {
4437
- if (candidate.negative || !candidate.value) {
4438
- return;
4439
- }
4440
- if (candidate.value.kind === "arbitrary") {
4441
- let value = candidate.value.value;
4442
- let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
4443
- switch (type) {
4444
- case "length": {
4445
- return [
4446
- decl("--tw-ring-offset-width", value),
4447
- decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4448
- ];
4112
+ case "functional": {
4113
+ let value = null;
4114
+ if (variant.value.kind === "arbitrary") {
4115
+ value = variant.value.value;
4116
+ } else if (variant.value.kind === "named") {
4117
+ value = theme.resolve(variant.value.value, ["--breakpoint"]);
4449
4118
  }
4450
- default: {
4451
- value = asColor(value, candidate.modifier, theme);
4452
- return [decl("--tw-ring-offset-color", value)];
4119
+ if (!value) {
4120
+ return null;
4453
4121
  }
4122
+ if (value.includes("var(")) {
4123
+ return null;
4124
+ }
4125
+ return value;
4454
4126
  }
4127
+ case "arbitrary":
4128
+ case "compound":
4129
+ return null;
4455
4130
  }
4456
- {
4457
- let value = theme.resolve(candidate.value.value, ["--ring-offset-width"]);
4458
- if (value) {
4459
- return [
4460
- decl("--tw-ring-offset-width", value),
4461
- decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4462
- ];
4463
- } else if (!isNaN(Number(candidate.value.value))) {
4464
- return [
4465
- decl("--tw-ring-offset-width", `${candidate.value.value}px`),
4466
- decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4467
- ];
4468
- }
4469
- }
4470
- {
4471
- let value = resolveThemeColor(candidate, theme, ["--ring-offset-color", "--color"]);
4472
- if (value) {
4473
- return [decl("--tw-ring-offset-color", value)];
4131
+ });
4132
+ variants.group(
4133
+ () => {
4134
+ variants.functional(
4135
+ "max",
4136
+ (ruleNode, variant) => {
4137
+ let value = resolvedBreakpoints.get(variant);
4138
+ if (value === null)
4139
+ return null;
4140
+ ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)];
4141
+ },
4142
+ { compounds: false }
4143
+ );
4144
+ },
4145
+ (a, z) => compareBreakpoints2(a, z, "desc")
4146
+ );
4147
+ variants.group(
4148
+ () => {
4149
+ for (let [key, value] of theme.namespace("--breakpoint")) {
4150
+ if (key === null)
4151
+ continue;
4152
+ variants.static(
4153
+ key,
4154
+ (ruleNode) => {
4155
+ ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4156
+ },
4157
+ { compounds: false }
4158
+ );
4474
4159
  }
4475
- }
4476
- });
4160
+ variants.functional(
4161
+ "min",
4162
+ (ruleNode, variant) => {
4163
+ let value = resolvedBreakpoints.get(variant);
4164
+ if (value === null)
4165
+ return null;
4166
+ ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4167
+ },
4168
+ { compounds: false }
4169
+ );
4170
+ },
4171
+ (a, z) => compareBreakpoints2(a, z, "asc")
4172
+ );
4477
4173
  }
4478
- return utilities;
4174
+ staticVariant("portrait", ["@media (orientation: portrait)"], { compounds: false });
4175
+ staticVariant("landscape", ["@media (orientation: landscape)"], { compounds: false });
4176
+ staticVariant("ltr", ['&:where([dir="ltr"], [dir="ltr"] *)']);
4177
+ staticVariant("rtl", ['&:where([dir="rtl"], [dir="rtl"] *)']);
4178
+ staticVariant("dark", ["@media (prefers-color-scheme: dark)"], { compounds: false });
4179
+ staticVariant("print", ["@media print"], { compounds: false });
4180
+ staticVariant("forced-colors", ["@media (forced-colors: active)"], { compounds: false });
4181
+ return variants;
4182
+ }
4183
+
4184
+ // src/design-system.ts
4185
+ function buildDesignSystem(theme) {
4186
+ return {
4187
+ theme,
4188
+ utilities: createUtilities(theme),
4189
+ variants: createVariants(theme),
4190
+ getClassOrder(classes) {
4191
+ return getClassOrder(this, classes);
4192
+ }
4193
+ };
4479
4194
  }
4480
4195
 
4481
- // src/variants.ts
4482
- var Variants = class {
4483
- compareFns = /* @__PURE__ */ new Map();
4484
- variants = /* @__PURE__ */ new Map();
4485
- /**
4486
- * Registering a group of variants should result in the same sort number for
4487
- * all the variants. This is to ensure that the variants are applied in the
4488
- * correct order.
4489
- */
4490
- groupOrder = null;
4491
- /**
4492
- * Keep track of the last sort order instead of using the size of the map to
4493
- * avoid unnecessarily skipping order numbers.
4494
- */
4495
- lastOrder = 0;
4496
- static(name, applyFn, { compounds } = {}) {
4497
- this.set(name, { kind: "static", applyFn, compounds: compounds ?? true });
4498
- }
4499
- functional(name, applyFn, { compounds } = {}) {
4500
- this.set(name, { kind: "functional", applyFn, compounds: compounds ?? true });
4501
- }
4502
- compound(name, applyFn, { compounds } = {}) {
4503
- this.set(name, { kind: "compound", applyFn, compounds: compounds ?? true });
4504
- }
4505
- group(fn, compareFn) {
4506
- this.groupOrder = this.nextOrder();
4507
- if (compareFn)
4508
- this.compareFns.set(this.groupOrder, compareFn);
4509
- fn();
4510
- this.groupOrder = null;
4511
- }
4512
- has(name) {
4513
- return this.variants.has(name);
4514
- }
4515
- get(name) {
4516
- return this.variants.get(name)?.applyFn;
4517
- }
4518
- kind(name) {
4519
- return this.variants.get(name)?.kind;
4196
+ // src/property-order.ts
4197
+ var property_order_default = [
4198
+ "pointer-events",
4199
+ "visibility",
4200
+ "position",
4201
+ // How do we make `inset-x-0` come before `top-0`?
4202
+ "inset",
4203
+ "inset-inline",
4204
+ "inset-block",
4205
+ "inset-inline-start",
4206
+ "inset-inline-end",
4207
+ "top",
4208
+ "right",
4209
+ "bottom",
4210
+ "left",
4211
+ "isolation",
4212
+ "z-index",
4213
+ "order",
4214
+ "grid-column",
4215
+ "grid-column-start",
4216
+ "grid-column-end",
4217
+ "grid-row",
4218
+ "grid-row-start",
4219
+ "grid-row-end",
4220
+ "float",
4221
+ "clear",
4222
+ // How do we make `mx-0` come before `mt-0`?
4223
+ // Idea: `margin-x` property that we compile away with a Visitor plugin?
4224
+ "margin",
4225
+ "margin-inline",
4226
+ "margin-block",
4227
+ "margin-inline-start",
4228
+ "margin-inline-end",
4229
+ "margin-top",
4230
+ "margin-right",
4231
+ "margin-bottom",
4232
+ "margin-left",
4233
+ "box-sizing",
4234
+ "display",
4235
+ "aspect-ratio",
4236
+ "height",
4237
+ "max-height",
4238
+ "min-height",
4239
+ "width",
4240
+ "max-width",
4241
+ "min-width",
4242
+ "flex",
4243
+ "flex-shrink",
4244
+ "flex-grow",
4245
+ "flex-basis",
4246
+ "table-layout",
4247
+ "caption-side",
4248
+ "border-collapse",
4249
+ // There's no `border-spacing-x` property, we use variables, how to sort?
4250
+ "border-spacing",
4251
+ // '--tw-border-spacing-x',
4252
+ // '--tw-border-spacing-y',
4253
+ "transform-origin",
4254
+ // '--tw-translate-x',
4255
+ // '--tw-translate-y',
4256
+ "translate",
4257
+ "rotate",
4258
+ // '--tw-rotate',
4259
+ "--tw-skew-x",
4260
+ "--tw-skew-y",
4261
+ "scale",
4262
+ // '--tw-scale-x',
4263
+ // '--tw-scale-y',
4264
+ "transform",
4265
+ "animation",
4266
+ "cursor",
4267
+ "touch-action",
4268
+ "--tw-pan-x",
4269
+ "--tw-pan-y",
4270
+ "--tw-pinch-zoom",
4271
+ "resize",
4272
+ "scroll-snap-type",
4273
+ "--tw-scroll-snap-strictness",
4274
+ "scroll-snap-align",
4275
+ "scroll-snap-stop",
4276
+ "scroll-margin",
4277
+ "scroll-margin-inline-start",
4278
+ "scroll-margin-inline-end",
4279
+ "scroll-margin-top",
4280
+ "scroll-margin-right",
4281
+ "scroll-margin-bottom",
4282
+ "scroll-margin-left",
4283
+ "scroll-padding",
4284
+ "scroll-padding-inline-start",
4285
+ "scroll-padding-inline-end",
4286
+ "scroll-padding-top",
4287
+ "scroll-padding-right",
4288
+ "scroll-padding-bottom",
4289
+ "scroll-padding-left",
4290
+ "list-style-position",
4291
+ "list-style-type",
4292
+ "list-style-image",
4293
+ "appearance",
4294
+ "columns",
4295
+ "break-before",
4296
+ "break-inside",
4297
+ "break-after",
4298
+ "grid-auto-columns",
4299
+ "grid-auto-flow",
4300
+ "grid-auto-rows",
4301
+ "grid-template-columns",
4302
+ "grid-template-rows",
4303
+ "flex-direction",
4304
+ "flex-wrap",
4305
+ "place-content",
4306
+ "place-items",
4307
+ "align-content",
4308
+ "align-items",
4309
+ "justify-content",
4310
+ "justify-items",
4311
+ "gap",
4312
+ "column-gap",
4313
+ "row-gap",
4314
+ "--tw-space-x-reverse",
4315
+ "--tw-space-y-reverse",
4316
+ // Is there a more "real" property we could use for this?
4317
+ "divide-x-width",
4318
+ "divide-y-width",
4319
+ "--tw-divide-y-reverse",
4320
+ "divide-style",
4321
+ "divide-color",
4322
+ "--tw-divide-opacity",
4323
+ "place-self",
4324
+ "align-self",
4325
+ "justify-self",
4326
+ "overflow",
4327
+ "overflow-x",
4328
+ "overflow-y",
4329
+ "overscroll-behavior",
4330
+ "overscroll-behavior-x",
4331
+ "overscroll-behavior-y",
4332
+ "scroll-behavior",
4333
+ "text-overflow",
4334
+ "hyphens",
4335
+ "white-space",
4336
+ "text-wrap",
4337
+ "overflow-wrap",
4338
+ "work-break",
4339
+ "border-radius",
4340
+ "border-start-radius",
4341
+ // Not real
4342
+ "border-end-radius",
4343
+ // Not real
4344
+ "border-top-radius",
4345
+ // Not real
4346
+ "border-right-radius",
4347
+ // Not real
4348
+ "border-bottom-radius",
4349
+ // Not real
4350
+ "border-left-radius",
4351
+ // Not real
4352
+ "border-start-start-radius",
4353
+ "border-start-end-radius",
4354
+ "border-end-end-radius",
4355
+ "border-end-start-radius",
4356
+ "border-top-left-radius",
4357
+ "border-top-right-radius",
4358
+ "border-bottom-right-radius",
4359
+ "border-bottom-left-radius",
4360
+ "border-width",
4361
+ "border-inline-width",
4362
+ // Not real
4363
+ "border-inline-start-width",
4364
+ "border-inline-end-width",
4365
+ "border-top-width",
4366
+ "border-right-width",
4367
+ "border-bottom-width",
4368
+ "border-left-width",
4369
+ "border-style",
4370
+ "border-color",
4371
+ "border-x-color",
4372
+ // Not real
4373
+ "border-y-color",
4374
+ // Not real
4375
+ "border-inline-start-color",
4376
+ "border-inline-end-color",
4377
+ "border-top-color",
4378
+ "border-right-color",
4379
+ "border-bottom-color",
4380
+ "border-left-color",
4381
+ "--tw-border-opacity",
4382
+ "background-color",
4383
+ "--tw-bg-opacity",
4384
+ "background-image",
4385
+ "--tw-gradient-stops",
4386
+ "--tw-gradient-via-stops",
4387
+ "--tw-gradient-from",
4388
+ "--tw-gradient-from-position",
4389
+ "--tw-gradient-via",
4390
+ "--tw-gradient-via-position",
4391
+ "--tw-gradient-to",
4392
+ "--tw-gradient-to-position",
4393
+ "box-decoration-break",
4394
+ "background-size",
4395
+ "background-attachment",
4396
+ "background-clip",
4397
+ "background-position",
4398
+ "background-repeat",
4399
+ "background-origin",
4400
+ "fill",
4401
+ "stroke",
4402
+ "stroke-width",
4403
+ "object-fit",
4404
+ "object-position",
4405
+ "padding",
4406
+ "padding-inline",
4407
+ "padding-block",
4408
+ "padding-inline-start",
4409
+ "padding-inline-end",
4410
+ "padding-top",
4411
+ "padding-right",
4412
+ "padding-bottom",
4413
+ "padding-left",
4414
+ "text-align",
4415
+ "text-indent",
4416
+ "vertical-align",
4417
+ "font-family",
4418
+ "font-size",
4419
+ "font-weight",
4420
+ "text-transform",
4421
+ "font-style",
4422
+ "font-variant-numeric",
4423
+ "line-height",
4424
+ "letter-spacing",
4425
+ "color",
4426
+ "--tw-text-opacity",
4427
+ "text-decoration-line",
4428
+ "text-decoration-color",
4429
+ "text-decoration-style",
4430
+ "text-decoration-thickness",
4431
+ "text-underline-offset",
4432
+ "-webkit-font-smoothing",
4433
+ "placeholder-color",
4434
+ // Not real
4435
+ "--tw-placeholder-opacity",
4436
+ "caret-color",
4437
+ "accent-color",
4438
+ "opacity",
4439
+ "background-blend-mode",
4440
+ "mix-blend-mode",
4441
+ "box-shadow",
4442
+ "--tw-shadow",
4443
+ "--tw-shadow-color",
4444
+ "--tw-ring-shadow",
4445
+ "--tw-ring-color",
4446
+ "--tw-inset-shadow",
4447
+ "--tw-inset-shadow-color",
4448
+ "--tw-inset-ring-shadow",
4449
+ "--tw-inset-ring-color",
4450
+ "--tw-ring-opacity",
4451
+ "--tw-ring-offset-width",
4452
+ "--tw-ring-offset-color",
4453
+ "outline",
4454
+ "outline-width",
4455
+ "outline-offset",
4456
+ "outline-color",
4457
+ "--tw-blur",
4458
+ "--tw-brightness",
4459
+ "--tw-contast",
4460
+ "--tw-drop-shadow",
4461
+ "--tw-grayscale",
4462
+ "--tw-hue-rotate",
4463
+ "--tw-invert",
4464
+ "--tw-saturate",
4465
+ "--tw-sepia",
4466
+ "filter",
4467
+ "--tw-backdrop-blur",
4468
+ "--tw-backdrop-brightness",
4469
+ "--tw-backdrop-contast",
4470
+ "--tw-backdrop-grayscale",
4471
+ "--tw-backdrop-hue-rotate",
4472
+ "--tw-backdrop-invert",
4473
+ "--tw-backdrop-opacity",
4474
+ "--tw-backdrop-saturate",
4475
+ "--tw-backdrop-sepia",
4476
+ "backdrop-filter",
4477
+ "transition-property",
4478
+ "transition-delay",
4479
+ "transition-duration",
4480
+ "transition-timing-function",
4481
+ "will-change",
4482
+ "contain",
4483
+ "content",
4484
+ "forced-color-adjust"
4485
+ ];
4486
+
4487
+ // src/utils/escape.ts
4488
+ function escape(value) {
4489
+ if (arguments.length == 0) {
4490
+ throw new TypeError("`CSS.escape` requires an argument.");
4520
4491
  }
4521
- compounds(name) {
4522
- return this.variants.get(name)?.compounds;
4492
+ var string = String(value);
4493
+ var length = string.length;
4494
+ var index = -1;
4495
+ var codeUnit;
4496
+ var result = "";
4497
+ var firstCodeUnit = string.charCodeAt(0);
4498
+ if (
4499
+ // If the character is the first character and is a `-` (U+002D), and
4500
+ // there is no second character, […]
4501
+ length == 1 && firstCodeUnit == 45
4502
+ ) {
4503
+ return "\\" + string;
4523
4504
  }
4524
- compare(a, z) {
4525
- if (a === z)
4526
- return 0;
4527
- if (a === null)
4528
- return -1;
4529
- if (z === null)
4530
- return 1;
4531
- if (a.kind === "arbitrary" && z.kind === "arbitrary") {
4532
- return a.selector.localeCompare(z.selector);
4533
- } else if (a.kind === "arbitrary") {
4534
- return 1;
4535
- } else if (z.kind === "arbitrary") {
4536
- return -1;
4505
+ while (++index < length) {
4506
+ codeUnit = string.charCodeAt(index);
4507
+ if (codeUnit == 0) {
4508
+ result += "\uFFFD";
4509
+ continue;
4537
4510
  }
4538
- let aOrder = this.variants.get(a.root).order;
4539
- let zOrder = this.variants.get(z.root).order;
4540
- let orderedByVariant = aOrder - zOrder;
4541
- if (orderedByVariant !== 0)
4542
- return orderedByVariant;
4543
- if (a.kind === "compound" && z.kind === "compound") {
4544
- return this.compare(a.variant, z.variant);
4511
+ if (
4512
+ // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
4513
+ // U+007F, […]
4514
+ codeUnit >= 1 && codeUnit <= 31 || codeUnit == 127 || // If the character is the first character and is in the range [0-9]
4515
+ // (U+0030 to U+0039), […]
4516
+ index == 0 && codeUnit >= 48 && codeUnit <= 57 || // If the character is the second character and is in the range [0-9]
4517
+ // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
4518
+ index == 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit == 45
4519
+ ) {
4520
+ result += "\\" + codeUnit.toString(16) + " ";
4521
+ continue;
4545
4522
  }
4546
- let compareFn = this.compareFns.get(aOrder);
4547
- if (compareFn === void 0)
4548
- return 0;
4549
- return compareFn(a, z);
4550
- }
4551
- keys() {
4552
- return this.variants.keys();
4553
- }
4554
- set(name, { kind, applyFn, compounds }) {
4555
- this.lastOrder = this.nextOrder();
4556
- this.variants.set(name, {
4557
- kind,
4558
- applyFn,
4559
- order: this.lastOrder,
4560
- compounds
4561
- });
4562
- }
4563
- nextOrder() {
4564
- return this.groupOrder ?? this.lastOrder + 1;
4565
- }
4566
- };
4567
- function createVariants(theme) {
4568
- let variants = new Variants();
4569
- function staticVariant(name, selectors, { compounds } = {}) {
4570
- variants.static(
4571
- name,
4572
- (r) => {
4573
- r.nodes = selectors.map((selector) => rule(selector, r.nodes));
4574
- },
4575
- { compounds }
4576
- );
4577
- }
4578
- variants.static("force", () => {
4579
- }, { compounds: false });
4580
- staticVariant("*", ["& > *"], { compounds: false });
4581
- variants.compound("not", (ruleNode) => {
4582
- ruleNode.selector = `&:not(${ruleNode.selector.replace("&", "*")})`;
4583
- });
4584
- variants.compound("group", (ruleNode, variant) => {
4585
- let groupSelector = variant.modifier ? `:where(.group\\/${variant.modifier.value})` : ":where(.group)";
4586
- ruleNode.selector = ruleNode.selector.replace("&", groupSelector);
4587
- ruleNode.selector = `&:is(${ruleNode.selector} *)`;
4588
- });
4589
- variants.compound("peer", (ruleNode, variant) => {
4590
- let peerSelector = variant.modifier ? `:where(.peer\\/${variant.modifier.value})` : ":where(.peer)";
4591
- ruleNode.selector = ruleNode.selector.replace("&", peerSelector);
4592
- ruleNode.selector = `&:is(${ruleNode.selector} ~ *)`;
4593
- });
4594
- staticVariant("first-letter", ["&::first-letter"], { compounds: false });
4595
- staticVariant("first-line", ["&::first-line"], { compounds: false });
4596
- staticVariant("marker", ["& *::marker", "&::marker"], { compounds: false });
4597
- staticVariant("selection", ["& *::selection", "&::selection"], { compounds: false });
4598
- staticVariant("file", ["&::file-selector-button"], { compounds: false });
4599
- staticVariant("placeholder", ["&::placeholder"], { compounds: false });
4600
- staticVariant("backdrop", ["&::backdrop"], { compounds: false });
4601
- {
4602
- let contentProperties2 = function() {
4603
- return rule("@at-root", [
4604
- rule("@property --tw-content", [
4605
- decl("syntax", '"*"'),
4606
- decl("initial-value", '""'),
4607
- decl("inherits", "false")
4608
- ])
4609
- ]);
4610
- };
4611
- variants.static(
4612
- "before",
4613
- (v) => {
4614
- v.nodes = [
4615
- rule("&::before", [
4616
- contentProperties2(),
4617
- decl("content", "var(--tw-content)"),
4618
- ...v.nodes
4619
- ])
4620
- ];
4621
- },
4622
- { compounds: false }
4623
- );
4624
- variants.static(
4625
- "after",
4626
- (v) => {
4627
- v.nodes = [
4628
- rule("&::after", [contentProperties2(), decl("content", "var(--tw-content)"), ...v.nodes])
4629
- ];
4630
- },
4631
- { compounds: false }
4632
- );
4523
+ if (codeUnit >= 128 || codeUnit == 45 || codeUnit == 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
4524
+ result += string.charAt(index);
4525
+ continue;
4526
+ }
4527
+ result += "\\" + string.charAt(index);
4633
4528
  }
4634
- let pseudos = [
4635
- // Positional
4636
- ["first", "&:first-child"],
4637
- ["last", "&:last-child"],
4638
- ["only", "&:only-child"],
4639
- ["odd", "&:nth-child(odd)"],
4640
- ["even", "&:nth-child(even)"],
4641
- ["first-of-type", "&:first-of-type"],
4642
- ["last-of-type", "&:last-of-type"],
4643
- ["only-of-type", "&:only-of-type"],
4644
- // State
4645
- // TODO: Remove alpha vars or no?
4646
- ["visited", "&:visited"],
4647
- ["target", "&:target"],
4648
- ["open", "&[open]"],
4649
- // Forms
4650
- ["default", "&:default"],
4651
- ["checked", "&:checked"],
4652
- ["indeterminate", "&:indeterminate"],
4653
- ["placeholder-shown", "&:placeholder-shown"],
4654
- ["autofill", "&:autofill"],
4655
- ["optional", "&:optional"],
4656
- ["required", "&:required"],
4657
- ["valid", "&:valid"],
4658
- ["invalid", "&:invalid"],
4659
- ["in-range", "&:in-range"],
4660
- ["out-of-range", "&:out-of-range"],
4661
- ["read-only", "&:read-only"],
4662
- // Content
4663
- ["empty", "&:empty"],
4664
- // Interactive
4665
- ["focus-within", "&:focus-within"],
4666
- [
4667
- "hover",
4668
- "&:hover"
4669
- // TODO: Update tests for this:
4670
- // v => {
4671
- // v.nodes = [
4672
- // rule('@media (hover: hover) and (pointer: fine)', [
4673
- // rule('&:hover', v.nodes),
4674
- // ]),
4675
- // ]
4676
- // }
4677
- ],
4678
- ["focus", "&:focus"],
4679
- ["focus-visible", "&:focus-visible"],
4680
- ["active", "&:active"],
4681
- ["enabled", "&:enabled"],
4682
- ["disabled", "&:disabled"]
4683
- ];
4684
- for (let [key, value] of pseudos) {
4685
- staticVariant(key, [value]);
4529
+ return result;
4530
+ }
4531
+
4532
+ // src/compile.ts
4533
+ function applyImportant(ast) {
4534
+ for (let node of ast) {
4535
+ if (node.kind === "rule" && node.selector === "@at-root") {
4536
+ continue;
4537
+ }
4538
+ if (node.kind === "declaration") {
4539
+ node.important = true;
4540
+ } else if (node.kind === "rule") {
4541
+ applyImportant(node.nodes);
4542
+ }
4686
4543
  }
4687
- variants.compound("has", (ruleNode) => {
4688
- ruleNode.selector = `&:has(${ruleNode.selector.replace("&", "*")})`;
4689
- });
4690
- variants.functional("aria", (ruleNode, variant) => {
4691
- if (variant.value === null)
4544
+ }
4545
+ function applyVariant(node, variant, variants) {
4546
+ if (variant.kind === "arbitrary") {
4547
+ node.nodes = [rule(variant.selector, node.nodes)];
4548
+ return;
4549
+ }
4550
+ let applyVariantFn = variants.get(variant.root);
4551
+ if (variant.kind === "compound") {
4552
+ let result2 = applyVariant(node, variant.variant, variants);
4553
+ if (result2 === null)
4692
4554
  return null;
4693
- if (variant.value.kind == "arbitrary") {
4694
- ruleNode.nodes = [rule(`&[aria-${variant.value.value}]`, ruleNode.nodes)];
4695
- } else {
4696
- ruleNode.nodes = [rule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)];
4555
+ for (let child of node.nodes) {
4556
+ let result3 = applyVariantFn(child, variant);
4557
+ if (result3 === null)
4558
+ return null;
4697
4559
  }
4560
+ return;
4561
+ }
4562
+ let result = applyVariantFn(node, variant);
4563
+ if (result === null)
4564
+ return null;
4565
+ }
4566
+ function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
4567
+ rawCandidates.sort();
4568
+ let nodeSorting = /* @__PURE__ */ new Map();
4569
+ let astNodes = [];
4570
+ let parsedVariants = new DefaultMap((variant, map) => {
4571
+ return parseVariant(variant, designSystem.variants, map);
4698
4572
  });
4699
- variants.functional("data", (ruleNode, variant) => {
4700
- if (variant.value === null)
4701
- return null;
4702
- ruleNode.nodes = [rule(`&[data-${variant.value.value}]`, ruleNode.nodes)];
4573
+ let candidates = /* @__PURE__ */ new Map();
4574
+ next:
4575
+ for (let rawCandidate of rawCandidates) {
4576
+ let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants);
4577
+ if (candidate === null) {
4578
+ if (throwOnInvalidCandidate) {
4579
+ throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
4580
+ } else {
4581
+ continue next;
4582
+ }
4583
+ }
4584
+ candidates.set(candidate, rawCandidate);
4585
+ }
4586
+ let variants = Array.from(parsedVariants.values()).sort((a, z) => {
4587
+ return designSystem.variants.compare(a, z);
4703
4588
  });
4704
- variants.functional(
4705
- "supports",
4706
- (ruleNode, variant) => {
4707
- if (variant.value === null)
4708
- return null;
4709
- let value = variant.value.value;
4710
- if (value === null)
4711
- return null;
4712
- if (/^\w*\s*\(/.test(value)) {
4713
- let query = value.replace(/\b(and|or|not)\b/g, " $1 ");
4714
- ruleNode.nodes = [rule(`@supports ${query}`, ruleNode.nodes)];
4715
- return;
4589
+ next:
4590
+ for (let [candidate, rawCandidate] of candidates) {
4591
+ let nodes = [];
4592
+ if (candidate.kind === "arbitrary") {
4593
+ nodes = [decl(candidate.property, candidate.value)];
4594
+ } else if (candidate.kind === "static" || candidate.kind === "functional") {
4595
+ let { compileFn } = designSystem.utilities.get(candidate.root);
4596
+ let compiledNodes = compileFn(candidate);
4597
+ if (compiledNodes === void 0) {
4598
+ if (throwOnInvalidCandidate) {
4599
+ throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
4600
+ } else {
4601
+ continue next;
4602
+ }
4603
+ }
4604
+ nodes = compiledNodes;
4605
+ }
4606
+ let propertySort = getPropertySort(nodes);
4607
+ if (candidate.important) {
4608
+ applyImportant(nodes);
4609
+ }
4610
+ let node = {
4611
+ kind: "rule",
4612
+ selector: `.${escape(rawCandidate)}`,
4613
+ nodes
4614
+ };
4615
+ let variantOrder = 0n;
4616
+ for (let variant of candidate.variants) {
4617
+ let result = applyVariant(node, variant, designSystem.variants);
4618
+ if (result === null) {
4619
+ if (throwOnInvalidCandidate) {
4620
+ throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
4621
+ } else {
4622
+ continue next;
4623
+ }
4624
+ }
4625
+ variantOrder |= 1n << BigInt(variants.indexOf(variant));
4626
+ }
4627
+ nodeSorting.set(node, {
4628
+ properties: propertySort,
4629
+ variants: variantOrder,
4630
+ candidate: rawCandidate
4631
+ });
4632
+ astNodes.push(node);
4633
+ }
4634
+ astNodes.sort((a, z) => {
4635
+ let aSorting = nodeSorting.get(a);
4636
+ let zSorting = nodeSorting.get(z);
4637
+ if (aSorting.variants - zSorting.variants !== 0n) {
4638
+ return Number(aSorting.variants - zSorting.variants);
4639
+ }
4640
+ let offset = 0;
4641
+ while (aSorting.properties.length < offset && zSorting.properties.length < offset && aSorting.properties[offset] === zSorting.properties[offset]) {
4642
+ offset += 1;
4643
+ }
4644
+ return (
4645
+ // Sort by lowest property index first
4646
+ (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties
4647
+ zSorting.properties.length - aSorting.properties.length
4648
+ );
4649
+ });
4650
+ return {
4651
+ astNodes,
4652
+ nodeSorting
4653
+ };
4654
+ }
4655
+ function getPropertySort(nodes) {
4656
+ let propertySort = /* @__PURE__ */ new Set();
4657
+ let q = nodes.slice();
4658
+ next:
4659
+ while (q.length > 0) {
4660
+ let node = q.shift();
4661
+ if (node.kind === "declaration") {
4662
+ if (node.property === "--tw-sort") {
4663
+ let idx2 = property_order_default.indexOf(node.value);
4664
+ if (idx2 !== -1) {
4665
+ propertySort.add(idx2);
4666
+ break next;
4667
+ }
4668
+ }
4669
+ let idx = property_order_default.indexOf(node.property);
4670
+ if (idx !== -1)
4671
+ propertySort.add(idx);
4672
+ } else if (node.kind === "rule") {
4673
+ if (node.selector === "@at-root")
4674
+ continue;
4675
+ for (let child of node.nodes) {
4676
+ q.push(child);
4677
+ }
4678
+ }
4679
+ }
4680
+ return Array.from(propertySort).sort((a, z) => a - z);
4681
+ }
4682
+
4683
+ // src/css-parser.ts
4684
+ function parse2(input) {
4685
+ let ast = [];
4686
+ let licenseComments = [];
4687
+ let stack = [];
4688
+ let parent = null;
4689
+ let node = null;
4690
+ let current = "";
4691
+ let closingBracketStack = "";
4692
+ for (let i = 0; i < input.length; i++) {
4693
+ let char = input[i];
4694
+ if (char === "\\") {
4695
+ current += input.slice(i, i + 2);
4696
+ i += 1;
4697
+ } else if (char === "/" && input[i + 1] === "*") {
4698
+ let start = i;
4699
+ for (let j = i + 2; j < input.length; j++) {
4700
+ if (input[j] === "\\") {
4701
+ j += 1;
4702
+ } else if (input[j] === "*" && input[j + 1] === "/") {
4703
+ i = j + 1;
4704
+ break;
4705
+ }
4706
+ }
4707
+ let commentString = input.slice(start, i + 1);
4708
+ if (commentString[2] === "!") {
4709
+ licenseComments.push(comment(commentString.slice(2, -2)));
4710
+ }
4711
+ } else if (char === '"' || char === "'") {
4712
+ let start = i;
4713
+ for (let j = i + 1; j < input.length; j++) {
4714
+ if (input[j] === "\\") {
4715
+ j += 1;
4716
+ } else if (input[j] === char) {
4717
+ i = j;
4718
+ break;
4719
+ } else if (input[j] === ";" && input[j + 1] === "\n") {
4720
+ throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`);
4721
+ } else if (input[j] === "\n") {
4722
+ throw new Error(`Unterminated string: ${input.slice(start, j) + char}`);
4723
+ }
4716
4724
  }
4717
- if (!value.includes(":")) {
4718
- value = `${value}: var(--tw)`;
4725
+ current += input.slice(start, i + 1);
4726
+ } else if ((char === " " || char === "\n" || char === " ") && (input[i + 1] === " " || input[i + 1] === "\n" || input[i + 1] === " ")) {
4727
+ continue;
4728
+ } else if (char === "-" && input[i + 1] === "-" && current.length === 0) {
4729
+ let closingBracketStack2 = "";
4730
+ let start = i;
4731
+ let colonIdx = -1;
4732
+ for (let j = i + 2; j < input.length; j++) {
4733
+ if (input[j] === "\\") {
4734
+ j += 1;
4735
+ } else if (input[j] === "/" && input[j + 1] === "*") {
4736
+ for (let k = j + 2; k < input.length; k++) {
4737
+ if (input[k] === "\\") {
4738
+ k += 1;
4739
+ } else if (input[k] === "*" && input[k + 1] === "/") {
4740
+ j = k + 1;
4741
+ break;
4742
+ }
4743
+ }
4744
+ } else if (colonIdx === -1 && input[j] === ":") {
4745
+ colonIdx = current.length + j - start;
4746
+ } else if (input[j] === ";" && closingBracketStack2.length === 0) {
4747
+ current += input.slice(start, j);
4748
+ i = j;
4749
+ break;
4750
+ } else if (input[j] === "(") {
4751
+ closingBracketStack2 += ")";
4752
+ } else if (input[j] === "[") {
4753
+ closingBracketStack2 += "]";
4754
+ } else if (input[j] === "{") {
4755
+ closingBracketStack2 += "}";
4756
+ } else if ((input[j] === "}" || input.length - 1 === j) && closingBracketStack2.length === 0) {
4757
+ i = j - 1;
4758
+ current += input.slice(start, j);
4759
+ break;
4760
+ } else if (input[j] === ")" || input[j] === "]" || input[j] === "}") {
4761
+ if (closingBracketStack2.length > 0 && input[j] === closingBracketStack2[closingBracketStack2.length - 1]) {
4762
+ closingBracketStack2 = closingBracketStack2.slice(0, -1);
4763
+ }
4764
+ }
4719
4765
  }
4720
- if (value[0] !== "(" || value[value.length - 1] !== ")") {
4721
- value = `(${value})`;
4766
+ let declaration = parseDeclaration(current, colonIdx);
4767
+ if (parent) {
4768
+ parent.nodes.push(declaration);
4769
+ } else {
4770
+ ast.push(declaration);
4722
4771
  }
4723
- ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)];
4724
- },
4725
- { compounds: false }
4726
- );
4727
- staticVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"], {
4728
- compounds: false
4729
- });
4730
- staticVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"], { compounds: false });
4731
- staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
4732
- staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
4733
- {
4734
- let compareBreakpoints2 = function(a, z, direction) {
4735
- if (a === z)
4736
- return 0;
4737
- let aValue = resolvedBreakpoints.get(a);
4738
- if (aValue === null)
4739
- return direction === "asc" ? -1 : 1;
4740
- let zValue = resolvedBreakpoints.get(z);
4741
- if (zValue === null)
4742
- return direction === "asc" ? 1 : -1;
4743
- if (aValue === zValue)
4744
- return 0;
4745
- let aIsCssFunction = aValue.indexOf("(");
4746
- let zIsCssFunction = zValue.indexOf("(");
4747
- let aBucket = aIsCssFunction === -1 ? (
4748
- // No CSS function found, bucket by unit instead
4749
- aValue.replace(/[\d.]+/g, "")
4750
- ) : (
4751
- // CSS function found, bucket by function name
4752
- aValue.slice(0, aIsCssFunction)
4753
- );
4754
- let zBucket = zIsCssFunction === -1 ? (
4755
- // No CSS function found, bucket by unit
4756
- zValue.replace(/[\d.]+/g, "")
4757
- ) : (
4758
- // CSS function found, bucket by function name
4759
- zValue.slice(0, zIsCssFunction)
4760
- );
4761
- let order = (
4762
- // Compare by bucket name
4763
- aBucket.localeCompare(zBucket) || // If bucket names are the same, compare by value
4764
- (direction === "asc" ? parseInt(aValue) - parseInt(zValue) : parseInt(zValue) - parseInt(aValue))
4765
- );
4766
- if (isNaN(order)) {
4767
- return aValue.localeCompare(zValue);
4772
+ current = "";
4773
+ } else if (char === ";" && current[0] === "@") {
4774
+ node = rule(current, []);
4775
+ if (parent) {
4776
+ parent.nodes.push(node);
4777
+ } else {
4778
+ ast.push(node);
4768
4779
  }
4769
- return order;
4770
- };
4771
- let breakpoints = theme.namespace("--breakpoint");
4772
- let resolvedBreakpoints = new DefaultMap((variant) => {
4773
- switch (variant.kind) {
4774
- case "static": {
4775
- return breakpoints.get(variant.root) ?? null;
4776
- }
4777
- case "functional": {
4778
- let value = null;
4779
- if (variant.value.kind === "arbitrary") {
4780
- value = variant.value.value;
4781
- } else if (variant.value.kind === "named") {
4782
- value = theme.resolve(variant.value.value, ["--breakpoint"]);
4783
- }
4784
- if (!value) {
4785
- return null;
4780
+ current = "";
4781
+ node = null;
4782
+ } else if (char === ";") {
4783
+ let declaration = parseDeclaration(current);
4784
+ if (parent) {
4785
+ parent.nodes.push(declaration);
4786
+ } else {
4787
+ ast.push(declaration);
4788
+ }
4789
+ current = "";
4790
+ } else if (char === "{") {
4791
+ closingBracketStack += "}";
4792
+ node = rule(current.trim(), []);
4793
+ if (parent) {
4794
+ parent.nodes.push(node);
4795
+ }
4796
+ stack.push(parent);
4797
+ parent = node;
4798
+ current = "";
4799
+ node = null;
4800
+ } else if (char === "}") {
4801
+ if (closingBracketStack === "") {
4802
+ throw new Error(`Missing opening {`);
4803
+ } else {
4804
+ closingBracketStack = closingBracketStack.slice(0, -1);
4805
+ }
4806
+ if (current.length > 0) {
4807
+ if (current[0] === "@") {
4808
+ node = rule(current.trim(), []);
4809
+ if (parent) {
4810
+ parent.nodes.push(node);
4811
+ } else {
4812
+ ast.push(node);
4786
4813
  }
4787
- if (value.includes("var(")) {
4788
- return null;
4814
+ current = "";
4815
+ node = null;
4816
+ } else {
4817
+ let colonIdx = current.indexOf(":");
4818
+ if (parent) {
4819
+ let importantIdx = current.indexOf("!important", colonIdx + 1);
4820
+ parent.nodes.push({
4821
+ kind: "declaration",
4822
+ property: current.slice(0, colonIdx).trim(),
4823
+ value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
4824
+ important: importantIdx !== -1
4825
+ });
4789
4826
  }
4790
- return value;
4791
4827
  }
4792
- case "arbitrary":
4793
- case "compound":
4794
- return null;
4795
4828
  }
4796
- });
4797
- variants.group(
4798
- () => {
4799
- variants.functional(
4800
- "max",
4801
- (ruleNode, variant) => {
4802
- let value = resolvedBreakpoints.get(variant);
4803
- if (value === null)
4804
- return null;
4805
- ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)];
4806
- },
4807
- { compounds: false }
4808
- );
4809
- },
4810
- (a, z) => compareBreakpoints2(a, z, "desc")
4811
- );
4812
- variants.group(
4813
- () => {
4814
- for (let [key, value] of theme.namespace("--breakpoint")) {
4815
- if (key === null)
4816
- continue;
4817
- variants.static(
4818
- key,
4819
- (ruleNode) => {
4820
- ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4821
- },
4822
- { compounds: false }
4823
- );
4824
- }
4825
- variants.functional(
4826
- "min",
4827
- (ruleNode, variant) => {
4828
- let value = resolvedBreakpoints.get(variant);
4829
- if (value === null)
4830
- return null;
4831
- ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4832
- },
4833
- { compounds: false }
4834
- );
4835
- },
4836
- (a, z) => compareBreakpoints2(a, z, "asc")
4837
- );
4829
+ let grandParent = stack.pop() ?? null;
4830
+ if (grandParent === null && parent) {
4831
+ ast.push(parent);
4832
+ }
4833
+ parent = grandParent;
4834
+ current = "";
4835
+ node = null;
4836
+ } else {
4837
+ if (current.length === 0 && (char === " " || char === "\n" || char === " ")) {
4838
+ continue;
4839
+ }
4840
+ current += char;
4841
+ }
4838
4842
  }
4839
- staticVariant("portrait", ["@media (orientation: portrait)"], { compounds: false });
4840
- staticVariant("landscape", ["@media (orientation: landscape)"], { compounds: false });
4841
- staticVariant("ltr", ['&:where([dir="ltr"], [dir="ltr"] *)']);
4842
- staticVariant("rtl", ['&:where([dir="rtl"], [dir="rtl"] *)']);
4843
- staticVariant("dark", ["&:where(.dark, .dark *)"], { compounds: false });
4844
- staticVariant("print", ["@media print"], { compounds: false });
4845
- staticVariant("forced-colors", ["@media (forced-colors: active)"], { compounds: false });
4846
- return variants;
4843
+ if (closingBracketStack.length > 0 && parent) {
4844
+ throw new Error(`Missing closing } at ${parent.selector}`);
4845
+ }
4846
+ if (licenseComments.length > 0) {
4847
+ return licenseComments.concat(ast);
4848
+ }
4849
+ return ast;
4847
4850
  }
4848
-
4849
- // src/design-system.ts
4850
- function buildDesignSystem(theme) {
4851
+ function parseDeclaration(current, colonIdx = current.indexOf(":")) {
4852
+ let importantIdx = current.indexOf("!important", colonIdx + 1);
4851
4853
  return {
4852
- theme,
4853
- utilities: createUtilities(theme),
4854
- variants: createVariants(theme),
4855
- getClassOrder(classes) {
4856
- return getClassOrder(this, classes);
4857
- }
4854
+ kind: "declaration",
4855
+ property: current.slice(0, colonIdx).trim(),
4856
+ value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
4857
+ important: importantIdx !== -1
4858
4858
  };
4859
4859
  }
4860
4860
 
@@ -5049,7 +5049,7 @@ function compile(css2, rawCandidates) {
5049
5049
  let designSystem = buildDesignSystem(theme);
5050
5050
  walk(ast, (node, { replaceWith }) => {
5051
5051
  if (node.kind === "rule" && node.selector === "@tailwind utilities") {
5052
- replaceWith(parse3(rawCandidates, designSystem).astNodes);
5052
+ replaceWith(compileCandidates(rawCandidates, designSystem).astNodes);
5053
5053
  return false;
5054
5054
  }
5055
5055
  });
@@ -5061,7 +5061,7 @@ function compile(css2, rawCandidates) {
5061
5061
  /* Ignore `@apply ` when parsing the selector */
5062
5062
  ).split(/\s+/g);
5063
5063
  {
5064
- let candidateAst = parse3(candidates, designSystem, {
5064
+ let candidateAst = compileCandidates(candidates, designSystem, {
5065
5065
  throwOnInvalidCandidate: true
5066
5066
  }).astNodes;
5067
5067
  let newNodes = [];