Align with Tailwind 3.4

README.md

@@ -151,7 +151,7 @@ export const config: DownwindConfig = {
 
 ### Dynamic variants
 
-`supports-*`, `min-*`, `max-*`, `(group/peer-)data-*`, `(group/peer-)aria-*` are supported.
+`supports-*`, `min-*`, `max-*`, `has-*`, `(group/peer-)data-*`, `(group/peer-)aria-*` are supported.
 
 `max-<screen>` is supported when the screens config is a basic `min-width` only. No sorting is done.
 

src/base/base.css

@@ -24,14 +24,18 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5-6 not supported
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
   font-family: __FONT_SANS__; /* 4 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*

src/coreRules.ts

@@ -111,9 +111,39 @@ export const getCoreRules = ({
   gridRow: themeRule("row", theme.gridRow, "grid-row"),
   gridRowStart: themeRule("row-start", theme.gridRowStart, "grid-row-start"),
   gridRowEnd: themeRule("row-end", theme.gridRowEnd, "grid-row-end"),
-  float: enumRule("float-", "float", ["right", "left", "none"]),
-  clear: enumRule("clear-", "clear", ["left", "right", "both", "none"]),
+  float: [
+    ["float-start", [["float", "inline-start"]]],
+    ["float-end", [["float", "inline-end"]]],
+    ["float-right", [["float", "right"]]],
+    ["float-left", [["float", "left"]]],
+    ["float-none", [["float", "none"]]],
+  ],
+  clear: [
+    ["clear-start", [["clear", "inline-start"]]],
+    ["clear-end", [["clear", "inline-end"]]],
+    ["clear-left", [["clear", "left"]]],
+    ["clear-right", [["clear", "right"]]],
+    ["clear-both", [["clear", "both"]]],
+    ["clear-none", [["clear", "none"]]],
+  ],
   boxSizing: enumRule("box-", "box-sizing", ["border-box", "content-box"]),
+  lineClamp: [
+    themeRule("line-clamp", theme.lineClamp, [
+      ["overflow", "hidden"],
+      ["display", "-webkit-box"],
+      ["-webkit-box-orient", "vertical"],
+      "-webkit-line-clamp",
+    ]),
+    [
+      "line-clamp-none",
+      [
+        ["overflow", "visible"],
+        ["display", "block"],
+        ["-webkit-box-orient", "horizontal"],
+        ["-webkit-line-clamp", "none"],
+      ],
+    ],
+  ],
   display: enumRule(
     "",
     "display",
@@ -143,6 +173,7 @@ export const getCoreRules = ({
     (v) => (v === "hidden" ? "none" : v),
   ),
   aspectRatio: themeRule("aspect", theme.aspectRatio, "aspect-ratio"),
+  size: themeRule("size", theme.size, ["width", "height"]),
   height: themeRule("h", theme.height, "height"),
   maxHeight: themeRule("min-h", theme.minHeight, "min-height"),
   minHeight: themeRule("max-h", theme.maxHeight, "max-height"),
@@ -328,7 +359,10 @@ export const getCoreRules = ({
     theme.listStyleImage,
     "list-style-image",
   ),
-  appearance: ["appearance-none", [["appearance", "none"]]],
+  appearance: [
+    ["appearance-none", [["appearance", "none"]]],
+    ["appearance-auto", [["appearance", "auto"]]],
+  ],
   columns: themeRule("columns", theme.columns, "columns"),
   breakBefore: enumRule("break-before-", "break-before", breaks),
   breakInside: enumRule("break-inside-", "break-inside", [
@@ -603,6 +637,11 @@ export const getCoreRules = ({
     "pre-wrap",
     "break-spaces",
   ]),
+  textWrap: [
+    ["text-wrap", [["text-wrap", "wrap"]]],
+    ["text-nowrap", [["text-wrap", "nowrap"]]],
+    ["text-balance", [["text-wrap", "balance"]]],
+  ],
   wordBreak: [
     [
       "break-normal",
@@ -1168,23 +1207,9 @@ export const getCoreRules = ({
   ),
   willChange: themeRule("will-change", theme.willChange, "will-change"),
   content: themeRule("content", theme.content, "content"),
-  // https://github.com/tailwindlabs/tailwindcss-line-clamp/blob/master/src/index.js
-  lineClamp: [
-    themeRule("line-clamp", theme.lineClamp, [
-      ["overflow", "hidden"],
-      ["display", "-webkit-box"],
-      ["-webkit-box-orient", "vertical"],
-      "-webkit-line-clamp",
-    ]),
-    [
-      "line-clamp-none",
-      [
-        ["overflow", "visible"],
-        ["display", "block"],
-        ["-webkit-box-orient", "horizontal"],
-        ["-webkit-line-clamp", "none"],
-      ],
-    ],
+  forcedColorAdjust: [
+    ["forced-color-adjust-auto", [["forced-color-adjust", "auto"]]],
+    ["forced-color-adjust-none", [["forced-color-adjust", "none"]]],
   ],
 });
 

src/theme/getBaseFonts.ts

@@ -2,13 +2,6 @@ export const getBaseFonts = () => ({
   sans: [
     "ui-sans-serif",
     "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    '"Segoe UI"',
-    "Roboto",
-    '"Helvetica Neue"',
-    "Arial",
-    '"Noto Sans"',
     "sans-serif",
     '"Apple Color Emoji"',
     '"Segoe UI Emoji"',

src/theme/getBaseTheme.ts

@@ -440,6 +440,12 @@ export const getBaseTheme = (): DownwindTheme => ({
     "span-4": "span 4 / span 4",
     "span-5": "span 5 / span 5",
     "span-6": "span 6 / span 6",
+    "span-7": "span 7 / span 7",
+    "span-8": "span 8 / span 8",
+    "span-9": "span 9 / span 9",
+    "span-10": "span 10 / span 10",
+    "span-11": "span 11 / span 11",
+    "span-12": "span 12 / span 12",
     "span-full": "1 / -1",
   },
   gridRowStart: {
@@ -451,6 +457,12 @@ export const getBaseTheme = (): DownwindTheme => ({
     5: "5",
     6: "6",
     7: "7",
+    8: "8",
+    9: "9",
+    10: "10",
+    11: "11",
+    12: "12",
+    13: "13",
   },
   gridRowEnd: {
     auto: "auto",
@@ -461,9 +473,16 @@ export const getBaseTheme = (): DownwindTheme => ({
     5: "5",
     6: "6",
     7: "7",
+    8: "8",
+    9: "9",
+    10: "10",
+    11: "11",
+    12: "12",
+    13: "13",
   },
   gridTemplateColumns: {
     none: "none",
+    subgrid: "subgrid",
     1: "repeat(1, minmax(0, 1fr))",
     2: "repeat(2, minmax(0, 1fr))",
     3: "repeat(3, minmax(0, 1fr))",
@@ -479,12 +498,19 @@ export const getBaseTheme = (): DownwindTheme => ({
   },
   gridTemplateRows: {
     none: "none",
+    subgrid: "subgrid",
     1: "repeat(1, minmax(0, 1fr))",
     2: "repeat(2, minmax(0, 1fr))",
     3: "repeat(3, minmax(0, 1fr))",
     4: "repeat(4, minmax(0, 1fr))",
     5: "repeat(5, minmax(0, 1fr))",
     6: "repeat(6, minmax(0, 1fr))",
+    7: "repeat(7, minmax(0, 1fr))",
+    8: "repeat(8, minmax(0, 1fr))",
+    9: "repeat(9, minmax(0, 1fr))",
+    10: "repeat(10, minmax(0, 1fr))",
+    11: "repeat(11, minmax(0, 1fr))",
+    12: "repeat(12, minmax(0, 1fr))",
   },
   height: (theme) => ({
     "auto": "auto",
@@ -506,6 +532,9 @@ export const getBaseTheme = (): DownwindTheme => ({
     "5/6": "83.333333%",
     "full": "100%",
     "screen": "100vh",
+    "svh": "100svh",
+    "lvh": "100lvh",
+    "dvh": "100dvh",
     "min": "min-content",
     "max": "max-content",
     "fit": "fit-content",
@@ -574,15 +603,19 @@ export const getBaseTheme = (): DownwindTheme => ({
   }),
   maxHeight: (theme) => ({
     ...theme("spacing"),
+    none: "none",
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content",
   }),
   maxWidth: (theme) => ({
+    ...theme("spacing"),
     "none": "none",
-    0: "0rem",
     "xs": "20rem",
     "sm": "24rem",
     "md": "28rem",
@@ -604,21 +637,24 @@ export const getBaseTheme = (): DownwindTheme => ({
       value.min ?? value.max,
     ]),
   }),
-  minHeight: {
-    0: "0px",
+  minHeight: (theme) => ({
+    ...theme("spacing"),
     full: "100%",
     screen: "100vh",
+    svh: "100svh",
+    lvh: "100lvh",
+    dvh: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content",
-  },
-  minWidth: {
-    0: "0px",
+  }),
+  minWidth: (theme) => ({
+    ...theme("spacing"),
     full: "100%",
     min: "min-content",
     max: "max-content",
     fit: "fit-content",
-  },
+  }),
   objectPosition: {
     "bottom": "bottom",
     "center": "center",
@@ -634,15 +670,21 @@ export const getBaseTheme = (): DownwindTheme => ({
     0: "0",
     5: "0.05",
     10: "0.1",
+    15: "0.15",
     20: "0.2",
     25: "0.25",
     30: "0.3",
+    35: "0.35",
     40: "0.4",
+    45: "0.45",
     50: "0.5",
+    55: "0.55",
     60: "0.6",
+    65: "0.65",
     70: "0.7",
     75: "0.75",
     80: "0.8",
+    85: "0.85",
     90: "0.9",
     95: "0.95",
     100: "1",
@@ -846,6 +888,40 @@ export const getBaseTheme = (): DownwindTheme => ({
     "3/4": "75%",
     "full": "100%",
   }),
+  size: (theme) => ({
+    "auto": "auto",
+    ...theme("spacing"),
+    "1/2": "50%",
+    "1/3": "33.333333%",
+    "2/3": "66.666667%",
+    "1/4": "25%",
+    "2/4": "50%",
+    "3/4": "75%",
+    "1/5": "20%",
+    "2/5": "40%",
+    "3/5": "60%",
+    "4/5": "80%",
+    "1/6": "16.666667%",
+    "2/6": "33.333333%",
+    "3/6": "50%",
+    "4/6": "66.666667%",
+    "5/6": "83.333333%",
+    "1/12": "8.333333%",
+    "2/12": "16.666667%",
+    "3/12": "25%",
+    "4/12": "33.333333%",
+    "5/12": "41.666667%",
+    "6/12": "50%",
+    "7/12": "58.333333%",
+    "8/12": "66.666667%",
+    "9/12": "75%",
+    "10/12": "83.333333%",
+    "11/12": "91.666667%",
+    "full": "100%",
+    "min": "min-content",
+    "max": "max-content",
+    "fit": "fit-content",
+  }),
   verticalAlign: {
     "baseline": "baseline",
     "top": "top",

src/types.d.ts

@@ -269,6 +269,7 @@ type ThemeKey =
   | "transitionProperty"
   | "transitionTimingFunction"
   | "translate"
+  | "size"
   | "verticalAlign"
   | "width"
   | "willChange"
@@ -303,8 +304,10 @@ type CoreRule =
   | "float"
   | "clear"
   | "boxSizing"
+  | "lineClamp"
   | "display"
   | "aspectRatio"
+  | "size"
   | "height"
   | "maxHeight"
   | "minHeight"
@@ -371,6 +374,7 @@ type CoreRule =
   | "textOverflow"
   | "hyphens"
   | "whitespace"
+  | "textWrap"
   | "wordBreak"
   | "borderRadius"
   | "borderWidth"
@@ -457,4 +461,4 @@ type CoreRule =
   | "transitionTimingFunction"
   | "willChange"
   | "content"
-  | "lineClamp";
+  | "forcedColorAdjust";

src/utils/regex.ts

@@ -8,16 +8,17 @@ export const escapeSelector = (selector: string) => {
 };
 
 const regularVariant = /[a-z0-9][a-z0-9-]+/;
-// ="'_ for attributes: aria-[labelledby='a_b']
-// : for supports query
-const dynamicVariant = /[a-z-]+-\[[a-z0-9="'_:-]+]/;
+const childVariant = /\*/;
+// []="'_ for attributes: aria-[labelledby='a_b'] has-[[data-active]]
+// :>+*~. for css selectors: has-[>_h1_+_h2]
+const dynamicVariant = /[a-z-]+-\[[a-z0-9[\]="'_:>+*~.-]+]/;
 // & to position the selector
 // []="' for attributes: [&[type="email"]]
 // :>+*~.()_ for css selectors: [&:nth-child(3)] [&_p] [&>*] [.sidebar+&]
 // @ for media: [@media(min-width:900px)]
 const arbitraryVariant = /\[[a-z0-9&[\]="':>+*~.()_@-]+]/;
 const variant = new RegExp(
-  `(?:${regularVariant.source}|${dynamicVariant.source}|${arbitraryVariant.source}):`,
+  `(?:${regularVariant.source}|${childVariant.source}|${dynamicVariant.source}|${arbitraryVariant.source}):`,
 );
 const variants = new RegExp(`(?:${variant.source})*`);