mancha 0.17.0 → 0.17.4

package/dist/css_gen_utils.js

@@ -1,41 +1,44 @@
-const MEDIA_BREAKPOINTS = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-};
-const REM_UNIT = 0.25;
-const UNITS_SM = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+export const MEDIA_BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+const MEDIA_ENTRIES = Object.entries(MEDIA_BREAKPOINTS);
+export const REM_UNIT = 0.25;
+// Generate 1-15
+const UNITS_SM = [...Array(15)].map((_, i) => i + 1);
+// Common larger values
 const UNITS_LG = [16, 20, 24, 25, 28, 30, 32, 36, 40, 44, 48, 50, 52, 56, 60];
 const UNITS_XL = [
     64, 72, 80, 96, 100, 112, 128, 144, 160, 192, 200, 224, 256, 288, 300, 320, 384, 400, 448, 500,
     512,
 ];
-const UNITS_ALL = [...UNITS_SM, ...UNITS_LG, ...UNITS_XL, ...Object.values(MEDIA_BREAKPOINTS)];
-const PERCENTS = [1, 2, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 98, 99, 100];
-const DURATIONS = [75, 100, 150, 200, 300, 500, 700, 1000];
+export const UNITS_ALL = [
+    ...UNITS_SM,
+    ...UNITS_LG,
+    ...UNITS_XL,
+    ...Object.values(MEDIA_BREAKPOINTS),
+];
+export const PERCENTS = [1, 2, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 98, 99, 100];
+export const DURATIONS = [75, 100, 150, 200, 300, 500, 700, 1000];
 const PSEUDO_STATES = ["hover", "focus", "disabled", "active"];
