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.
@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
9
9
  });
10
10
 
11
11
  // package.json
12
- var version = "0.0.0-oxide.1";
12
+ var version = "0.0.0-oxide.2";
13
13
  var package_default = {
14
14
  name: "tailwindcss",
15
15
  version,
@@ -118,184 +118,6 @@ function walk(ast, visit) {
118
118
  }
119
119
  }
120
120
 
121
- // src/css-parser.ts
122
- function parse(input) {
123
- let ast = [];
124
- let licenseComments = [];
125
- let stack = [];
126
- let parent = null;
127
- let node = null;
128
- let current = "";
129
- let closingBracketStack = "";
130
- for (let i = 0; i < input.length; i++) {
131
- let char = input[i];
132
- if (char === "\\") {
133
- current += input.slice(i, i + 2);
134
- i += 1;
135
- } else if (char === "/" && input[i + 1] === "*") {
136
- let start = i;
137
- for (let j = i + 2; j < input.length; j++) {
138
- if (input[j] === "\\") {
139
- j += 1;
140
- } else if (input[j] === "*" && input[j + 1] === "/") {
141
- i = j + 1;
142
- break;
143
- }
144
- }
145
- let commentString = input.slice(start, i + 1);
146
- if (commentString[2] === "!") {
147
- licenseComments.push(comment(commentString.slice(2, -2)));
148
- }
149
- } else if (char === '"' || char === "'") {
150
- let start = i;
151
- for (let j = i + 1; j < input.length; j++) {
152
- if (input[j] === "\\") {
153
- j += 1;
154
- } else if (input[j] === char) {
155
- i = j;
156
- break;
157
- } else if (input[j] === ";" && input[j + 1] === "\n") {
158
- throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`);
159
- } else if (input[j] === "\n") {
160
- throw new Error(`Unterminated string: ${input.slice(start, j) + char}`);
161
- }
162
- }
163
- current += input.slice(start, i + 1);
164
- } else if ((char === " " || char === "\n" || char === " ") && (input[i + 1] === " " || input[i + 1] === "\n" || input[i + 1] === " ")) {
165
- continue;
166
- } else if (char === "-" && input[i + 1] === "-" && current.length === 0) {
167
- let closingBracketStack2 = "";
168
- let start = i;
169
- let colonIdx = -1;
170
- for (let j = i + 2; j < input.length; j++) {
171
- if (input[j] === "\\") {
172
- j += 1;
173
- } else if (input[j] === "/" && input[j + 1] === "*") {
174
- for (let k = j + 2; k < input.length; k++) {
175
- if (input[k] === "\\") {
176
- k += 1;
177
- } else if (input[k] === "*" && input[k + 1] === "/") {
178
- j = k + 1;
179
- break;
180
- }
181
- }
182
- } else if (colonIdx === -1 && input[j] === ":") {
183
- colonIdx = current.length + j - start;
184
- } else if (input[j] === ";" && closingBracketStack2.length === 0) {
185
- current += input.slice(start, j);
186
- i = j;
187
- break;
188
- } else if (input[j] === "(") {
189
- closingBracketStack2 += ")";
190
- } else if (input[j] === "[") {
191
- closingBracketStack2 += "]";
192
- } else if (input[j] === "{") {
193
- closingBracketStack2 += "}";
194
- } else if ((input[j] === "}" || input.length - 1 === j) && closingBracketStack2.length === 0) {
195
- i = j - 1;
196
- current += input.slice(start, j);
197
- break;
198
- } else if (input[j] === ")" || input[j] === "]" || input[j] === "}") {
199
- if (closingBracketStack2.length > 0 && input[j] === closingBracketStack2[closingBracketStack2.length - 1]) {
200
- closingBracketStack2 = closingBracketStack2.slice(0, -1);
201
- }
202
- }
203
- }
204
- let declaration = parseDeclaration(current, colonIdx);
205
- if (parent) {
206
- parent.nodes.push(declaration);
207
- } else {
208
- ast.push(declaration);
209
- }
210
- current = "";
211
- } else if (char === ";" && current[0] === "@") {
212
- node = rule(current, []);
213
- if (parent) {
214
- parent.nodes.push(node);
215
- } else {
216
- ast.push(node);
217
- }
218
- current = "";
219
- node = null;
220
- } else if (char === ";") {
221
- let declaration = parseDeclaration(current);
222
- if (parent) {
223
- parent.nodes.push(declaration);
224
- } else {
225
- ast.push(declaration);
226
- }
227
- current = "";
228
- } else if (char === "{") {
229
- closingBracketStack += "}";
230
- node = rule(current.trim(), []);
231
- if (parent) {
232
- parent.nodes.push(node);
233
- }
234
- stack.push(parent);
235
- parent = node;
236
- current = "";
237
- node = null;
238
- } else if (char === "}") {
239
- if (closingBracketStack === "") {
240
- throw new Error(`Missing opening {`);
241
- } else {
242
- closingBracketStack = closingBracketStack.slice(0, -1);
243
- }
244
- if (current.length > 0) {
245
- if (current[0] === "@") {
246
- node = rule(current.trim(), []);
247
- if (parent) {
248
- parent.nodes.push(node);
249
- } else {
250
- ast.push(node);
251
- }
252
- current = "";
253
- node = null;
254
- } else {
255
- let colonIdx = current.indexOf(":");
256
- if (parent) {
257
- let importantIdx = current.indexOf("!important", colonIdx + 1);
258
- parent.nodes.push({
259
- kind: "declaration",
260
- property: current.slice(0, colonIdx).trim(),
261
- value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
262
- important: importantIdx !== -1
263
- });
264
- }
265
- }
266
- }
267
- let grandParent = stack.pop() ?? null;
268
- if (grandParent === null && parent) {
269
- ast.push(parent);
270
- }
271
- parent = grandParent;
272
- current = "";
273
- node = null;
274
- } else {
275
- if (current.length === 0 && (char === " " || char === "\n" || char === " ")) {
276
- continue;
277
- }
278
- current += char;
279
- }
280
- }
281
- if (closingBracketStack.length > 0 && parent) {
282
- throw new Error(`Missing closing } at ${parent.selector}`);
283
- }
284
- if (licenseComments.length > 0) {
285
- return licenseComments.concat(ast);
286
- }
287
- return ast;
288
- }
289
- function parseDeclaration(current, colonIdx = current.indexOf(":")) {
290
- let importantIdx = current.indexOf("!important", colonIdx + 1);
291
- return {
292
- kind: "declaration",
293
- property: current.slice(0, colonIdx).trim(),
294
- value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
295
- important: importantIdx !== -1
296
- };
297
- }
298
-
299
121
  // src/utils/math-operators.ts
300
122
  var mathFunctions = [
301
123
  "calc",
@@ -696,512 +518,9 @@ function parseCandidate(input, utilities, parsedVariants) {
696
518
  return candidate;
697
519
  }
698
520
 
699
- // src/property-order.ts
700
- var property_order_default = [
701
- "pointer-events",
702
- "visibility",
703
- "position",
704
- // How do we make `inset-x-0` come before `top-0`?
705
- "inset",
706
- "inset-inline",
707
- "inset-block",
708
- "inset-inline-start",
709
- "inset-inline-end",
710
- "top",
711
- "right",
712
- "bottom",
713
- "left",
714
- "isolation",
715
- "z-index",
716
- "order",
717
- "grid-column",
718
- "grid-column-start",
719
- "grid-column-end",
720
- "grid-row",
721
- "grid-row-start",
722
- "grid-row-end",
723
- "float",
724
- "clear",
725
- // How do we make `mx-0` come before `mt-0`?
726
- // Idea: `margin-x` property that we compile away with a Visitor plugin?
727
- "margin",
728
- "margin-inline",
729
- "margin-block",
730
- "margin-inline-start",
731
- "margin-inline-end",
732
- "margin-top",
733
- "margin-right",
734
- "margin-bottom",
735
- "margin-left",
736
- "box-sizing",
737
- "display",
738
- "aspect-ratio",
739
- "height",
740
- "max-height",
741
- "min-height",
742
- "width",
743
- "max-width",
744
- "min-width",
745
- "flex",
746
- "flex-shrink",
747
- "flex-grow",
748
- "flex-basis",
749
- "table-layout",
750
- "caption-side",
751
- "border-collapse",
752
- // There's no `border-spacing-x` property, we use variables, how to sort?
753
- "border-spacing",
754
- // '--tw-border-spacing-x',
755
- // '--tw-border-spacing-y',
756
- "transform-origin",
757
- // '--tw-translate-x',
758
- // '--tw-translate-y',
759
- "translate",
760
- "rotate",
761
- // '--tw-rotate',
762
- "--tw-skew-x",
763
- "--tw-skew-y",
764
- "scale",
765
- // '--tw-scale-x',
766
- // '--tw-scale-y',
767
- "transform",
768
- "animation",
769
- "cursor",
770
- "touch-action",
771
- "--tw-pan-x",
772
- "--tw-pan-y",
773
- "--tw-pinch-zoom",
774
- "resize",
775
- "scroll-snap-type",
776
- "--tw-scroll-snap-strictness",
777
- "scroll-snap-align",
778
- "scroll-snap-stop",
779
- "scroll-margin",
780
- "scroll-margin-inline-start",
781
- "scroll-margin-inline-end",
782
- "scroll-margin-top",
783
- "scroll-margin-right",
784
- "scroll-margin-bottom",
785
- "scroll-margin-left",
786
- "scroll-padding",
787
- "scroll-padding-inline-start",
788
- "scroll-padding-inline-end",
789
- "scroll-padding-top",
790
- "scroll-padding-right",
791
- "scroll-padding-bottom",
792
- "scroll-padding-left",
793
- "list-style-position",
794
- "list-style-type",
795
- "list-style-image",
796
- "appearance",
797
- "columns",
798
- "break-before",
799
- "break-inside",
800
- "break-after",
801
- "grid-auto-columns",
802
- "grid-auto-flow",
803
- "grid-auto-rows",
804
- "grid-template-columns",
805
- "grid-template-rows",
806
- "flex-direction",
807
- "flex-wrap",
808
- "place-content",
809
- "place-items",
810
- "align-content",
811
- "align-items",
812
- "justify-content",
813
- "justify-items",
814
- "gap",
815
- "column-gap",
816
- "row-gap",
817
- "--tw-space-x-reverse",
818
- "--tw-space-y-reverse",
819
- // Is there a more "real" property we could use for this?
820
- "divide-x-width",
821
- "divide-y-width",
822
- "--tw-divide-y-reverse",
823
- "divide-style",
824
- "divide-color",
825
- "--tw-divide-opacity",
826
- "place-self",
827
- "align-self",
828
- "justify-self",
829
- "overflow",
830
- "overflow-x",
831
- "overflow-y",
832
- "overscroll-behavior",
833
- "overscroll-behavior-x",
834
- "overscroll-behavior-y",
835
- "scroll-behavior",
836
- "text-overflow",
837
- "hyphens",
838
- "white-space",
839
- "text-wrap",
840
- "overflow-wrap",
841
- "work-break",
842
- "border-radius",
843
- "border-start-radius",
844
- // Not real
845
- "border-end-radius",
846
- // Not real
847
- "border-top-radius",
848
- // Not real
849
- "border-right-radius",
850
- // Not real
851
- "border-bottom-radius",
852
- // Not real
853
- "border-left-radius",
854
- // Not real
855
- "border-start-start-radius",
856
- "border-start-end-radius",
857
- "border-end-end-radius",
858
- "border-end-start-radius",
859
- "border-top-left-radius",
860
- "border-top-right-radius",
861
- "border-bottom-right-radius",
862
- "border-bottom-left-radius",
863
- "border-width",
864
- "border-inline-width",
865
- // Not real
866
- "border-inline-start-width",
867
- "border-inline-end-width",
868
- "border-top-width",
869
- "border-right-width",
870
- "border-bottom-width",
871
- "border-left-width",
872
- "border-style",
873
- "border-color",
874
- "border-x-color",
875
- // Not real
876
- "border-y-color",
877
- // Not real
878
- "border-inline-start-color",
879
- "border-inline-end-color",
880
- "border-top-color",
881
- "border-right-color",
882
- "border-bottom-color",
883
- "border-left-color",
884
- "--tw-border-opacity",
885
- "background-color",
886
- "--tw-bg-opacity",
887
- "background-image",
888
- "--tw-gradient-stops",
889
- "--tw-gradient-via-stops",
890
- "--tw-gradient-from",
891
- "--tw-gradient-from-position",
892
- "--tw-gradient-via",
893
- "--tw-gradient-via-position",
894
- "--tw-gradient-to",
895
- "--tw-gradient-to-position",
896
- "box-decoration-break",
897
- "background-size",
898
- "background-attachment",
899
- "background-clip",
900
- "background-position",
901
- "background-repeat",
902
- "background-origin",
903
- "fill",
904
- "stroke",
905
- "stroke-width",
906
- "object-fit",
907
- "object-position",
908
- "padding",
909
- "padding-inline",
910
- "padding-block",
911
- "padding-inline-start",
912
- "padding-inline-end",
913
- "padding-top",
914
- "padding-right",
915
- "padding-bottom",
916
- "padding-left",
917
- "text-align",
918
- "text-indent",
919
- "vertical-align",
920
- "font-family",
921
- "font-size",
922
- "font-weight",
923
- "text-transform",
924
- "font-style",
925
- "font-variant-numeric",
926
- "line-height",
927
- "letter-spacing",
928
- "color",
929
- "--tw-text-opacity",
930
- "text-decoration-line",
931
- "text-decoration-color",
932
- "text-decoration-style",
933
- "text-decoration-thickness",
934
- "text-underline-offset",
935
- "-webkit-font-smoothing",
936
- "placeholder-color",
937
- // Not real
938
- "--tw-placeholder-opacity",
939
- "caret-color",
940
- "accent-color",
941
- "opacity",
942
- "background-blend-mode",
943
- "mix-blend-mode",
944
- "box-shadow",
945
- "--tw-shadow",
946
- "--tw-shadow-color",
947
- "--tw-ring-shadow",
948
- "--tw-ring-color",
949
- "--tw-inset-shadow",
950
- "--tw-inset-shadow-color",
951
- "--tw-inset-ring-shadow",
952
- "--tw-inset-ring-color",
953
- "--tw-ring-opacity",
954
- "--tw-ring-offset-width",
955
- "--tw-ring-offset-color",
956
- "outline",
957
- "outline-width",
958
- "outline-offset",
959
- "outline-color",
960
- "--tw-blur",
961
- "--tw-brightness",
962
- "--tw-contast",
963
- "--tw-drop-shadow",
964
- "--tw-grayscale",
965
- "--tw-hue-rotate",
966
- "--tw-invert",
967
- "--tw-saturate",
968
- "--tw-sepia",
969
- "filter",
970
- "--tw-backdrop-blur",
971
- "--tw-backdrop-brightness",
972
- "--tw-backdrop-contast",
973
- "--tw-backdrop-grayscale",
974
- "--tw-backdrop-hue-rotate",
975
- "--tw-backdrop-invert",
976
- "--tw-backdrop-opacity",
977
- "--tw-backdrop-saturate",
978
- "--tw-backdrop-sepia",
979
- "backdrop-filter",
980
- "transition-property",
981
- "transition-delay",
982
- "transition-duration",
983
- "transition-timing-function",
984
- "will-change",
985
- "contain",
986
- "content",
987
- "forced-color-adjust"
988
- ];
989
-
990
- // src/utils/default-map.ts
991
- var DefaultMap = class extends Map {
992
- constructor(factory) {
993
- super();
994
- this.factory = factory;
995
- }
996
- get(key) {
997
- let value = super.get(key);
998
- if (value === void 0) {
999
- value = this.factory(key, this);
1000
- this.set(key, value);
1001
- }
1002
- return value;
1003
- }
1004
- };
1005
-
1006
- // src/utils/escape.ts
1007
- function escape(value) {
1008
- if (arguments.length == 0) {
1009
- throw new TypeError("`CSS.escape` requires an argument.");
1010
- }
1011
- var string = String(value);
1012
- var length = string.length;
1013
- var index = -1;
1014
- var codeUnit;
1015
- var result = "";
1016
- var firstCodeUnit = string.charCodeAt(0);
1017
- if (
1018
- // If the character is the first character and is a `-` (U+002D), and
1019
- // there is no second character, […]
1020
- length == 1 && firstCodeUnit == 45
1021
- ) {
1022
- return "\\" + string;
1023
- }
1024
- while (++index < length) {
1025
- codeUnit = string.charCodeAt(index);
1026
- if (codeUnit == 0) {
1027
- result += "\uFFFD";
1028
- continue;
1029
- }
1030
- if (
1031
- // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
1032
- // U+007F, […]
1033
- codeUnit >= 1 && codeUnit <= 31 || codeUnit == 127 || // If the character is the first character and is in the range [0-9]
1034
- // (U+0030 to U+0039), […]
1035
- index == 0 && codeUnit >= 48 && codeUnit <= 57 || // If the character is the second character and is in the range [0-9]
1036
- // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
1037
- index == 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit == 45
1038
- ) {
1039
- result += "\\" + codeUnit.toString(16) + " ";
1040
- continue;
1041
- }
1042
- if (codeUnit >= 128 || codeUnit == 45 || codeUnit == 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
1043
- result += string.charAt(index);
1044
- continue;
1045
- }
1046
- result += "\\" + string.charAt(index);
1047
- }
1048
- return result;
1049
- }
1050
-
1051
- // src/parse.ts
1052
- function applyImportant(ast) {
1053
- for (let node of ast) {
1054
- if (node.kind === "rule" && node.selector === "@at-root") {
1055
- continue;
1056
- }
1057
- if (node.kind === "declaration") {
1058
- node.important = true;
1059
- } else if (node.kind === "rule") {
1060
- applyImportant(node.nodes);
1061
- }
1062
- }
1063
- }
1064
- function applyVariant(node, variant, variants) {
1065
- if (variant.kind === "arbitrary") {
1066
- node.nodes = [rule(variant.selector, node.nodes)];
1067
- return;
1068
- }
1069
- let applyVariantFn = variants.get(variant.root);
1070
- if (variant.kind === "compound") {
1071
- let result2 = applyVariant(node, variant.variant, variants);
1072
- if (result2 === null)
1073
- return null;
1074
- for (let child of node.nodes) {
1075
- let result3 = applyVariantFn(child, variant);
1076
- if (result3 === null)
1077
- return null;
1078
- }
1079
- return;
1080
- }
1081
- let result = applyVariantFn(node, variant);
1082
- if (result === null)
1083
- return null;
1084
- }
1085
- function parse2(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
1086
- rawCandidates.sort();
1087
- let nodeSorting = /* @__PURE__ */ new Map();
1088
- let astNodes = [];
1089
- let parsedVariants = new DefaultMap((variant, map) => {
1090
- return parseVariant(variant, designSystem.variants, map);
1091
- });
1092
- let candidates = /* @__PURE__ */ new Map();
1093
- next:
1094
- for (let rawCandidate of rawCandidates) {
1095
- let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants);
1096
- if (candidate === null) {
1097
- if (throwOnInvalidCandidate) {
1098
- throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
1099
- } else {
1100
- continue next;
1101
- }
1102
- }
1103
- candidates.set(candidate, rawCandidate);
1104
- }
1105
- let variants = Array.from(parsedVariants.values()).sort((a, z) => {
1106
- return designSystem.variants.compare(a, z);
1107
- });
1108
- next:
1109
- for (let [candidate, rawCandidate] of candidates) {
1110
- let ruleNodes = [];
1111
- if (candidate.kind === "arbitrary") {
1112
- ruleNodes = [decl(candidate.property, candidate.value)];
1113
- } else if (candidate.kind === "static" || candidate.kind === "functional") {
1114
- let { matchFn } = designSystem.utilities.get(candidate.root);
1115
- let matchNodes = matchFn(candidate);
1116
- if (matchNodes === void 0) {
1117
- if (throwOnInvalidCandidate) {
1118
- throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
1119
- } else {
1120
- continue next;
1121
- }
1122
- }
1123
- ruleNodes = matchNodes;
1124
- }
1125
- let propertySort = getPropertySort(ruleNodes);
1126
- if (candidate.important) {
1127
- applyImportant(ruleNodes);
1128
- }
1129
- let node = {
1130
- kind: "rule",
1131
- selector: `.${escape(rawCandidate)}`,
1132
- nodes: ruleNodes
1133
- };
1134
- let variantOrder = 0n;
1135
- for (let variant of candidate.variants) {
1136
- let result = applyVariant(node, variant, designSystem.variants);
1137
- if (result === null) {
1138
- if (throwOnInvalidCandidate) {
1139
- throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
1140
- } else {
1141
- continue next;
1142
- }
1143
- }
1144
- variantOrder |= 1n << BigInt(variants.indexOf(variant));
1145
- }
1146
- nodeSorting.set(node, {
1147
- properties: propertySort,
1148
- variants: variantOrder,
1149
- candidate: rawCandidate
1150
- });
1151
- astNodes.push(node);
1152
- }
1153
- astNodes.sort((a, z) => {
1154
- let aSorting = nodeSorting.get(a);
1155
- let zSorting = nodeSorting.get(z);
1156
- if (aSorting.variants - zSorting.variants !== 0n) {
1157
- return Number(aSorting.variants - zSorting.variants);
1158
- }
1159
- let offset = 0;
1160
- while (aSorting.properties.length < offset && zSorting.properties.length < offset && aSorting.properties[offset] === zSorting.properties[offset]) {
1161
- offset += 1;
1162
- }
1163
- return (
1164
- // Sort by lowest property index first
1165
- (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties
1166
- zSorting.properties.length - aSorting.properties.length
1167
- );
1168
- });
1169
- return {
1170
- astNodes,
1171
- nodeSorting
1172
- };
1173
- }
1174
- function getPropertySort(nodes) {
1175
- let propertySort = /* @__PURE__ */ new Set();
1176
- let q = nodes.slice();
1177
- next:
1178
- while (q.length > 0) {
1179
- let node = q.shift();
1180
- if (node.kind === "declaration") {
1181
- if (node.property === "--tw-sort") {
1182
- let idx2 = property_order_default.indexOf(node.value);
1183
- if (idx2 !== -1) {
1184
- propertySort.add(idx2);
1185
- break next;
1186
- }
1187
- }
1188
- let idx = property_order_default.indexOf(node.property);
1189
- if (idx !== -1)
1190
- propertySort.add(idx);
1191
- } else if (node.kind === "rule") {
1192
- if (node.selector === "@at-root")
1193
- continue;
1194
- for (let child of node.nodes) {
1195
- q.push(child);
1196
- }
1197
- }
1198
- }
1199
- return Array.from(propertySort).sort((a, z) => a - z);
1200
- }
1201
-
1202
521
  // src/sort.ts
1203
522
  function getClassOrder(design, classes) {
1204
- let { astNodes, nodeSorting } = parse2(Array.from(classes), design, {
523
+ let { astNodes, nodeSorting } = compileCandidates(Array.from(classes), design, {
1205
524
  throwOnInvalidCandidate: false
1206
525
  });
1207
526
  let sorted = new Map(classes.map((className) => [className, null]));
@@ -1608,11 +927,11 @@ function replaceShadowColors(input, replacement) {
1608
927
  // src/utilities.ts
1609
928
  var Utilities = class {
1610
929
  utilities = /* @__PURE__ */ new Map();
1611
- static(name, matchFn) {
1612
- this.set(name, { kind: "static", matchFn });
930
+ static(name, compileFn) {
931
+ this.set(name, { kind: "static", compileFn });
1613
932
  }
1614
- functional(name, matchFn) {
1615
- this.set(name, { kind: "functional", matchFn });
933
+ functional(name, compileFn) {
934
+ this.set(name, { kind: "functional", compileFn });
1616
935
  }
1617
936
  has(name) {
1618
937
  return this.utilities.has(name);
@@ -1626,10 +945,10 @@ var Utilities = class {
1626
945
  keys() {
1627
946
  return this.utilities.keys();
1628
947
  }
1629
- set(name, { kind, matchFn }) {
948
+ set(name, { kind, compileFn }) {
1630
949
  this.utilities.set(name, {
1631
950
  kind,
1632
- matchFn
951
+ compileFn
1633
952
  });
1634
953
  }
1635
954
  };
@@ -4210,558 +3529,1239 @@ function createUtilities(theme) {
4210
3529
  }
4211
3530
  }
4212
3531
  }
4213
- switch (candidate.value.value) {
4214
- case "none":
4215
- return [
4216
- boxShadowProperties(),
4217
- decl("--tw-inset-shadow", nullShadow),
4218
- decl("--tw-inset-shadow-colored", nullShadow),
4219
- decl("box-shadow", cssBoxShadowValue)
4220
- ];
4221
- }
3532
+ switch (candidate.value.value) {
3533
+ case "none":
3534
+ return [
3535
+ boxShadowProperties(),
3536
+ decl("--tw-inset-shadow", nullShadow),
3537
+ decl("--tw-inset-shadow-colored", nullShadow),
3538
+ decl("box-shadow", cssBoxShadowValue)
3539
+ ];
3540
+ }
3541
+ {
3542
+ let value = theme.resolve(candidate.value.value, ["--inset-shadow"]);
3543
+ if (value) {
3544
+ return [
3545
+ boxShadowProperties(),
3546
+ decl("--tw-inset-shadow", value),
3547
+ decl(
3548
+ "--tw-inset-shadow-colored",
3549
+ replaceShadowColors(value, "var(--tw-inset-shadow-color)")
3550
+ ),
3551
+ decl("box-shadow", cssBoxShadowValue)
3552
+ ];
3553
+ }
3554
+ }
3555
+ {
3556
+ let value = resolveThemeColor(candidate, theme, ["--box-shadow-color", "--color"]);
3557
+ if (value) {
3558
+ return [
3559
+ boxShadowProperties(),
3560
+ decl("--tw-inset-shadow-color", value),
3561
+ decl("--tw-inset-shadow", "var(--tw-inset-shadow-colored)")
3562
+ ];
3563
+ }
3564
+ }
3565
+ });
3566
+ staticUtility("ring-inset", [boxShadowProperties, ["--tw-ring-inset", "inset"]]);
3567
+ utilities.functional("ring", (candidate) => {
3568
+ if (candidate.negative)
3569
+ return;
3570
+ if (!candidate.value) {
3571
+ return [
3572
+ boxShadowProperties(),
3573
+ decl("--tw-ring-shadow", ringShadowValue2("var(--default-ring-width)")),
3574
+ decl("box-shadow", cssBoxShadowValue)
3575
+ ];
3576
+ }
3577
+ if (candidate.value.kind === "arbitrary") {
3578
+ let value = candidate.value.value;
3579
+ let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
3580
+ switch (type) {
3581
+ case "length": {
3582
+ return [
3583
+ boxShadowProperties(),
3584
+ decl("--tw-ring-shadow", ringShadowValue2(value)),
3585
+ decl("box-shadow", cssBoxShadowValue)
3586
+ ];
3587
+ }
3588
+ default: {
3589
+ value = asColor(value, candidate.modifier, theme);
3590
+ return [decl("--tw-ring-color", value)];
3591
+ }
3592
+ }
3593
+ }
3594
+ {
3595
+ let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
3596
+ if (value) {
3597
+ return [decl("--tw-ring-color", value)];
3598
+ }
3599
+ }
3600
+ {
3601
+ let value = theme.resolve(candidate.value.value, ["--ring-width"]);
3602
+ if (!value && !isNaN(Number(candidate.value.value))) {
3603
+ value = `${candidate.value.value}px`;
3604
+ }
3605
+ if (value) {
3606
+ return [
3607
+ boxShadowProperties(),
3608
+ decl("--tw-ring-shadow", ringShadowValue2(value)),
3609
+ decl("box-shadow", cssBoxShadowValue)
3610
+ ];
3611
+ }
3612
+ }
3613
+ });
3614
+ utilities.functional("inset-ring", (candidate) => {
3615
+ if (candidate.negative)
3616
+ return;
3617
+ if (!candidate.value) {
3618
+ return [
3619
+ boxShadowProperties(),
3620
+ decl("--tw-inset-ring-shadow", insetRingShadowValue2("1px")),
3621
+ decl("box-shadow", cssBoxShadowValue)
3622
+ ];
3623
+ }
3624
+ if (candidate.value.kind === "arbitrary") {
3625
+ let value = candidate.value.value;
3626
+ let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
3627
+ switch (type) {
3628
+ case "length": {
3629
+ return [
3630
+ boxShadowProperties(),
3631
+ decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
3632
+ decl("box-shadow", cssBoxShadowValue)
3633
+ ];
3634
+ }
3635
+ default: {
3636
+ value = asColor(value, candidate.modifier, theme);
3637
+ return [decl("--tw-inset-ring-color", value)];
3638
+ }
3639
+ }
3640
+ }
3641
+ {
3642
+ let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
3643
+ if (value) {
3644
+ return [decl("--tw-inset-ring-color", value)];
3645
+ }
3646
+ }
3647
+ {
3648
+ let value = theme.resolve(candidate.value.value, ["--ring-width"]);
3649
+ if (!value && !isNaN(Number(candidate.value.value))) {
3650
+ value = `${candidate.value.value}px`;
3651
+ }
3652
+ if (value) {
3653
+ return [
3654
+ boxShadowProperties(),
3655
+ decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
3656
+ decl("box-shadow", cssBoxShadowValue)
3657
+ ];
3658
+ }
3659
+ }
3660
+ });
3661
+ let ringOffsetShadowValue = "var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)";
3662
+ utilities.functional("ring-offset", (candidate) => {
3663
+ if (candidate.negative || !candidate.value) {
3664
+ return;
3665
+ }
3666
+ if (candidate.value.kind === "arbitrary") {
3667
+ let value = candidate.value.value;
3668
+ let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
3669
+ switch (type) {
3670
+ case "length": {
3671
+ return [
3672
+ decl("--tw-ring-offset-width", value),
3673
+ decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
3674
+ ];
3675
+ }
3676
+ default: {
3677
+ value = asColor(value, candidate.modifier, theme);
3678
+ return [decl("--tw-ring-offset-color", value)];
3679
+ }
3680
+ }
3681
+ }
4222
3682
  {
4223
- let value = theme.resolve(candidate.value.value, ["--inset-shadow"]);
3683
+ let value = theme.resolve(candidate.value.value, ["--ring-offset-width"]);
4224
3684
  if (value) {
4225
3685
  return [
4226
- boxShadowProperties(),
4227
- decl("--tw-inset-shadow", value),
4228
- decl(
4229
- "--tw-inset-shadow-colored",
4230
- replaceShadowColors(value, "var(--tw-inset-shadow-color)")
4231
- ),
4232
- decl("box-shadow", cssBoxShadowValue)
3686
+ decl("--tw-ring-offset-width", value),
3687
+ decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
3688
+ ];
3689
+ } else if (!isNaN(Number(candidate.value.value))) {
3690
+ return [
3691
+ decl("--tw-ring-offset-width", `${candidate.value.value}px`),
3692
+ decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4233
3693
  ];
4234
3694
  }
4235
3695
  }
4236
3696
  {
4237
- let value = resolveThemeColor(candidate, theme, ["--box-shadow-color", "--color"]);
3697
+ let value = resolveThemeColor(candidate, theme, ["--ring-offset-color", "--color"]);
4238
3698
  if (value) {
4239
- return [
4240
- boxShadowProperties(),
4241
- decl("--tw-inset-shadow-color", value),
4242
- decl("--tw-inset-shadow", "var(--tw-inset-shadow-colored)")
4243
- ];
3699
+ return [decl("--tw-ring-offset-color", value)];
4244
3700
  }
4245
3701
  }
4246
3702
  });
4247
- staticUtility("ring-inset", [boxShadowProperties, ["--tw-ring-inset", "inset"]]);
4248
- utilities.functional("ring", (candidate) => {
4249
- if (candidate.negative)
3703
+ }
3704
+ return utilities;
3705
+ }
3706
+
3707
+ // src/utils/default-map.ts
3708
+ var DefaultMap = class extends Map {
3709
+ constructor(factory) {
3710
+ super();
3711
+ this.factory = factory;
3712
+ }
3713
+ get(key) {
3714
+ let value = super.get(key);
3715
+ if (value === void 0) {
3716
+ value = this.factory(key, this);
3717
+ this.set(key, value);
3718
+ }
3719
+ return value;
3720
+ }
3721
+ };
3722
+
3723
+ // src/variants.ts
3724
+ var Variants = class {
3725
+ compareFns = /* @__PURE__ */ new Map();
3726
+ variants = /* @__PURE__ */ new Map();
3727
+ /**
3728
+ * Registering a group of variants should result in the same sort number for
3729
+ * all the variants. This is to ensure that the variants are applied in the
3730
+ * correct order.
3731
+ */
3732
+ groupOrder = null;
3733
+ /**
3734
+ * Keep track of the last sort order instead of using the size of the map to
3735
+ * avoid unnecessarily skipping order numbers.
3736
+ */
3737
+ lastOrder = 0;
3738
+ static(name, applyFn, { compounds } = {}) {
3739
+ this.set(name, { kind: "static", applyFn, compounds: compounds ?? true });
3740
+ }
3741
+ functional(name, applyFn, { compounds } = {}) {
3742
+ this.set(name, { kind: "functional", applyFn, compounds: compounds ?? true });
3743
+ }
3744
+ compound(name, applyFn, { compounds } = {}) {
3745
+ this.set(name, { kind: "compound", applyFn, compounds: compounds ?? true });
3746
+ }
3747
+ group(fn, compareFn) {
3748
+ this.groupOrder = this.nextOrder();
3749
+ if (compareFn)
3750
+ this.compareFns.set(this.groupOrder, compareFn);
3751
+ fn();
3752
+ this.groupOrder = null;
3753
+ }
3754
+ has(name) {
3755
+ return this.variants.has(name);
3756
+ }
3757
+ get(name) {
3758
+ return this.variants.get(name)?.applyFn;
3759
+ }
3760
+ kind(name) {
3761
+ return this.variants.get(name)?.kind;
3762
+ }
3763
+ compounds(name) {
3764
+ return this.variants.get(name)?.compounds;
3765
+ }
3766
+ compare(a, z) {
3767
+ if (a === z)
3768
+ return 0;
3769
+ if (a === null)
3770
+ return -1;
3771
+ if (z === null)
3772
+ return 1;
3773
+ if (a.kind === "arbitrary" && z.kind === "arbitrary") {
3774
+ return a.selector.localeCompare(z.selector);
3775
+ } else if (a.kind === "arbitrary") {
3776
+ return 1;
3777
+ } else if (z.kind === "arbitrary") {
3778
+ return -1;
3779
+ }
3780
+ let aOrder = this.variants.get(a.root).order;
3781
+ let zOrder = this.variants.get(z.root).order;
3782
+ let orderedByVariant = aOrder - zOrder;
3783
+ if (orderedByVariant !== 0)
3784
+ return orderedByVariant;
3785
+ if (a.kind === "compound" && z.kind === "compound") {
3786
+ return this.compare(a.variant, z.variant);
3787
+ }
3788
+ let compareFn = this.compareFns.get(aOrder);
3789
+ if (compareFn === void 0)
3790
+ return 0;
3791
+ return compareFn(a, z);
3792
+ }
3793
+ keys() {
3794
+ return this.variants.keys();
3795
+ }
3796
+ set(name, { kind, applyFn, compounds }) {
3797
+ this.lastOrder = this.nextOrder();
3798
+ this.variants.set(name, {
3799
+ kind,
3800
+ applyFn,
3801
+ order: this.lastOrder,
3802
+ compounds
3803
+ });
3804
+ }
3805
+ nextOrder() {
3806
+ return this.groupOrder ?? this.lastOrder + 1;
3807
+ }
3808
+ };
3809
+ function createVariants(theme) {
3810
+ let variants = new Variants();
3811
+ function staticVariant(name, selectors, { compounds } = {}) {
3812
+ variants.static(
3813
+ name,
3814
+ (r) => {
3815
+ r.nodes = selectors.map((selector) => rule(selector, r.nodes));
3816
+ },
3817
+ { compounds }
3818
+ );
3819
+ }
3820
+ variants.static("force", () => {
3821
+ }, { compounds: false });
3822
+ staticVariant("*", ["& > *"], { compounds: false });
3823
+ variants.compound("not", (ruleNode) => {
3824
+ ruleNode.selector = `&:not(${ruleNode.selector.replace("&", "*")})`;
3825
+ });
3826
+ variants.compound("group", (ruleNode, variant) => {
3827
+ let groupSelector = variant.modifier ? `:where(.group\\/${variant.modifier.value})` : ":where(.group)";
3828
+ ruleNode.selector = ruleNode.selector.replace("&", groupSelector);
3829
+ ruleNode.selector = `&:is(${ruleNode.selector} *)`;
3830
+ });
3831
+ variants.compound("peer", (ruleNode, variant) => {
3832
+ let peerSelector = variant.modifier ? `:where(.peer\\/${variant.modifier.value})` : ":where(.peer)";
3833
+ ruleNode.selector = ruleNode.selector.replace("&", peerSelector);
3834
+ ruleNode.selector = `&:is(${ruleNode.selector} ~ *)`;
3835
+ });
3836
+ staticVariant("first-letter", ["&::first-letter"], { compounds: false });
3837
+ staticVariant("first-line", ["&::first-line"], { compounds: false });
3838
+ staticVariant("marker", ["& *::marker", "&::marker"], { compounds: false });
3839
+ staticVariant("selection", ["& *::selection", "&::selection"], { compounds: false });
3840
+ staticVariant("file", ["&::file-selector-button"], { compounds: false });
3841
+ staticVariant("placeholder", ["&::placeholder"], { compounds: false });
3842
+ staticVariant("backdrop", ["&::backdrop"], { compounds: false });
3843
+ {
3844
+ let contentProperties2 = function() {
3845
+ return rule("@at-root", [
3846
+ rule("@property --tw-content", [
3847
+ decl("syntax", '"*"'),
3848
+ decl("initial-value", '""'),
3849
+ decl("inherits", "false")
3850
+ ])
3851
+ ]);
3852
+ };
3853
+ variants.static(
3854
+ "before",
3855
+ (v) => {
3856
+ v.nodes = [
3857
+ rule("&::before", [
3858
+ contentProperties2(),
3859
+ decl("content", "var(--tw-content)"),
3860
+ ...v.nodes
3861
+ ])
3862
+ ];
3863
+ },
3864
+ { compounds: false }
3865
+ );
3866
+ variants.static(
3867
+ "after",
3868
+ (v) => {
3869
+ v.nodes = [
3870
+ rule("&::after", [contentProperties2(), decl("content", "var(--tw-content)"), ...v.nodes])
3871
+ ];
3872
+ },
3873
+ { compounds: false }
3874
+ );
3875
+ }
3876
+ let pseudos = [
3877
+ // Positional
3878
+ ["first", "&:first-child"],
3879
+ ["last", "&:last-child"],
3880
+ ["only", "&:only-child"],
3881
+ ["odd", "&:nth-child(odd)"],
3882
+ ["even", "&:nth-child(even)"],
3883
+ ["first-of-type", "&:first-of-type"],
3884
+ ["last-of-type", "&:last-of-type"],
3885
+ ["only-of-type", "&:only-of-type"],
3886
+ // State
3887
+ // TODO: Remove alpha vars or no?
3888
+ ["visited", "&:visited"],
3889
+ ["target", "&:target"],
3890
+ ["open", "&[open]"],
3891
+ // Forms
3892
+ ["default", "&:default"],
3893
+ ["checked", "&:checked"],
3894
+ ["indeterminate", "&:indeterminate"],
3895
+ ["placeholder-shown", "&:placeholder-shown"],
3896
+ ["autofill", "&:autofill"],
3897
+ ["optional", "&:optional"],
3898
+ ["required", "&:required"],
3899
+ ["valid", "&:valid"],
3900
+ ["invalid", "&:invalid"],
3901
+ ["in-range", "&:in-range"],
3902
+ ["out-of-range", "&:out-of-range"],
3903
+ ["read-only", "&:read-only"],
3904
+ // Content
3905
+ ["empty", "&:empty"],
3906
+ // Interactive
3907
+ ["focus-within", "&:focus-within"],
3908
+ [
3909
+ "hover",
3910
+ "&:hover"
3911
+ // TODO: Update tests for this:
3912
+ // v => {
3913
+ // v.nodes = [
3914
+ // rule('@media (hover: hover) and (pointer: fine)', [
3915
+ // rule('&:hover', v.nodes),
3916
+ // ]),
3917
+ // ]
3918
+ // }
3919
+ ],
3920
+ ["focus", "&:focus"],
3921
+ ["focus-visible", "&:focus-visible"],
3922
+ ["active", "&:active"],
3923
+ ["enabled", "&:enabled"],
3924
+ ["disabled", "&:disabled"]
3925
+ ];
3926
+ for (let [key, value] of pseudos) {
3927
+ staticVariant(key, [value]);
3928
+ }
3929
+ variants.compound("has", (ruleNode) => {
3930
+ ruleNode.selector = `&:has(${ruleNode.selector.replace("&", "*")})`;
3931
+ });
3932
+ variants.functional("aria", (ruleNode, variant) => {
3933
+ if (variant.value === null)
3934
+ return null;
3935
+ if (variant.value.kind == "arbitrary") {
3936
+ ruleNode.nodes = [rule(`&[aria-${variant.value.value}]`, ruleNode.nodes)];
3937
+ } else {
3938
+ ruleNode.nodes = [rule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)];
3939
+ }
3940
+ });
3941
+ variants.functional("data", (ruleNode, variant) => {
3942
+ if (variant.value === null)
3943
+ return null;
3944
+ ruleNode.nodes = [rule(`&[data-${variant.value.value}]`, ruleNode.nodes)];
3945
+ });
3946
+ variants.functional(
3947
+ "supports",
3948
+ (ruleNode, variant) => {
3949
+ if (variant.value === null)
3950
+ return null;
3951
+ let value = variant.value.value;
3952
+ if (value === null)
3953
+ return null;
3954
+ if (/^\w*\s*\(/.test(value)) {
3955
+ let query = value.replace(/\b(and|or|not)\b/g, " $1 ");
3956
+ ruleNode.nodes = [rule(`@supports ${query}`, ruleNode.nodes)];
4250
3957
  return;
4251
- if (!candidate.value) {
4252
- return [
4253
- boxShadowProperties(),
4254
- decl("--tw-ring-shadow", ringShadowValue2("var(--default-ring-width)")),
4255
- decl("box-shadow", cssBoxShadowValue)
4256
- ];
4257
- }
4258
- if (candidate.value.kind === "arbitrary") {
4259
- let value = candidate.value.value;
4260
- let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
4261
- switch (type) {
4262
- case "length": {
4263
- return [
4264
- boxShadowProperties(),
4265
- decl("--tw-ring-shadow", ringShadowValue2(value)),
4266
- decl("box-shadow", cssBoxShadowValue)
4267
- ];
4268
- }
4269
- default: {
4270
- value = asColor(value, candidate.modifier, theme);
4271
- return [decl("--tw-ring-color", value)];
4272
- }
4273
- }
4274
- }
4275
- {
4276
- let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
4277
- if (value) {
4278
- return [decl("--tw-ring-color", value)];
4279
- }
4280
- }
4281
- {
4282
- let value = theme.resolve(candidate.value.value, ["--ring-width"]);
4283
- if (!value && !isNaN(Number(candidate.value.value))) {
4284
- value = `${candidate.value.value}px`;
4285
- }
4286
- if (value) {
4287
- return [
4288
- boxShadowProperties(),
4289
- decl("--tw-ring-shadow", ringShadowValue2(value)),
4290
- decl("box-shadow", cssBoxShadowValue)
4291
- ];
4292
- }
4293
3958
  }
4294
- });
4295
- utilities.functional("inset-ring", (candidate) => {
4296
- if (candidate.negative)
4297
- return;
4298
- if (!candidate.value) {
4299
- return [
4300
- boxShadowProperties(),
4301
- decl("--tw-inset-ring-shadow", insetRingShadowValue2("1px")),
4302
- decl("box-shadow", cssBoxShadowValue)
4303
- ];
3959
+ if (!value.includes(":")) {
3960
+ value = `${value}: var(--tw)`;
4304
3961
  }
4305
- if (candidate.value.kind === "arbitrary") {
4306
- let value = candidate.value.value;
4307
- let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
4308
- switch (type) {
4309
- case "length": {
4310
- return [
4311
- boxShadowProperties(),
4312
- decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
4313
- decl("box-shadow", cssBoxShadowValue)
4314
- ];
4315
- }
4316
- default: {
4317
- value = asColor(value, candidate.modifier, theme);
4318
- return [decl("--tw-inset-ring-color", value)];
4319
- }
4320
- }
3962
+ if (value[0] !== "(" || value[value.length - 1] !== ")") {
3963
+ value = `(${value})`;
4321
3964
  }
4322
- {
4323
- let value = resolveThemeColor(candidate, theme, ["--ring-color", "--color"]);
4324
- if (value) {
4325
- return [decl("--tw-inset-ring-color", value)];
4326
- }
3965
+ ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)];
3966
+ },
3967
+ { compounds: false }
3968
+ );
3969
+ staticVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"], {
3970
+ compounds: false
3971
+ });
3972
+ staticVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"], { compounds: false });
3973
+ staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
3974
+ staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
3975
+ {
3976
+ let compareBreakpoints2 = function(a, z, direction) {
3977
+ if (a === z)
3978
+ return 0;
3979
+ let aValue = resolvedBreakpoints.get(a);
3980
+ if (aValue === null)
3981
+ return direction === "asc" ? -1 : 1;
3982
+ let zValue = resolvedBreakpoints.get(z);
3983
+ if (zValue === null)
3984
+ return direction === "asc" ? 1 : -1;
3985
+ if (aValue === zValue)
3986
+ return 0;
3987
+ let aIsCssFunction = aValue.indexOf("(");
3988
+ let zIsCssFunction = zValue.indexOf("(");
3989
+ let aBucket = aIsCssFunction === -1 ? (
3990
+ // No CSS function found, bucket by unit instead
3991
+ aValue.replace(/[\d.]+/g, "")
3992
+ ) : (
3993
+ // CSS function found, bucket by function name
3994
+ aValue.slice(0, aIsCssFunction)
3995
+ );
3996
+ let zBucket = zIsCssFunction === -1 ? (
3997
+ // No CSS function found, bucket by unit
3998
+ zValue.replace(/[\d.]+/g, "")
3999
+ ) : (
4000
+ // CSS function found, bucket by function name
4001
+ zValue.slice(0, zIsCssFunction)
4002
+ );
4003
+ let order = (
4004
+ // Compare by bucket name
4005
+ aBucket.localeCompare(zBucket) || // If bucket names are the same, compare by value
4006
+ (direction === "asc" ? parseInt(aValue) - parseInt(zValue) : parseInt(zValue) - parseInt(aValue))
4007
+ );
4008
+ if (isNaN(order)) {
4009
+ return aValue.localeCompare(zValue);
4327
4010
  }
4328
- {
4329
- let value = theme.resolve(candidate.value.value, ["--ring-width"]);
4330
- if (!value && !isNaN(Number(candidate.value.value))) {
4331
- value = `${candidate.value.value}px`;
4332
- }
4333
- if (value) {
4334
- return [
4335
- boxShadowProperties(),
4336
- decl("--tw-inset-ring-shadow", insetRingShadowValue2(value)),
4337
- decl("box-shadow", cssBoxShadowValue)
4338
- ];
4011
+ return order;
4012
+ };
4013
+ let breakpoints = theme.namespace("--breakpoint");
4014
+ let resolvedBreakpoints = new DefaultMap((variant) => {
4015
+ switch (variant.kind) {
4016
+ case "static": {
4017
+ return breakpoints.get(variant.root) ?? null;
4339
4018
  }
4340
- }
4341
- });
4342
- let ringOffsetShadowValue = "var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)";
4343
- utilities.functional("ring-offset", (candidate) => {
4344
- if (candidate.negative || !candidate.value) {
4345
- return;
4346
- }
4347
- if (candidate.value.kind === "arbitrary") {
4348
- let value = candidate.value.value;
4349
- let type = candidate.value.dataType ?? inferDataType(value, ["color", "length"]);
4350
- switch (type) {
4351
- case "length": {
4352
- return [
4353
- decl("--tw-ring-offset-width", value),
4354
- decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4355
- ];
4019
+ case "functional": {
4020
+ let value = null;
4021
+ if (variant.value.kind === "arbitrary") {
4022
+ value = variant.value.value;
4023
+ } else if (variant.value.kind === "named") {
4024
+ value = theme.resolve(variant.value.value, ["--breakpoint"]);
4356
4025
  }
4357
- default: {
4358
- value = asColor(value, candidate.modifier, theme);
4359
- return [decl("--tw-ring-offset-color", value)];
4026
+ if (!value) {
4027
+ return null;
4360
4028
  }
4029
+ if (value.includes("var(")) {
4030
+ return null;
4031
+ }
4032
+ return value;
4361
4033
  }
4034
+ case "arbitrary":
4035
+ case "compound":
4036
+ return null;
4362
4037
  }
4363
- {
4364
- let value = theme.resolve(candidate.value.value, ["--ring-offset-width"]);
4365
- if (value) {
4366
- return [
4367
- decl("--tw-ring-offset-width", value),
4368
- decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4369
- ];
4370
- } else if (!isNaN(Number(candidate.value.value))) {
4371
- return [
4372
- decl("--tw-ring-offset-width", `${candidate.value.value}px`),
4373
- decl("--tw-ring-offset-shadow", ringOffsetShadowValue)
4374
- ];
4375
- }
4376
- }
4377
- {
4378
- let value = resolveThemeColor(candidate, theme, ["--ring-offset-color", "--color"]);
4379
- if (value) {
4380
- return [decl("--tw-ring-offset-color", value)];
4038
+ });
4039
+ variants.group(
4040
+ () => {
4041
+ variants.functional(
4042
+ "max",
4043
+ (ruleNode, variant) => {
4044
+ let value = resolvedBreakpoints.get(variant);
4045
+ if (value === null)
4046
+ return null;
4047
+ ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)];
4048
+ },
4049
+ { compounds: false }
4050
+ );
4051
+ },
4052
+ (a, z) => compareBreakpoints2(a, z, "desc")
4053
+ );
4054
+ variants.group(
4055
+ () => {
4056
+ for (let [key, value] of theme.namespace("--breakpoint")) {
4057
+ if (key === null)
4058
+ continue;
4059
+ variants.static(
4060
+ key,
4061
+ (ruleNode) => {
4062
+ ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4063
+ },
4064
+ { compounds: false }
4065
+ );
4381
4066
  }
4382
- }
4383
- });
4067
+ variants.functional(
4068
+ "min",
4069
+ (ruleNode, variant) => {
4070
+ let value = resolvedBreakpoints.get(variant);
4071
+ if (value === null)
4072
+ return null;
4073
+ ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4074
+ },
4075
+ { compounds: false }
4076
+ );
4077
+ },
4078
+ (a, z) => compareBreakpoints2(a, z, "asc")
4079
+ );
4384
4080
  }
4385
- return utilities;
4081
+ staticVariant("portrait", ["@media (orientation: portrait)"], { compounds: false });
4082
+ staticVariant("landscape", ["@media (orientation: landscape)"], { compounds: false });
4083
+ staticVariant("ltr", ['&:where([dir="ltr"], [dir="ltr"] *)']);
4084
+ staticVariant("rtl", ['&:where([dir="rtl"], [dir="rtl"] *)']);
4085
+ staticVariant("dark", ["@media (prefers-color-scheme: dark)"], { compounds: false });
4086
+ staticVariant("print", ["@media print"], { compounds: false });
4087
+ staticVariant("forced-colors", ["@media (forced-colors: active)"], { compounds: false });
4088
+ return variants;
4089
+ }
4090
+
4091
+ // src/design-system.ts
4092
+ function buildDesignSystem(theme) {
4093
+ return {
4094
+ theme,
4095
+ utilities: createUtilities(theme),
4096
+ variants: createVariants(theme),
4097
+ getClassOrder(classes) {
4098
+ return getClassOrder(this, classes);
4099
+ }
4100
+ };
4386
4101
  }
4387
4102
 
4388
- // src/variants.ts
4389
- var Variants = class {
4390
- compareFns = /* @__PURE__ */ new Map();
4391
- variants = /* @__PURE__ */ new Map();
4392
- /**
4393
- * Registering a group of variants should result in the same sort number for
4394
- * all the variants. This is to ensure that the variants are applied in the
4395
- * correct order.
4396
- */
4397
- groupOrder = null;
4398
- /**
4399
- * Keep track of the last sort order instead of using the size of the map to
4400
- * avoid unnecessarily skipping order numbers.
4401
- */
4402
- lastOrder = 0;
4403
- static(name, applyFn, { compounds } = {}) {
4404
- this.set(name, { kind: "static", applyFn, compounds: compounds ?? true });
4405
- }
4406
- functional(name, applyFn, { compounds } = {}) {
4407
- this.set(name, { kind: "functional", applyFn, compounds: compounds ?? true });
4408
- }
4409
- compound(name, applyFn, { compounds } = {}) {
4410
- this.set(name, { kind: "compound", applyFn, compounds: compounds ?? true });
4411
- }
4412
- group(fn, compareFn) {
4413
- this.groupOrder = this.nextOrder();
4414
- if (compareFn)
4415
- this.compareFns.set(this.groupOrder, compareFn);
4416
- fn();
4417
- this.groupOrder = null;
4418
- }
4419
- has(name) {
4420
- return this.variants.has(name);
4421
- }
4422
- get(name) {
4423
- return this.variants.get(name)?.applyFn;
4424
- }
4425
- kind(name) {
4426
- return this.variants.get(name)?.kind;
4103
+ // src/property-order.ts
4104
+ var property_order_default = [
4105
+ "pointer-events",
4106
+ "visibility",
4107
+ "position",
4108
+ // How do we make `inset-x-0` come before `top-0`?
4109
+ "inset",
4110
+ "inset-inline",
4111
+ "inset-block",
4112
+ "inset-inline-start",
4113
+ "inset-inline-end",
4114
+ "top",
4115
+ "right",
4116
+ "bottom",
4117
+ "left",
4118
+ "isolation",
4119
+ "z-index",
4120
+ "order",
4121
+ "grid-column",
4122
+ "grid-column-start",
4123
+ "grid-column-end",
4124
+ "grid-row",
4125
+ "grid-row-start",
4126
+ "grid-row-end",
4127
+ "float",
4128
+ "clear",
4129
+ // How do we make `mx-0` come before `mt-0`?
4130
+ // Idea: `margin-x` property that we compile away with a Visitor plugin?
4131
+ "margin",
4132
+ "margin-inline",
4133
+ "margin-block",
4134
+ "margin-inline-start",
4135
+ "margin-inline-end",
4136
+ "margin-top",
4137
+ "margin-right",
4138
+ "margin-bottom",
4139
+ "margin-left",
4140
+ "box-sizing",
4141
+ "display",
4142
+ "aspect-ratio",
4143
+ "height",
4144
+ "max-height",
4145
+ "min-height",
4146
+ "width",
4147
+ "max-width",
4148
+ "min-width",
4149
+ "flex",
4150
+ "flex-shrink",
4151
+ "flex-grow",
4152
+ "flex-basis",
4153
+ "table-layout",
4154
+ "caption-side",
4155
+ "border-collapse",
4156
+ // There's no `border-spacing-x` property, we use variables, how to sort?
4157
+ "border-spacing",
4158
+ // '--tw-border-spacing-x',
4159
+ // '--tw-border-spacing-y',
4160
+ "transform-origin",
4161
+ // '--tw-translate-x',
4162
+ // '--tw-translate-y',
4163
+ "translate",
4164
+ "rotate",
4165
+ // '--tw-rotate',
4166
+ "--tw-skew-x",
4167
+ "--tw-skew-y",
4168
+ "scale",
4169
+ // '--tw-scale-x',
4170
+ // '--tw-scale-y',
4171
+ "transform",
4172
+ "animation",
4173
+ "cursor",
4174
+ "touch-action",
4175
+ "--tw-pan-x",
4176
+ "--tw-pan-y",
4177
+ "--tw-pinch-zoom",
4178
+ "resize",
4179
+ "scroll-snap-type",
4180
+ "--tw-scroll-snap-strictness",
4181
+ "scroll-snap-align",
4182
+ "scroll-snap-stop",
4183
+ "scroll-margin",
4184
+ "scroll-margin-inline-start",
4185
+ "scroll-margin-inline-end",
4186
+ "scroll-margin-top",
4187
+ "scroll-margin-right",
4188
+ "scroll-margin-bottom",
4189
+ "scroll-margin-left",
4190
+ "scroll-padding",
4191
+ "scroll-padding-inline-start",
4192
+ "scroll-padding-inline-end",
4193
+ "scroll-padding-top",
4194
+ "scroll-padding-right",
4195
+ "scroll-padding-bottom",
4196
+ "scroll-padding-left",
4197
+ "list-style-position",
4198
+ "list-style-type",
4199
+ "list-style-image",
4200
+ "appearance",
4201
+ "columns",
4202
+ "break-before",
4203
+ "break-inside",
4204
+ "break-after",
4205
+ "grid-auto-columns",
4206
+ "grid-auto-flow",
4207
+ "grid-auto-rows",
4208
+ "grid-template-columns",
4209
+ "grid-template-rows",
4210
+ "flex-direction",
4211
+ "flex-wrap",
4212
+ "place-content",
4213
+ "place-items",
4214
+ "align-content",
4215
+ "align-items",
4216
+ "justify-content",
4217
+ "justify-items",
4218
+ "gap",
4219
+ "column-gap",
4220
+ "row-gap",
4221
+ "--tw-space-x-reverse",
4222
+ "--tw-space-y-reverse",
4223
+ // Is there a more "real" property we could use for this?
4224
+ "divide-x-width",
4225
+ "divide-y-width",
4226
+ "--tw-divide-y-reverse",
4227
+ "divide-style",
4228
+ "divide-color",
4229
+ "--tw-divide-opacity",
4230
+ "place-self",
4231
+ "align-self",
4232
+ "justify-self",
4233
+ "overflow",
4234
+ "overflow-x",
4235
+ "overflow-y",
4236
+ "overscroll-behavior",
4237
+ "overscroll-behavior-x",
4238
+ "overscroll-behavior-y",
4239
+ "scroll-behavior",
4240
+ "text-overflow",
4241
+ "hyphens",
4242
+ "white-space",
4243
+ "text-wrap",
4244
+ "overflow-wrap",
4245
+ "work-break",
4246
+ "border-radius",
4247
+ "border-start-radius",
4248
+ // Not real
4249
+ "border-end-radius",
4250
+ // Not real
4251
+ "border-top-radius",
4252
+ // Not real
4253
+ "border-right-radius",
4254
+ // Not real
4255
+ "border-bottom-radius",
4256
+ // Not real
4257
+ "border-left-radius",
4258
+ // Not real
4259
+ "border-start-start-radius",
4260
+ "border-start-end-radius",
4261
+ "border-end-end-radius",
4262
+ "border-end-start-radius",
4263
+ "border-top-left-radius",
4264
+ "border-top-right-radius",
4265
+ "border-bottom-right-radius",
4266
+ "border-bottom-left-radius",
4267
+ "border-width",
4268
+ "border-inline-width",
4269
+ // Not real
4270
+ "border-inline-start-width",
4271
+ "border-inline-end-width",
4272
+ "border-top-width",
4273
+ "border-right-width",
4274
+ "border-bottom-width",
4275
+ "border-left-width",
4276
+ "border-style",
4277
+ "border-color",
4278
+ "border-x-color",
4279
+ // Not real
4280
+ "border-y-color",
4281
+ // Not real
4282
+ "border-inline-start-color",
4283
+ "border-inline-end-color",
4284
+ "border-top-color",
4285
+ "border-right-color",
4286
+ "border-bottom-color",
4287
+ "border-left-color",
4288
+ "--tw-border-opacity",
4289
+ "background-color",
4290
+ "--tw-bg-opacity",
4291
+ "background-image",
4292
+ "--tw-gradient-stops",
4293
+ "--tw-gradient-via-stops",
4294
+ "--tw-gradient-from",
4295
+ "--tw-gradient-from-position",
4296
+ "--tw-gradient-via",
4297
+ "--tw-gradient-via-position",
4298
+ "--tw-gradient-to",
4299
+ "--tw-gradient-to-position",
4300
+ "box-decoration-break",
4301
+ "background-size",
4302
+ "background-attachment",
4303
+ "background-clip",
4304
+ "background-position",
4305
+ "background-repeat",
4306
+ "background-origin",
4307
+ "fill",
4308
+ "stroke",
4309
+ "stroke-width",
4310
+ "object-fit",
4311
+ "object-position",
4312
+ "padding",
4313
+ "padding-inline",
4314
+ "padding-block",
4315
+ "padding-inline-start",
4316
+ "padding-inline-end",
4317
+ "padding-top",
4318
+ "padding-right",
4319
+ "padding-bottom",
4320
+ "padding-left",
4321
+ "text-align",
4322
+ "text-indent",
4323
+ "vertical-align",
4324
+ "font-family",
4325
+ "font-size",
4326
+ "font-weight",
4327
+ "text-transform",
4328
+ "font-style",
4329
+ "font-variant-numeric",
4330
+ "line-height",
4331
+ "letter-spacing",
4332
+ "color",
4333
+ "--tw-text-opacity",
4334
+ "text-decoration-line",
4335
+ "text-decoration-color",
4336
+ "text-decoration-style",
4337
+ "text-decoration-thickness",
4338
+ "text-underline-offset",
4339
+ "-webkit-font-smoothing",
4340
+ "placeholder-color",
4341
+ // Not real
4342
+ "--tw-placeholder-opacity",
4343
+ "caret-color",
4344
+ "accent-color",
4345
+ "opacity",
4346
+ "background-blend-mode",
4347
+ "mix-blend-mode",
4348
+ "box-shadow",
4349
+ "--tw-shadow",
4350
+ "--tw-shadow-color",
4351
+ "--tw-ring-shadow",
4352
+ "--tw-ring-color",
4353
+ "--tw-inset-shadow",
4354
+ "--tw-inset-shadow-color",
4355
+ "--tw-inset-ring-shadow",
4356
+ "--tw-inset-ring-color",
4357
+ "--tw-ring-opacity",
4358
+ "--tw-ring-offset-width",
4359
+ "--tw-ring-offset-color",
4360
+ "outline",
4361
+ "outline-width",
4362
+ "outline-offset",
4363
+ "outline-color",
4364
+ "--tw-blur",
4365
+ "--tw-brightness",
4366
+ "--tw-contast",
4367
+ "--tw-drop-shadow",
4368
+ "--tw-grayscale",
4369
+ "--tw-hue-rotate",
4370
+ "--tw-invert",
4371
+ "--tw-saturate",
4372
+ "--tw-sepia",
4373
+ "filter",
4374
+ "--tw-backdrop-blur",
4375
+ "--tw-backdrop-brightness",
4376
+ "--tw-backdrop-contast",
4377
+ "--tw-backdrop-grayscale",
4378
+ "--tw-backdrop-hue-rotate",
4379
+ "--tw-backdrop-invert",
4380
+ "--tw-backdrop-opacity",
4381
+ "--tw-backdrop-saturate",
4382
+ "--tw-backdrop-sepia",
4383
+ "backdrop-filter",
4384
+ "transition-property",
4385
+ "transition-delay",
4386
+ "transition-duration",
4387
+ "transition-timing-function",
4388
+ "will-change",
4389
+ "contain",
4390
+ "content",
4391
+ "forced-color-adjust"
4392
+ ];
4393
+
4394
+ // src/utils/escape.ts
4395
+ function escape(value) {
4396
+ if (arguments.length == 0) {
4397
+ throw new TypeError("`CSS.escape` requires an argument.");
4427
4398
  }
4428
- compounds(name) {
4429
- return this.variants.get(name)?.compounds;
4399
+ var string = String(value);
4400
+ var length = string.length;
4401
+ var index = -1;
4402
+ var codeUnit;
4403
+ var result = "";
4404
+ var firstCodeUnit = string.charCodeAt(0);
4405
+ if (
4406
+ // If the character is the first character and is a `-` (U+002D), and
4407
+ // there is no second character, […]
4408
+ length == 1 && firstCodeUnit == 45
4409
+ ) {
4410
+ return "\\" + string;
4430
4411
  }
4431
- compare(a, z) {
4432
- if (a === z)
4433
- return 0;
4434
- if (a === null)
4435
- return -1;
4436
- if (z === null)
4437
- return 1;
4438
- if (a.kind === "arbitrary" && z.kind === "arbitrary") {
4439
- return a.selector.localeCompare(z.selector);
4440
- } else if (a.kind === "arbitrary") {
4441
- return 1;
4442
- } else if (z.kind === "arbitrary") {
4443
- return -1;
4412
+ while (++index < length) {
4413
+ codeUnit = string.charCodeAt(index);
4414
+ if (codeUnit == 0) {
4415
+ result += "\uFFFD";
4416
+ continue;
4444
4417
  }
4445
- let aOrder = this.variants.get(a.root).order;
4446
- let zOrder = this.variants.get(z.root).order;
4447
- let orderedByVariant = aOrder - zOrder;
4448
- if (orderedByVariant !== 0)
4449
- return orderedByVariant;
4450
- if (a.kind === "compound" && z.kind === "compound") {
4451
- return this.compare(a.variant, z.variant);
4418
+ if (
4419
+ // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
4420
+ // U+007F, […]
4421
+ codeUnit >= 1 && codeUnit <= 31 || codeUnit == 127 || // If the character is the first character and is in the range [0-9]
4422
+ // (U+0030 to U+0039), […]
4423
+ index == 0 && codeUnit >= 48 && codeUnit <= 57 || // If the character is the second character and is in the range [0-9]
4424
+ // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
4425
+ index == 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit == 45
4426
+ ) {
4427
+ result += "\\" + codeUnit.toString(16) + " ";
4428
+ continue;
4452
4429
  }
4453
- let compareFn = this.compareFns.get(aOrder);
4454
- if (compareFn === void 0)
4455
- return 0;
4456
- return compareFn(a, z);
4457
- }
4458
- keys() {
4459
- return this.variants.keys();
4460
- }
4461
- set(name, { kind, applyFn, compounds }) {
4462
- this.lastOrder = this.nextOrder();
4463
- this.variants.set(name, {
4464
- kind,
4465
- applyFn,
4466
- order: this.lastOrder,
4467
- compounds
4468
- });
4469
- }
4470
- nextOrder() {
4471
- return this.groupOrder ?? this.lastOrder + 1;
4472
- }
4473
- };
4474
- function createVariants(theme) {
4475
- let variants = new Variants();
4476
- function staticVariant(name, selectors, { compounds } = {}) {
4477
- variants.static(
4478
- name,
4479
- (r) => {
4480
- r.nodes = selectors.map((selector) => rule(selector, r.nodes));
4481
- },
4482
- { compounds }
4483
- );
4484
- }
4485
- variants.static("force", () => {
4486
- }, { compounds: false });
4487
- staticVariant("*", ["& > *"], { compounds: false });
4488
- variants.compound("not", (ruleNode) => {
4489
- ruleNode.selector = `&:not(${ruleNode.selector.replace("&", "*")})`;
4490
- });
4491
- variants.compound("group", (ruleNode, variant) => {
4492
- let groupSelector = variant.modifier ? `:where(.group\\/${variant.modifier.value})` : ":where(.group)";
4493
- ruleNode.selector = ruleNode.selector.replace("&", groupSelector);
4494
- ruleNode.selector = `&:is(${ruleNode.selector} *)`;
4495
- });
4496
- variants.compound("peer", (ruleNode, variant) => {
4497
- let peerSelector = variant.modifier ? `:where(.peer\\/${variant.modifier.value})` : ":where(.peer)";
4498
- ruleNode.selector = ruleNode.selector.replace("&", peerSelector);
4499
- ruleNode.selector = `&:is(${ruleNode.selector} ~ *)`;
4500
- });
4501
- staticVariant("first-letter", ["&::first-letter"], { compounds: false });
4502
- staticVariant("first-line", ["&::first-line"], { compounds: false });
4503
- staticVariant("marker", ["& *::marker", "&::marker"], { compounds: false });
4504
- staticVariant("selection", ["& *::selection", "&::selection"], { compounds: false });
4505
- staticVariant("file", ["&::file-selector-button"], { compounds: false });
4506
- staticVariant("placeholder", ["&::placeholder"], { compounds: false });
4507
- staticVariant("backdrop", ["&::backdrop"], { compounds: false });
4508
- {
4509
- let contentProperties2 = function() {
4510
- return rule("@at-root", [
4511
- rule("@property --tw-content", [
4512
- decl("syntax", '"*"'),
4513
- decl("initial-value", '""'),
4514
- decl("inherits", "false")
4515
- ])
4516
- ]);
4517
- };
4518
- variants.static(
4519
- "before",
4520
- (v) => {
4521
- v.nodes = [
4522
- rule("&::before", [
4523
- contentProperties2(),
4524
- decl("content", "var(--tw-content)"),
4525
- ...v.nodes
4526
- ])
4527
- ];
4528
- },
4529
- { compounds: false }
4530
- );
4531
- variants.static(
4532
- "after",
4533
- (v) => {
4534
- v.nodes = [
4535
- rule("&::after", [contentProperties2(), decl("content", "var(--tw-content)"), ...v.nodes])
4536
- ];
4537
- },
4538
- { compounds: false }
4539
- );
4430
+ if (codeUnit >= 128 || codeUnit == 45 || codeUnit == 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
4431
+ result += string.charAt(index);
4432
+ continue;
4433
+ }
4434
+ result += "\\" + string.charAt(index);
4540
4435
  }
4541
- let pseudos = [
4542
- // Positional
4543
- ["first", "&:first-child"],
4544
- ["last", "&:last-child"],
4545
- ["only", "&:only-child"],
4546
- ["odd", "&:nth-child(odd)"],
4547
- ["even", "&:nth-child(even)"],
4548
- ["first-of-type", "&:first-of-type"],
4549
- ["last-of-type", "&:last-of-type"],
4550
- ["only-of-type", "&:only-of-type"],
4551
- // State
4552
- // TODO: Remove alpha vars or no?
4553
- ["visited", "&:visited"],
4554
- ["target", "&:target"],
4555
- ["open", "&[open]"],
4556
- // Forms
4557
- ["default", "&:default"],
4558
- ["checked", "&:checked"],
4559
- ["indeterminate", "&:indeterminate"],
4560
- ["placeholder-shown", "&:placeholder-shown"],
4561
- ["autofill", "&:autofill"],
4562
- ["optional", "&:optional"],
4563
- ["required", "&:required"],
4564
- ["valid", "&:valid"],
4565
- ["invalid", "&:invalid"],
4566
- ["in-range", "&:in-range"],
4567
- ["out-of-range", "&:out-of-range"],
4568
- ["read-only", "&:read-only"],
4569
- // Content
4570
- ["empty", "&:empty"],
4571
- // Interactive
4572
- ["focus-within", "&:focus-within"],
4573
- [
4574
- "hover",
4575
- "&:hover"
4576
- // TODO: Update tests for this:
4577
- // v => {
4578
- // v.nodes = [
4579
- // rule('@media (hover: hover) and (pointer: fine)', [
4580
- // rule('&:hover', v.nodes),
4581
- // ]),
4582
- // ]
4583
- // }
4584
- ],
4585
- ["focus", "&:focus"],
4586
- ["focus-visible", "&:focus-visible"],
4587
- ["active", "&:active"],
4588
- ["enabled", "&:enabled"],
4589
- ["disabled", "&:disabled"]
4590
- ];
4591
- for (let [key, value] of pseudos) {
4592
- staticVariant(key, [value]);
4436
+ return result;
4437
+ }
4438
+
4439
+ // src/compile.ts
4440
+ function applyImportant(ast) {
4441
+ for (let node of ast) {
4442
+ if (node.kind === "rule" && node.selector === "@at-root") {
4443
+ continue;
4444
+ }
4445
+ if (node.kind === "declaration") {
4446
+ node.important = true;
4447
+ } else if (node.kind === "rule") {
4448
+ applyImportant(node.nodes);
4449
+ }
4593
4450
  }
4594
- variants.compound("has", (ruleNode) => {
4595
- ruleNode.selector = `&:has(${ruleNode.selector.replace("&", "*")})`;
4596
- });
4597
- variants.functional("aria", (ruleNode, variant) => {
4598
- if (variant.value === null)
4451
+ }
4452
+ function applyVariant(node, variant, variants) {
4453
+ if (variant.kind === "arbitrary") {
4454
+ node.nodes = [rule(variant.selector, node.nodes)];
4455
+ return;
4456
+ }
4457
+ let applyVariantFn = variants.get(variant.root);
4458
+ if (variant.kind === "compound") {
4459
+ let result2 = applyVariant(node, variant.variant, variants);
4460
+ if (result2 === null)
4599
4461
  return null;
4600
- if (variant.value.kind == "arbitrary") {
4601
- ruleNode.nodes = [rule(`&[aria-${variant.value.value}]`, ruleNode.nodes)];
4602
- } else {
4603
- ruleNode.nodes = [rule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)];
4462
+ for (let child of node.nodes) {
4463
+ let result3 = applyVariantFn(child, variant);
4464
+ if (result3 === null)
4465
+ return null;
4604
4466
  }
4467
+ return;
4468
+ }
4469
+ let result = applyVariantFn(node, variant);
4470
+ if (result === null)
4471
+ return null;
4472
+ }
4473
+ function compileCandidates(rawCandidates, designSystem, { throwOnInvalidCandidate = false } = {}) {
4474
+ rawCandidates.sort();
4475
+ let nodeSorting = /* @__PURE__ */ new Map();
4476
+ let astNodes = [];
4477
+ let parsedVariants = new DefaultMap((variant, map) => {
4478
+ return parseVariant(variant, designSystem.variants, map);
4605
4479
  });
4606
- variants.functional("data", (ruleNode, variant) => {
4607
- if (variant.value === null)
4608
- return null;
4609
- ruleNode.nodes = [rule(`&[data-${variant.value.value}]`, ruleNode.nodes)];
4480
+ let candidates = /* @__PURE__ */ new Map();
4481
+ next:
4482
+ for (let rawCandidate of rawCandidates) {
4483
+ let candidate = parseCandidate(rawCandidate, designSystem.utilities, parsedVariants);
4484
+ if (candidate === null) {
4485
+ if (throwOnInvalidCandidate) {
4486
+ throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
4487
+ } else {
4488
+ continue next;
4489
+ }
4490
+ }
4491
+ candidates.set(candidate, rawCandidate);
4492
+ }
4493
+ let variants = Array.from(parsedVariants.values()).sort((a, z) => {
4494
+ return designSystem.variants.compare(a, z);
4610
4495
  });
4611
- variants.functional(
4612
- "supports",
4613
- (ruleNode, variant) => {
4614
- if (variant.value === null)
4615
- return null;
4616
- let value = variant.value.value;
4617
- if (value === null)
4618
- return null;
4619
- if (/^\w*\s*\(/.test(value)) {
4620
- let query = value.replace(/\b(and|or|not)\b/g, " $1 ");
4621
- ruleNode.nodes = [rule(`@supports ${query}`, ruleNode.nodes)];
4622
- return;
4496
+ next:
4497
+ for (let [candidate, rawCandidate] of candidates) {
4498
+ let nodes = [];
4499
+ if (candidate.kind === "arbitrary") {
4500
+ nodes = [decl(candidate.property, candidate.value)];
4501
+ } else if (candidate.kind === "static" || candidate.kind === "functional") {
4502
+ let { compileFn } = designSystem.utilities.get(candidate.root);
4503
+ let compiledNodes = compileFn(candidate);
4504
+ if (compiledNodes === void 0) {
4505
+ if (throwOnInvalidCandidate) {
4506
+ throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
4507
+ } else {
4508
+ continue next;
4509
+ }
4510
+ }
4511
+ nodes = compiledNodes;
4512
+ }
4513
+ let propertySort = getPropertySort(nodes);
4514
+ if (candidate.important) {
4515
+ applyImportant(nodes);
4516
+ }
4517
+ let node = {
4518
+ kind: "rule",
4519
+ selector: `.${escape(rawCandidate)}`,
4520
+ nodes
4521
+ };
4522
+ let variantOrder = 0n;
4523
+ for (let variant of candidate.variants) {
4524
+ let result = applyVariant(node, variant, designSystem.variants);
4525
+ if (result === null) {
4526
+ if (throwOnInvalidCandidate) {
4527
+ throw new Error(`Cannot apply unknown utility class: ${rawCandidate}`);
4528
+ } else {
4529
+ continue next;
4530
+ }
4531
+ }
4532
+ variantOrder |= 1n << BigInt(variants.indexOf(variant));
4533
+ }
4534
+ nodeSorting.set(node, {
4535
+ properties: propertySort,
4536
+ variants: variantOrder,
4537
+ candidate: rawCandidate
4538
+ });
4539
+ astNodes.push(node);
4540
+ }
4541
+ astNodes.sort((a, z) => {
4542
+ let aSorting = nodeSorting.get(a);
4543
+ let zSorting = nodeSorting.get(z);
4544
+ if (aSorting.variants - zSorting.variants !== 0n) {
4545
+ return Number(aSorting.variants - zSorting.variants);
4546
+ }
4547
+ let offset = 0;
4548
+ while (aSorting.properties.length < offset && zSorting.properties.length < offset && aSorting.properties[offset] === zSorting.properties[offset]) {
4549
+ offset += 1;
4550
+ }
4551
+ return (
4552
+ // Sort by lowest property index first
4553
+ (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) || // Sort by most properties first, then by least properties
4554
+ zSorting.properties.length - aSorting.properties.length
4555
+ );
4556
+ });
4557
+ return {
4558
+ astNodes,
4559
+ nodeSorting
4560
+ };
4561
+ }
4562
+ function getPropertySort(nodes) {
4563
+ let propertySort = /* @__PURE__ */ new Set();
4564
+ let q = nodes.slice();
4565
+ next:
4566
+ while (q.length > 0) {
4567
+ let node = q.shift();
4568
+ if (node.kind === "declaration") {
4569
+ if (node.property === "--tw-sort") {
4570
+ let idx2 = property_order_default.indexOf(node.value);
4571
+ if (idx2 !== -1) {
4572
+ propertySort.add(idx2);
4573
+ break next;
4574
+ }
4575
+ }
4576
+ let idx = property_order_default.indexOf(node.property);
4577
+ if (idx !== -1)
4578
+ propertySort.add(idx);
4579
+ } else if (node.kind === "rule") {
4580
+ if (node.selector === "@at-root")
4581
+ continue;
4582
+ for (let child of node.nodes) {
4583
+ q.push(child);
4584
+ }
4585
+ }
4586
+ }
4587
+ return Array.from(propertySort).sort((a, z) => a - z);
4588
+ }
4589
+
4590
+ // src/css-parser.ts
4591
+ function parse(input) {
4592
+ let ast = [];
4593
+ let licenseComments = [];
4594
+ let stack = [];
4595
+ let parent = null;
4596
+ let node = null;
4597
+ let current = "";
4598
+ let closingBracketStack = "";
4599
+ for (let i = 0; i < input.length; i++) {
4600
+ let char = input[i];
4601
+ if (char === "\\") {
4602
+ current += input.slice(i, i + 2);
4603
+ i += 1;
4604
+ } else if (char === "/" && input[i + 1] === "*") {
4605
+ let start = i;
4606
+ for (let j = i + 2; j < input.length; j++) {
4607
+ if (input[j] === "\\") {
4608
+ j += 1;
4609
+ } else if (input[j] === "*" && input[j + 1] === "/") {
4610
+ i = j + 1;
4611
+ break;
4612
+ }
4613
+ }
4614
+ let commentString = input.slice(start, i + 1);
4615
+ if (commentString[2] === "!") {
4616
+ licenseComments.push(comment(commentString.slice(2, -2)));
4617
+ }
4618
+ } else if (char === '"' || char === "'") {
4619
+ let start = i;
4620
+ for (let j = i + 1; j < input.length; j++) {
4621
+ if (input[j] === "\\") {
4622
+ j += 1;
4623
+ } else if (input[j] === char) {
4624
+ i = j;
4625
+ break;
4626
+ } else if (input[j] === ";" && input[j + 1] === "\n") {
4627
+ throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`);
4628
+ } else if (input[j] === "\n") {
4629
+ throw new Error(`Unterminated string: ${input.slice(start, j) + char}`);
4630
+ }
4623
4631
  }
4624
- if (!value.includes(":")) {
4625
- value = `${value}: var(--tw)`;
4632
+ current += input.slice(start, i + 1);
4633
+ } else if ((char === " " || char === "\n" || char === " ") && (input[i + 1] === " " || input[i + 1] === "\n" || input[i + 1] === " ")) {
4634
+ continue;
4635
+ } else if (char === "-" && input[i + 1] === "-" && current.length === 0) {
4636
+ let closingBracketStack2 = "";
4637
+ let start = i;
4638
+ let colonIdx = -1;
4639
+ for (let j = i + 2; j < input.length; j++) {
4640
+ if (input[j] === "\\") {
4641
+ j += 1;
4642
+ } else if (input[j] === "/" && input[j + 1] === "*") {
4643
+ for (let k = j + 2; k < input.length; k++) {
4644
+ if (input[k] === "\\") {
4645
+ k += 1;
4646
+ } else if (input[k] === "*" && input[k + 1] === "/") {
4647
+ j = k + 1;
4648
+ break;
4649
+ }
4650
+ }
4651
+ } else if (colonIdx === -1 && input[j] === ":") {
4652
+ colonIdx = current.length + j - start;
4653
+ } else if (input[j] === ";" && closingBracketStack2.length === 0) {
4654
+ current += input.slice(start, j);
4655
+ i = j;
4656
+ break;
4657
+ } else if (input[j] === "(") {
4658
+ closingBracketStack2 += ")";
4659
+ } else if (input[j] === "[") {
4660
+ closingBracketStack2 += "]";
4661
+ } else if (input[j] === "{") {
4662
+ closingBracketStack2 += "}";
4663
+ } else if ((input[j] === "}" || input.length - 1 === j) && closingBracketStack2.length === 0) {
4664
+ i = j - 1;
4665
+ current += input.slice(start, j);
4666
+ break;
4667
+ } else if (input[j] === ")" || input[j] === "]" || input[j] === "}") {
4668
+ if (closingBracketStack2.length > 0 && input[j] === closingBracketStack2[closingBracketStack2.length - 1]) {
4669
+ closingBracketStack2 = closingBracketStack2.slice(0, -1);
4670
+ }
4671
+ }
4626
4672
  }
4627
- if (value[0] !== "(" || value[value.length - 1] !== ")") {
4628
- value = `(${value})`;
4673
+ let declaration = parseDeclaration(current, colonIdx);
4674
+ if (parent) {
4675
+ parent.nodes.push(declaration);
4676
+ } else {
4677
+ ast.push(declaration);
4629
4678
  }
4630
- ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)];
4631
- },
4632
- { compounds: false }
4633
- );
4634
- staticVariant("motion-safe", ["@media (prefers-reduced-motion: no-preference)"], {
4635
- compounds: false
4636
- });
4637
- staticVariant("motion-reduce", ["@media (prefers-reduced-motion: reduce)"], { compounds: false });
4638
- staticVariant("contrast-more", ["@media (prefers-contrast: more)"], { compounds: false });
4639
- staticVariant("contrast-less", ["@media (prefers-contrast: less)"], { compounds: false });
4640
- {
4641
- let compareBreakpoints2 = function(a, z, direction) {
4642
- if (a === z)
4643
- return 0;
4644
- let aValue = resolvedBreakpoints.get(a);
4645
- if (aValue === null)
4646
- return direction === "asc" ? -1 : 1;
4647
- let zValue = resolvedBreakpoints.get(z);
4648
- if (zValue === null)
4649
- return direction === "asc" ? 1 : -1;
4650
- if (aValue === zValue)
4651
- return 0;
4652
- let aIsCssFunction = aValue.indexOf("(");
4653
- let zIsCssFunction = zValue.indexOf("(");
4654
- let aBucket = aIsCssFunction === -1 ? (
4655
- // No CSS function found, bucket by unit instead
4656
- aValue.replace(/[\d.]+/g, "")
4657
- ) : (
4658
- // CSS function found, bucket by function name
4659
- aValue.slice(0, aIsCssFunction)
4660
- );
4661
- let zBucket = zIsCssFunction === -1 ? (
4662
- // No CSS function found, bucket by unit
4663
- zValue.replace(/[\d.]+/g, "")
4664
- ) : (
4665
- // CSS function found, bucket by function name
4666
- zValue.slice(0, zIsCssFunction)
4667
- );
4668
- let order = (
4669
- // Compare by bucket name
4670
- aBucket.localeCompare(zBucket) || // If bucket names are the same, compare by value
4671
- (direction === "asc" ? parseInt(aValue) - parseInt(zValue) : parseInt(zValue) - parseInt(aValue))
4672
- );
4673
- if (isNaN(order)) {
4674
- return aValue.localeCompare(zValue);
4679
+ current = "";
4680
+ } else if (char === ";" && current[0] === "@") {
4681
+ node = rule(current, []);
4682
+ if (parent) {
4683
+ parent.nodes.push(node);
4684
+ } else {
4685
+ ast.push(node);
4675
4686
  }
4676
- return order;
4677
- };
4678
- let breakpoints = theme.namespace("--breakpoint");
4679
- let resolvedBreakpoints = new DefaultMap((variant) => {
4680
- switch (variant.kind) {
4681
- case "static": {
4682
- return breakpoints.get(variant.root) ?? null;
4683
- }
4684
- case "functional": {
4685
- let value = null;
4686
- if (variant.value.kind === "arbitrary") {
4687
- value = variant.value.value;
4688
- } else if (variant.value.kind === "named") {
4689
- value = theme.resolve(variant.value.value, ["--breakpoint"]);
4690
- }
4691
- if (!value) {
4692
- return null;
4687
+ current = "";
4688
+ node = null;
4689
+ } else if (char === ";") {
4690
+ let declaration = parseDeclaration(current);
4691
+ if (parent) {
4692
+ parent.nodes.push(declaration);
4693
+ } else {
4694
+ ast.push(declaration);
4695
+ }
4696
+ current = "";
4697
+ } else if (char === "{") {
4698
+ closingBracketStack += "}";
4699
+ node = rule(current.trim(), []);
4700
+ if (parent) {
4701
+ parent.nodes.push(node);
4702
+ }
4703
+ stack.push(parent);
4704
+ parent = node;
4705
+ current = "";
4706
+ node = null;
4707
+ } else if (char === "}") {
4708
+ if (closingBracketStack === "") {
4709
+ throw new Error(`Missing opening {`);
4710
+ } else {
4711
+ closingBracketStack = closingBracketStack.slice(0, -1);
4712
+ }
4713
+ if (current.length > 0) {
4714
+ if (current[0] === "@") {
4715
+ node = rule(current.trim(), []);
4716
+ if (parent) {
4717
+ parent.nodes.push(node);
4718
+ } else {
4719
+ ast.push(node);
4693
4720
  }
4694
- if (value.includes("var(")) {
4695
- return null;
4721
+ current = "";
4722
+ node = null;
4723
+ } else {
4724
+ let colonIdx = current.indexOf(":");
4725
+ if (parent) {
4726
+ let importantIdx = current.indexOf("!important", colonIdx + 1);
4727
+ parent.nodes.push({
4728
+ kind: "declaration",
4729
+ property: current.slice(0, colonIdx).trim(),
4730
+ value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
4731
+ important: importantIdx !== -1
4732
+ });
4696
4733
  }
4697
- return value;
4698
4734
  }
4699
- case "arbitrary":
4700
- case "compound":
4701
- return null;
4702
4735
  }
4703
- });
4704
- variants.group(
4705
- () => {
4706
- variants.functional(
4707
- "max",
4708
- (ruleNode, variant) => {
4709
- let value = resolvedBreakpoints.get(variant);
4710
- if (value === null)
4711
- return null;
4712
- ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)];
4713
- },
4714
- { compounds: false }
4715
- );
4716
- },
4717
- (a, z) => compareBreakpoints2(a, z, "desc")
4718
- );
4719
- variants.group(
4720
- () => {
4721
- for (let [key, value] of theme.namespace("--breakpoint")) {
4722
- if (key === null)
4723
- continue;
4724
- variants.static(
4725
- key,
4726
- (ruleNode) => {
4727
- ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4728
- },
4729
- { compounds: false }
4730
- );
4731
- }
4732
- variants.functional(
4733
- "min",
4734
- (ruleNode, variant) => {
4735
- let value = resolvedBreakpoints.get(variant);
4736
- if (value === null)
4737
- return null;
4738
- ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)];
4739
- },
4740
- { compounds: false }
4741
- );
4742
- },
4743
- (a, z) => compareBreakpoints2(a, z, "asc")
4744
- );
4736
+ let grandParent = stack.pop() ?? null;
4737
+ if (grandParent === null && parent) {
4738
+ ast.push(parent);
4739
+ }
4740
+ parent = grandParent;
4741
+ current = "";
4742
+ node = null;
4743
+ } else {
4744
+ if (current.length === 0 && (char === " " || char === "\n" || char === " ")) {
4745
+ continue;
4746
+ }
4747
+ current += char;
4748
+ }
4745
4749
  }
