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