-const PROPS_SPACING = {
+export const PROPS_SPACING = {
     margin: "m",
     padding: "p",
 };
-const PROPS_SIZING = {
+export const PROPS_SIZING = {
     width: "w",
     height: "h",
 };
-const PROPS_POSITION = {
+export const PROPS_POSITION = {
     top: "top",
     right: "right",
     bottom: "bottom",
     left: "left",
 };
-const PROPS_SIZING_MINMAX = {
+export const PROPS_SIZING_MINMAX = {
     "min-width": "min-w",
     "min-height": "min-h",
     "max-width": "max-w",
     "max-height": "max-h",
 };
-const PROPS_CUSTOM = {
+export const PROPS_CUSTOM = {
     // Based on https://tailwindcss.com.
     // Font family.
     "font-mono": { "font-family": "monospace" },
@@ -270,6 +273,71 @@ const PROPS_CUSTOM = {
     "bg-fixed": { "background-attachment": "fixed" },
     "bg-local": { "background-attachment": "local" },
     "bg-scroll": { "background-attachment": "scroll" },
+    // Screen/viewport sizing.
+    "min-h-screen": { "min-height": "100vh" },
+    "max-h-screen": { "max-height": "100vh" },
+    "min-w-screen": { "min-width": "100vw" },
+    "h-dvh": { height: "100dvh" },
+    "h-svh": { height: "100svh" },
+    "h-lvh": { height: "100lvh" },
+    "w-dvw": { width: "100dvw" },
+    "w-svw": { width: "100svw" },
+    "w-lvw": { width: "100lvw" },
+    "min-h-dvh": { "min-height": "100dvh" },
+    "min-h-svh": { "min-height": "100svh" },
+    "min-h-lvh": { "min-height": "100lvh" },
+    // Flexbox enhancements.
+    "flex-none": { flex: "none" },
+    "flex-auto": { flex: "1 1 auto" },
+    "flex-initial": { flex: "0 1 auto" },
+    grow: { "flex-grow": "1" },
+    "grow-0": { "flex-grow": "0" },
+    shrink: { "flex-shrink": "1" },
+    "shrink-0": { "flex-shrink": "0" },
+    "self-auto": { "align-self": "auto" },
+    "self-start": { "align-self": "flex-start" },
+    "self-end": { "align-self": "flex-end" },
+    "self-center": { "align-self": "center" },
+    "self-stretch": { "align-self": "stretch" },
+    "self-baseline": { "align-self": "baseline" },
+    "content-normal": { "align-content": "normal" },
+    "content-start": { "align-content": "flex-start" },
+    "content-end": { "align-content": "flex-end" },
+    "content-center": { "align-content": "center" },
+    "content-between": { "align-content": "space-between" },
+    "content-around": { "align-content": "space-around" },
+    "content-evenly": { "align-content": "space-evenly" },
+    "content-stretch": { "align-content": "stretch" },
+    "items-baseline": { "align-items": "baseline" },
+    // Inset utilities.
+    "inset-0": { inset: "0" },
+    "inset-auto": { inset: "auto" },
+    "inset-x-0": { left: "0", right: "0" },
+    "inset-y-0": { top: "0", bottom: "0" },
+    "inset-x-auto": { left: "auto", right: "auto" },
+    "inset-y-auto": { top: "auto", bottom: "auto" },
+    // Accessibility.
+    "sr-only": {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        "white-space": "nowrap",
+        "border-width": "0",
+    },
+    "not-sr-only": {
+        position: "static",
+        width: "auto",
+        height: "auto",
+        padding: "0",
+        margin: "0",
+        overflow: "visible",
+        clip: "auto",
+        "white-space": "normal",
+    },
 };
 const PROPS_AS_IS = [
     `@keyframes spin {
@@ -287,544 +355,426 @@ const PROPS_AS_IS = [
     50% { opacity: .5 }
   }`,
 ];
-const PROPS_COLORS = {
+export const PROPS_COLORS = {
     red: {
-        50: 0xffebee,
-        100: 0xffcdd2,
-        200: 0xef9a9a,
-        300: 0xe57373,
-        400: 0xef5350,
-        500: 0xf44336,
-        600: 0xe53935,
-        700: 0xd32f2f,
-        800: 0xc62828,
-        900: 0xb71c1c,
+        50: "#ffebee",
+        100: "#ffcdd2",
+        200: "#ef9a9a",
+        300: "#e57373",
+        400: "#ef5350",
+        500: "#f44336",
+        600: "#e53935",
+        700: "#d32f2f",
+        800: "#c62828",
+        900: "#b71c1c",
     },
     pink: {
-        50: 0xfce4ec,
-        100: 0xf8bbd0,
-        200: 0xf48fb1,
-        300: 0xf06292,
-        400: 0xec407a,
-        500: 0xe91e63,
-        600: 0xd81b60,
-        700: 0xc2185b,
-        800: 0xad1457,
-        900: 0x880e4f,
+        50: "#fce4ec",
+        100: "#f8bbd0",
+        200: "#f48fb1",
+        300: "#f06292",
+        400: "#ec407a",
+        500: "#e91e63",
+        600: "#d81b60",
+        700: "#c2185b",
+        800: "#ad1457",
+        900: "#880e4f",
     },
     purple: {
-        50: 0xf3e5f5,
-        100: 0xe1bee7,
-        200: 0xce93d8,
-        300: 0xba68c8,
-        400: 0xab47bc,
-        500: 0x9c27b0,
-        600: 0x8e24aa,
-        700: 0x7b1fa2,
-        800: 0x6a1b9a,
-        900: 0x4a148c,
+        50: "#f3e5f5",
+        100: "#e1bee7",
+        200: "#ce93d8",
+        300: "#ba68c8",
+        400: "#ab47bc",
+        500: "#9c27b0",
+        600: "#8e24aa",
+        700: "#7b1fa2",
+        800: "#6a1b9a",
+        900: "#4a148c",
     },
     "deep-purple": {
-        50: 0xede7f6,
-        100: 0xd1c4e9,
-        200: 0xb39ddb,
-        300: 0x9575cd,
-        400: 0x7e57c2,
-        500: 0x673ab7,
-        600: 0x5e35b1,
-        700: 0x512da8,
-        800: 0x4527a0,
-        900: 0x311b92,
+        50: "#ede7f6",
+        100: "#d1c4e9",
+        200: "#b39ddb",
+        300: "#9575cd",
+        400: "#7e57c2",
+        500: "#673ab7",
+        600: "#5e35b1",
+        700: "#512da8",
+        800: "#4527a0",
+        900: "#311b92",
     },
     indigo: {
-        50: 0xe8eaf6,
-        100: 0xc5cae9,
-        200: 0x9fa8da,
-        300: 0x7986cb,
-        400: 0x5c6bc0,
-        500: 0x3f51b5,
-        600: 0x3949ab,
-        700: 0x303f9f,
-        800: 0x283593,
-        900: 0x1a237e,
+        50: "#e8eaf6",
+        100: "#c5cae9",
+        200: "#9fa8da",
+        300: "#7986cb",
+        400: "#5c6bc0",
+        500: "#3f51b5",
+        600: "#3949ab",
+        700: "#303f9f",
+        800: "#283593",
+        900: "#1a237e",
     },
     blue: {
-        50: 0xe3f2fd,
-        100: 0xbbdefb,
-        200: 0x90caf9,
-        300: 0x64b5f6,
-        400: 0x42a5f5,
-        500: 0x2196f3,
-        600: 0x1e88e5,
-        700: 0x1976d2,
-        800: 0x1565c0,
-        900: 0x0d47a1,
+        50: "#e3f2fd",
+        100: "#bbdefb",
+        200: "#90caf9",
+        300: "#64b5f6",
+        400: "#42a5f5",
+        500: "#2196f3",
+        600: "#1e88e5",
+        700: "#1976d2",
+        800: "#1565c0",
+        900: "#0d47a1",
     },
     "light-blue": {
-        50: 0xe1f5fe,
-        100: 0xb3e5fc,
-        200: 0x81d4fa,
-        300: 0x4fc3f7,
-        400: 0x29b6f6,
-        500: 0x03a9f4,
-        600: 0x039be5,
-        700: 0x0288d1,
-        800: 0x0277bd,
-        900: 0x01579b,
+        50: "#e1f5fe",
+        100: "#b3e5fc",
+        200: "#81d4fa",
+        300: "#4fc3f7",
+        400: "#29b6f6",
+        500: "#03a9f4",
+        600: "#039be5",
+        700: "#0288d1",
+        800: "#0277bd",
+        900: "#01579b",
     },
     cyan: {
-        50: 0xe0f7fa,
-        100: 0xb2ebf2,
-        200: 0x80deea,
-        300: 0x4dd0e1,
-        400: 0x26c6da,
-        500: 0x00bcd4,
-        600: 0x00acc1,
-        700: 0x0097a7,
-        800: 0x00838f,
-        900: 0x006064,
+        50: "#e0f7fa",
+        100: "#b2ebf2",
+        200: "#80deea",
+        300: "#4dd0e1",
+        400: "#26c6da",
+        500: "#00bcd4",
+        600: "#00acc1",
+        700: "#0097a7",
+        800: "#00838f",
+        900: "#006064",
     },
     teal: {
-        50: 0xe0f2f1,
-        100: 0xb2dfdb,
-        200: 0x80cbc4,
-        300: 0x4db6ac,
-        400: 0x26a69a,
-        500: 0x009688,
-        600: 0x00897b,
-        700: 0x00796b,
-        800: 0x00695c,
-        900: 0x004d40,
+        50: "#e0f2f1",
+        100: "#b2dfdb",
+        200: "#80cbc4",
+        300: "#4db6ac",
+        400: "#26a69a",
+        500: "#009688",
+        600: "#00897b",
+        700: "#00796b",
+        800: "#00695c",
+        900: "#004d40",
     },
     green: {
-        50: 0xe8f5e9,
-        100: 0xc8e6c9,
-        200: 0xa5d6a7,
-        300: 0x81c784,
-        400: 0x66bb6a,
-        500: 0x4caf50,
-        600: 0x43a047,
-        700: 0x388e3c,
-        800: 0x2e7d32,
-        900: 0x1b5e20,
+        50: "#e8f5e9",
+        100: "#c8e6c9",
+        200: "#a5d6a7",
+        300: "#81c784",
+        400: "#66bb6a",
+        500: "#4caf50",
+        600: "#43a047",
+        700: "#388e3c",
+        800: "#2e7d32",
+        900: "#1b5e20",
     },
     "light-green": {
-        50: 0xf1f8e9,
-        100: 0xdcedc8,
-        200: 0xc5e1a5,
-        300: 0xaed581,
-        400: 0x9ccc65,
-        500: 0x8bc34a,
-        600: 0x7cb342,
-        700: 0x689f38,
-        800: 0x558b2f,
-        900: 0x33691e,
+        50: "#f1f8e9",
+        100: "#dcedc8",
+        200: "#c5e1a5",
+        300: "#aed581",
+        400: "#9ccc65",
+        500: "#8bc34a",
+        600: "#7cb342",
+        700: "#689f38",
+        800: "#558b2f",
+        900: "#33691e",
     },
     lime: {
-        50: 0xf9fbe7,
-        100: 0xf0f4c3,
-        200: 0xe6ee9c,
-        300: 0xdce775,
-        400: 0xd4e157,
-        500: 0xcddc39,
-        600: 0xc0ca33,
-        700: 0xafb42b,
-        800: 0x9e9d24,
-        900: 0x827717,
+        50: "#f9fbe7",
+        100: "#f0f4c3",
+        200: "#e6ee9c",
+        300: "#dce775",
+        400: "#d4e157",
+        500: "#cddc39",
+        600: "#c0ca33",
+        700: "#afb42b",
+        800: "#9e9d24",
+        900: "#827717",
     },
     yellow: {
-        50: 0xfffde7,
-        100: 0xfff9c4,
-        200: 0xfff59d,
-        300: 0xfff176,
-        400: 0xffee58,
-        500: 0xffeb3b,
-        600: 0xfdd835,
-        700: 0xfbc02d,
-        800: 0xf9a825,
-        900: 0xf57f17,
+        50: "#fffde7",
+        100: "#fff9c4",
+        200: "#fff59d",
+        300: "#fff176",
+        400: "#ffee58",
+        500: "#ffeb3b",
+        600: "#fdd835",
+        700: "#fbc02d",
+        800: "#f9a825",
+        900: "#f57f17",
     },
     amber: {
-        50: 0xfff8e1,
-        100: 0xffecb3,
-        200: 0xffe082,
-        300: 0xffd54f,
-        400: 0xffca28,
-        500: 0xffc107,
-        600: 0xffb300,
-        700: 0xffa000,
-        800: 0xff8f00,
-        900: 0xff6f00,
+        50: "#fff8e1",
+        100: "#ffecb3",
+        200: "#ffe082",
+        300: "#ffd54f",
+        400: "#ffca28",
+        500: "#ffc107",
+        600: "#ffb300",
+        700: "#ffa000",
+        800: "#ff8f00",
+        900: "#ff6f00",
     },
     orange: {
-        50: 0xfff3e0,
-        100: 0xffe0b2,
-        200: 0xffcc80,
-        300: 0xffb74d,
-        400: 0xffa726,
-        500: 0xff9800,
-        600: 0xfb8c00,
-        700: 0xf57c00,
-        800: 0xef6c00,
-        900: 0xe65100,
+        50: "#fff3e0",
+        100: "#ffe0b2",
+        200: "#ffcc80",
+        300: "#ffb74d",
+        400: "#ffa726",
+        500: "#ff9800",
+        600: "#fb8c00",
+        700: "#f57c00",
+        800: "#ef6c00",
+        900: "#e65100",
     },
     "deep-orange": {
-        50: 0xfbe9e7,
-        100: 0xffccbc,
-        200: 0xffab91,
-        300: 0xff8a65,
-        400: 0xff7043,
-        500: 0xff5722,
-        600: 0xf4511e,
-        700: 0xe64a19,
-        800: 0xd84315,
-        900: 0xbf360c,
+        50: "#fbe9e7",
+        100: "#ffccbc",
+        200: "#ffab91",
+        300: "#ff8a65",
+        400: "#ff7043",
+        500: "#ff5722",
+        600: "#f4511e",
+        700: "#e64a19",
+        800: "#d84315",
+        900: "#bf360c",
     },
     brown: {
-        50: 0xefebe9,
-        100: 0xd7ccc8,
-        200: 0xbcaaa4,
-        300: 0xa1887f,
-        400: 0x8d6e63,
-        500: 0x795548,
-        600: 0x6d4c41,
-        700: 0x5d4037,
-        800: 0x4e342e,
-        900: 0x3e2723,
+        50: "#efebe9",
+        100: "#d7ccc8",
+        200: "#bcaaa4",
+        300: "#a1887f",
+        400: "#8d6e63",
+        500: "#795548",
+        600: "#6d4c41",
+        700: "#5d4037",
+        800: "#4e342e",
+        900: "#3e2723",
     },
     gray: {
-        50: 0xfafafa,
-        100: 0xf5f5f5,
-        200: 0xeeeeee,
-        300: 0xe0e0e0,
-        400: 0xbdbdbd,
-        500: 0x9e9e9e,
-        600: 0x757575,
-        700: 0x616161,
-        800: 0x424242,
-        900: 0x212121,
+        50: "#fafafa",
+        100: "#f5f5f5",
+        200: "#eeeeee",
+        300: "#e0e0e0",
+        400: "#bdbdbd",
+        500: "#9e9e9e",
+        600: "#757575",
+        700: "#616161",
+        800: "#424242",
+        900: "#212121",
     },
     "blue-gray": {
-        50: 0xeceff1,
-        100: 0xcfd8dc,
-        200: 0xb0bec5,
-        300: 0x90a4ae,
-        400: 0x78909c,
-        500: 0x607d8b,
-        600: 0x546e7a,
-        700: 0x455a64,
-        800: 0x37474f,
-        900: 0x263238,
+        50: "#eceff1",
+        100: "#cfd8dc",
+        200: "#b0bec5",
+        300: "#90a4ae",
+        400: "#78909c",
+        500: "#607d8b",
+        600: "#546e7a",
+        700: "#455a64",
+        800: "#37474f",
+        900: "#263238",
     },
 };
-function hexColor(color) {
-    return `#${color.toString(16).padStart(6, "0")}`;
-}
 function wrapPseudoStates(klass) {
     return PSEUDO_STATES.map((state) => `.${state}\\:${klass}:${state}`);
 }
 function wrapMediaQueries(klass, rule) {
-    return Object.entries(MEDIA_BREAKPOINTS).map(([bp, width]) => `@media (min-width: ${width}px) { .${bp}\\:${klass} { ${rule} } }`);
+    return MEDIA_ENTRIES.map(([bp, width]) => `@media (min-width: ${width}px) { .${bp}\\:${klass} { ${rule} } }`);
+}
+function wrapAll(pairs) {
+    return pairs.flatMap(([klass, rule]) => [
+        `.${klass} { ${rule} }`,
+        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
+        ...wrapMediaQueries(klass, rule),
+    ]);
 }
 function ruleSorter(a, b) {
-    // If one rule is a media query, it goes after the base rules.
-    if (a.includes("@media") && !b.includes("@media")) {
+    // Media queries start with '@', regular rules start with '.'
+    const aMedia = a[0] === "@";
+    const bMedia = b[0] === "@";
+    if (aMedia && !bMedia)
         return 1;
-    }
-    else if (!a.includes("@media") && b.includes("@media")) {
+    if (!aMedia && bMedia)
         return -1;
-    }
-    // Otherwise, fall back to a lexicographical sort.
     return a.localeCompare(b);
 }
 function posneg(props) {
-    return Object.entries(props)
-        .flatMap(([prop, klass]) => [
-        // Zero.
+    return wrapAll(Object.entries(props).flatMap(([prop, klass]) => [
         [`${klass}-0`, `${prop}: 0`],
-        // Screen.
-        [`${klass}-screen`, `${prop}: 100v${prop.includes('height') ? 'h' : 'w'}`],
-        // Full.
+        [`${klass}-screen`, `${prop}: 100v${prop.includes("height") ? "h" : "w"}`],
         [`${klass}-full`, `${prop}: 100%`],
-        // Positive REM units.
         ...UNITS_ALL.map((v) => [`${klass}-${v}`, `${prop}: ${v * REM_UNIT}rem`]),
-        // Negative REM units.
         ...UNITS_ALL.map((v) => [`-${klass}-${v}`, `${prop}: -${v * REM_UNIT}rem`]),
-        // Positive PX units.
         ...UNITS_ALL.map((v) => [`${klass}-${v}px`, `${prop}: ${v}px`]),
-        // Negative PX units.
         ...UNITS_ALL.map((v) => [`-${klass}-${v}px`, `${prop}: -${v}px`]),
-        // Positive percent units.
         ...PERCENTS.map((v) => [`${klass}-${v}\\%`, `${prop}: ${v}%`]),
-        // Negative percent units.
         ...PERCENTS.map((v) => [`-${klass}-${v}\\%`, `${prop}: -${v}%`]),
-    ])
-        .flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
-    ]);
+    ]));
 }
 function autoxy(props) {
-    return Object.entries(props)
-        .flatMap(([prop, klass]) => [
-        // Auto.
+    return wrapAll(Object.entries(props).flatMap(([prop, klass]) => [
         [`${klass}-auto`, `${prop}: auto`],
-        // Auto x-axis.
         [`${klass}x-auto`, `${prop}-left: auto; ${prop}-right: auto;`],
-        // Auto y-axis.
         [`${klass}y-auto`, `${prop}-top: auto; ${prop}-bottom: auto;`],
-        // Zero x-axis.
         [`${klass}x-0`, `${prop}-left: 0; ${prop}-right: 0;`],
-        // Zero y-axis.
         [`${klass}y-0`, `${prop}-top: 0; ${prop}-bottom: 0;`],
-        // Positive REM units x-axis.
-        ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => [
-            `${klass}x-${k}`,
-            `${prop}-left: ${v}rem; ${prop}-right: ${v}rem;`,
+        ...UNITS_ALL.map((v) => [
+            `${klass}x-${v}`,
+            `${prop}-left: ${v * REM_UNIT}rem; ${prop}-right: ${v * REM_UNIT}rem;`,
         ]),
-        // Positive REM units y-axis.
-        ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => [
-            `${klass}y-${k}`,
-            `${prop}-top: ${v}rem; ${prop}-bottom: ${v}rem;`,
+        ...UNITS_ALL.map((v) => [
+            `${klass}y-${v}`,
+            `${prop}-top: ${v * REM_UNIT}rem; ${prop}-bottom: ${v * REM_UNIT}rem;`,
         ]),
-        // Positive PX units x-axis.
         ...UNITS_ALL.map((v) => [`${klass}x-${v}px`, `${prop}-left: ${v}px; ${prop}-right: ${v}px;`]),
-        // Positive PX units y-axis.
         ...UNITS_ALL.map((v) => [`${klass}y-${v}px`, `${prop}-top: ${v}px; ${prop}-bottom: ${v}px;`]),
-        // Positive percent units x-axis.
         ...PERCENTS.map((v) => [`${klass}x-${v}\\%`, `${prop}-left: ${v}%; ${prop}-right: ${v}%;`]),
-        // Positive percent units y-axis.
         ...PERCENTS.map((v) => [`${klass}y-${v}\\%`, `${prop}-top: ${v}%; ${prop}-bottom: ${v}%;`]),
-    ])
-        .flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
-    ]);
+    ]));
 }
 function tblr(props) {
-    return Object.entries(props)
-        .flatMap(([prop, klass]) => [
-        // Zero top.
+    return wrapAll(Object.entries(props).flatMap(([prop, klass]) => [
         [`${klass}t-0`, `${prop}-top: 0`],
-        // Zero bottom.
         [`${klass}b-0`, `${prop}-bottom: 0`],
-        // Zero left.
         [`${klass}l-0`, `${prop}-left: 0`],
-        // Zero right.
         [`${klass}r-0`, `${prop}-right: 0`],
-        // Auto top.
         [`${klass}t-auto`, `${prop}-top: auto`],
-        // Auto bottom.
         [`${klass}b-auto`, `${prop}-bottom: auto`],
-        // Auto left.
         [`${klass}l-auto`, `${prop}-left: auto`],
-        // Auto right.
         [`${klass}r-auto`, `${prop}-right: auto`],
-        // Positive / Negative.
         ...["", "-"].flatMap((sign) => [
-            // REM units top.
-            ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => [
-                `${sign}${klass}t-${k}`,
-                `${prop}-top: ${sign}${v}rem`,
+            ...UNITS_ALL.map((v) => [
+                `${sign}${klass}t-${v}`,
+                `${prop}-top: ${sign}${v * REM_UNIT}rem`,
             ]),
-            // REM units bottom.
-            ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => [
-                `${sign}${klass}b-${k}`,
-                `${prop}-bottom: ${sign}${v}rem`,
+            ...UNITS_ALL.map((v) => [
+                `${sign}${klass}b-${v}`,
+                `${prop}-bottom: ${sign}${v * REM_UNIT}rem`,
             ]),
-            // REM units left.
-            ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => [
-                `${sign}${klass}l-${k}`,
-                `${prop}-left: ${sign}${v}rem`,
+            ...UNITS_ALL.map((v) => [
+                `${sign}${klass}l-${v}`,
+                `${prop}-left: ${sign}${v * REM_UNIT}rem`,
             ]),
-            // REM units right.
-            ...UNITS_ALL.map((v) => [v, v * REM_UNIT]).map(([k, v]) => [
-                `${sign}${klass}r-${k}`,
-                `${prop}-right: ${sign}${v}rem`,
+            ...UNITS_ALL.map((v) => [
+                `${sign}${klass}r-${v}`,
+                `${prop}-right: ${sign}${v * REM_UNIT}rem`,
             ]),
-            // PX units top.
             ...UNITS_ALL.map((v) => [`${sign}${klass}t-${v}px`, `${prop}-top: ${sign}${v}px`]),
-            // PX units bottom.
             ...UNITS_ALL.map((v) => [`${sign}${klass}b-${v}px`, `${prop}-bottom: ${sign}${v}px`]),
-            // PX units left.
             ...UNITS_ALL.map((v) => [`${sign}${klass}l-${v}px`, `${prop}-left: ${sign}${v}px`]),
-            // PX units right.
             ...UNITS_ALL.map((v) => [`${sign}${klass}r-${v}px`, `${prop}-right: ${sign}${v}px`]),
-            // Percent units top.
             ...PERCENTS.map((v) => [`${sign}${klass}t-${v}\\%`, `${prop}-top: ${sign}${v}%`]),
-            // Percent units bottom.
-            ...PERCENTS.map((v) => [`${sign}${klass}b-${v}\\%`, `${prop}-bottom: ${sign}${v}%;`]),
-            // Percent units left.
+            ...PERCENTS.map((v) => [`${sign}${klass}b-${v}\\%`, `${prop}-bottom: ${sign}${v}%`]),
             ...PERCENTS.map((v) => [`${sign}${klass}l-${v}\\%`, `${prop}-left: ${sign}${v}%`]),
-            // Percent units right.
             ...PERCENTS.map((v) => [`${sign}${klass}r-${v}\\%`, `${prop}-right: ${sign}${v}%`]),
         ]),
-    ])
-        .flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
-    ]);
+    ]));
 }
 function border() {
-    return [
-        // Single pixel border.
+    return wrapAll([
         [`border`, `border: 1px`],
-        // Single pixel border x and y.
         [`border-x`, `border-inline-width: 1px`],
         [`border-y`, `border-block-width: 1px`],
-        // Pixel units for border width.
         ...[0, ...UNITS_SM].map((v) => [`border-${v}`, `border-width: ${v}px`]),
-        // Pixel units for border x and y.
         ...[0, ...UNITS_SM].map((v) => [`border-x-${v}`, `border-inline-width: ${v}px;`]),
         ...[0, ...UNITS_SM].map((v) => [`border-y-${v}`, `border-block-width: ${v}px;`]),
-        // TBLR border.
         ...["top", "bottom", "left", "right"].flatMap((dir) => [
-            // Single pixel border.
             [`border-${dir.slice(0, 1)}`, `border-${dir}: 1px`],
-            // Pixel units for border width.
             ...[0, ...UNITS_SM].map((v) => [
                 `border-${dir.slice(0, 1)}-${v}`,
                 `border-${dir}-width: ${v}px`,
             ]),
         ]),
-    ].flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
     ]);
 }
 function zIndex() {
-    return [
-        // Percent units reused as values for z-index.
-        ...PERCENTS.map((v) => [`z-${v}`, `z-index: ${v}`]),
-    ].flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
-    ]);
+    return wrapAll(PERCENTS.map((v) => [`z-${v}`, `z-index: ${v}`]));
 }
 function transitions() {
-    return [
-        // Positive milliseconds for transition.
-        ...DURATIONS.map((v) => [`duration-${v}`, `transition-duration: ${v}ms`]),
-    ].flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
-    ]);
+    return wrapAll(DURATIONS.map((v) => [`duration-${v}`, `transition-duration: ${v}ms`]));
 }
 function between() {
-    return [
-        // Zero for x margin.
+    return wrapAll([
         [`space-x-0 > *`, `margin-left: 0`],
-        // Zero for y margin.
         [`space-y-0 > *`, `margin-top: 0`],
-        // Positive REM units for x margin.
         ...UNITS_ALL.map((v) => [
             `space-x-${v} > :not(:first-child)`,
             `margin-left: ${v * REM_UNIT}rem`,
         ]),
-        // Positive REM units for y margin.
         ...UNITS_ALL.map((v) => [
             `space-y-${v} > :not(:first-child)`,
             `margin-top: ${v * REM_UNIT}rem`,
         ]),
-        // Positive PX units for x margin.
         ...UNITS_ALL.map((v) => [`space-x-${v}px > :not(:first-child)`, `margin-left: ${v}px`]),
-        // Positive PX units for y margin.
         ...UNITS_ALL.map((v) => [`space-y-${v}px > :not(:first-child)`, `margin-top: ${v}px`]),
-        // Zero for gap.
         [`gap-0`, `gap: 0`],
-        // Positive REM units for gap.
         ...UNITS_ALL.map((v) => [`gap-${v}`, `gap: ${v * REM_UNIT}rem`]),
-        // Positive PX units for gap.
         ...UNITS_ALL.map((v) => [`gap-${v}px`, `gap: ${v}px`]),
-        // Positive REM units for col gap.
         ...UNITS_ALL.map((v) => [`gap-x-${v}`, `column-gap: ${v * REM_UNIT}rem`]),
-        // Positive REM units for row gap.
         ...UNITS_ALL.map((v) => [`gap-y-${v}`, `row-gap: ${v * REM_UNIT}rem`]),
-        // Positive PX units for col gap.
         ...UNITS_ALL.map((v) => [`gap-x-${v}px`, `column-gap: ${v}px`]),
-        // Positive PX units for row gap.
         ...UNITS_ALL.map((v) => [`gap-y-${v}px`, `row-gap: ${v}px`]),
-    ].flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
     ]);
 }
 function textSizes() {
-    return [
-        // 100 font sizes in single pixel increments.
-        ...Array.from({ length: 100 }, (_, i) => i).map((v) => [`text-${v}px`, `font-size: ${v}px`]),
-        // 100 font sizes in REM_UNIT (0.25) increments.
-        ...Array.from({ length: 100 }, (_, i) => i * REM_UNIT).map((v) => [
-            `text-${v}rem`,
-            `font-size: ${v}rem`,
+    return wrapAll([
+        ...Array.from({ length: 100 }, (_, i) => [`text-${i}px`, `font-size: ${i}px`]),
+        ...Array.from({ length: 100 }, (_, i) => [
+            `text-${i * REM_UNIT}rem`,
+            `font-size: ${i * REM_UNIT}rem`,
         ]),
-    ].flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
     ]);
 }
 function custom() {
-    return Object.entries(PROPS_CUSTOM).flatMap(([klass, props]) => Object.entries(props).flatMap(([propkey, propval]) => [
-        `.${klass} { ${propkey}: ${propval} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${propkey}: ${propval} }`,
-        ...wrapMediaQueries(klass, `${propkey}: ${propval}`),
-    ]));
+    return Object.entries(PROPS_CUSTOM).flatMap(([klass, props]) => {
+        const rules = Object.entries(props)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join("; ");
+        return [
+            `.${klass} { ${rules} }`,
+            `${wrapPseudoStates(klass).join(",")} { ${rules} }`,
+            ...wrapMediaQueries(klass, rules),
+        ];
+    });
 }
 function colors() {
-    const bw = [
-        ["white", "#fff"],
-        ["black", "#000"],
-        ["transparent", "transparent"],
-    ].flatMap(([color, value]) => [
+    const colorVariants = (color, value) => [
         [`text-${color}`, `color: ${value}`],
         [`fill-${color}`, `fill: ${value}`],
         [`bg-${color}`, `background-color: ${value}`],
         [`border-${color}`, `border-color: ${value}`],
-    ]);
-    const mains = Object.entries(PROPS_COLORS).flatMap(([color, shades]) => [
-        [`text-${color}`, `color: ${hexColor(shades[500])}`],
-        [`fill-${color}`, `fill: ${hexColor(shades[500])}`],
-        [`bg-${color}`, `background-color: ${hexColor(shades[500])}`],
-        [`border-${color}`, `border-color: ${hexColor(shades[500])}`],
-    ]);
-    const shades = Object.entries(PROPS_COLORS).flatMap(([color, shades]) => Object.entries(shades).flatMap(([shade, hex]) => [
-        [`text-${color}-${shade}`, `color: ${hexColor(hex)}`],
-        [`fill-${color}-${shade}`, `fill: ${hexColor(hex)}`],
-        [`bg-${color}-${shade}`, `background-color: ${hexColor(hex)}`],
-        [`border-${color}-${shade}`, `border-color: ${hexColor(hex)}`],
-    ]));
-    return []
-        .concat(bw)
-        .concat(mains)
-        .concat(shades)
-        .flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
+    ];
+    return wrapAll([
+        ...colorVariants("white", "#fff"),
+        ...colorVariants("black", "#000"),
+        ...colorVariants("transparent", "transparent"),
+        ...Object.entries(PROPS_COLORS).flatMap(([color, shades]) => [
+            ...colorVariants(color, shades[500]),
+            ...Object.entries(shades).flatMap(([shade, hex]) => colorVariants(`${color}-${shade}`, hex)),
+        ]),
     ]);
 }
 function opacity() {
-    return [
-        // Zero for opacity.
+    return wrapAll([
         [`opacity-0`, `opacity: 0`],
-        // Positive percent units for opacity.
         ...PERCENTS.map((v) => [`opacity-${v}`, `opacity: ${v / 100}`]),
-    ].flatMap(([klass, rule]) => [
-        `.${klass} { ${rule} }`,
-        `${wrapPseudoStates(klass).join(",")} { ${rule} }`,
-        ...wrapMediaQueries(klass, rule),
     ]);
 }
+let cachedRules = null;
 export default function rules() {
-    return ([
+    if (cachedRules !== null)
+        return cachedRules;
+    cachedRules = [
         // As-is.
         ...PROPS_AS_IS,
         // Custom.
@@ -856,6 +806,7 @@ export default function rules() {
     ]
         // Sort lexicographical to ensure media queries appear after their base rules.
         .sort(ruleSorter)
-        .join("\n"));
+        .join("\n");
+    return cachedRules;
 }
 //# sourceMappingURL=css_gen_utils.js.map