4746
- staticVariant("portrait", ["@media (orientation: portrait)"], { compounds: false });
4747
- staticVariant("landscape", ["@media (orientation: landscape)"], { compounds: false });
4748
- staticVariant("ltr", ['&:where([dir="ltr"], [dir="ltr"] *)']);
4749
- staticVariant("rtl", ['&:where([dir="rtl"], [dir="rtl"] *)']);
4750
- staticVariant("dark", ["&:where(.dark, .dark *)"], { compounds: false });
4751
- staticVariant("print", ["@media print"], { compounds: false });
4752
- staticVariant("forced-colors", ["@media (forced-colors: active)"], { compounds: false });
4753
- return variants;
4750
+ if (closingBracketStack.length > 0 && parent) {
4751
+ throw new Error(`Missing closing } at ${parent.selector}`);
4752
+ }
4753
+ if (licenseComments.length > 0) {
4754
+ return licenseComments.concat(ast);
4755
+ }
4756
+ return ast;
4754
4757
  }
4755
-
4756
- // src/design-system.ts
4757
- function buildDesignSystem(theme) {
4758
+ function parseDeclaration(current, colonIdx = current.indexOf(":")) {
4759
+ let importantIdx = current.indexOf("!important", colonIdx + 1);
4758
4760
  return {
4759
- theme,
4760
- utilities: createUtilities(theme),
4761
- variants: createVariants(theme),
4762
- getClassOrder(classes) {
4763
- return getClassOrder(this, classes);
4764
- }
4761
+ kind: "declaration",
4762
+ property: current.slice(0, colonIdx).trim(),
4763
+ value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
4764
+ important: importantIdx !== -1
4765
4765
  };
4766
4766
  }
4767
4767
 
@@ -4956,7 +4956,7 @@ function compile(css, rawCandidates) {
4956
4956
  let designSystem = buildDesignSystem(theme);
4957
4957
  walk(ast, (node, { replaceWith }) => {
4958
4958
  if (node.kind === "rule" && node.selector === "@tailwind utilities") {
4959
- replaceWith(parse2(rawCandidates, designSystem).astNodes);
4959
+ replaceWith(compileCandidates(rawCandidates, designSystem).astNodes);
4960
4960
  return false;
4961
4961
  }
4962
4962
  });
@@ -4968,7 +4968,7 @@ function compile(css, rawCandidates) {
4968
4968
  /* Ignore `@apply ` when parsing the selector */
4969
4969
  ).split(/\s+/g);
4970
4970
  {
4971
- let candidateAst = parse2(candidates, designSystem, {
4971
+ let candidateAst = compileCandidates(candidates, designSystem, {
4972
4972
  throwOnInvalidCandidate: true
4973
4973
  }).astNodes;
4974
4974
  let newNodes = [];