@unocss/preset-mini 0.44.4 → 0.45.1

package/dist/chunks/default.mjs

@@ -1,268 +1,290 @@
-import { c as colors } from './colors.mjs';
-import { t as transformBase, b as boxShadowsBase, r as ringBase } from './transform.mjs';
+import { d as displays, b as borders, c as contents, f as fonts, t as tabSizes, a as textIndents, e as textOverflows, g as textDecorations, h as textStrokes, i as textShadows, j as textTransforms, k as textAligns, l as fontStyles, m as fontSmoothings, n as boxShadows, r as rings, p as positions, o as cursors, q as appearances, s as pointerEvents, u as resizes, v as verticalAligns, w as userSelects, x as whitespaces, y as breaks, z as overflows, A as outline, B as appearance, C as orders, D as justifies, E as alignments, F as placements, G as insets, H as floats, I as zIndexes, J as boxSizing, K as transitions, L as transforms, M as willChange } from './decoration.mjs';
+import { h as handler, c as colorResolver, n as numberWithUnitRE, r as resolveVerticalBreakpoints, l as resolveBreakpoints, o as directionSize } from './colors.mjs';
+import '@unocss/core';
 
-const fontFamily = {
-  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"',
-    '"Segoe UI Symbol"',
-    '"Noto Color Emoji"'
-  ].join(","),
-  serif: [
-    "ui-serif",
-    "Georgia",
-    "Cambria",
-    '"Times New Roman"',
-    "Times",
-    "serif"
-  ].join(","),
-  mono: [
-    "ui-monospace",
-    "SFMono-Regular",
-    "Menlo",
-    "Monaco",
-    "Consolas",
-    '"Liberation Mono"',
-    '"Courier New"',
-    "monospace"
-  ].join(",")
-};
-const fontSize = {
-  "xs": ["0.75rem", "1rem"],
-  "sm": ["0.875rem", "1.25rem"],
-  "base": ["1rem", "1.5rem"],
-  "lg": ["1.125rem", "1.75rem"],
-  "xl": ["1.25rem", "1.75rem"],
-  "2xl": ["1.5rem", "2rem"],
-  "3xl": ["1.875rem", "2.25rem"],
-  "4xl": ["2.25rem", "2.5rem"],
-  "5xl": ["3rem", "1"],
-  "6xl": ["3.75rem", "1"],
-  "7xl": ["4.5rem", "1"],
-  "8xl": ["6rem", "1"],
-  "9xl": ["8rem", "1"]
-};
-const textIndent = {
-  "DEFAULT": "1.5rem",
-  "xs": "0.5rem",
-  "sm": "1rem",
-  "md": "1.5rem",
-  "lg": "2rem",
-  "xl": "2.5rem",
-  "2xl": "3rem",
-  "3xl": "4rem"
-};
-const textStrokeWidth = {
-  DEFAULT: "1.5rem",
-  none: "0",
-  sm: "thin",
-  md: "medium",
-  lg: "thick"
-};
-const textShadow = {
-  DEFAULT: ["0 0 1px rgba(0,0,0,0.2)", "0 0 1px rgba(1,0,5,0.1)"],
-  none: "0 0 rgba(0,0,0,0)",
-  sm: "1px 1px 3px rgba(36,37,47,0.25)",
-  md: ["0 1px 2px rgba(30,29,39,0.19)", "1px 2px 4px rgba(54,64,147,0.18)"],
-  lg: ["3px 3px 6px rgba(0,0,0,0.26)", "0 0 5px rgba(15,3,86,0.22)"],
-  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"]
-};
-const lineHeight = {
-  none: "1",
-  tight: "1.25",
-  snug: "1.375",
-  normal: "1.5",
-  relaxed: "1.625",
-  loose: "2"
-};
-const letterSpacing = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: "0em",
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-};
-const wordSpacing = letterSpacing;
+const opacity = [
+  [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: handler.bracket.percent.cssvar(d) })]
+];
+const textColors = [
+  [/^(?:color|c)-(.+)$/, colorResolver("color", "text"), { autocomplete: "(text|color|c)-$colors" }],
+  [/^text-(.+)$/, colorResolver("color", "text", (css) => !css.color?.toString().match(numberWithUnitRE)), { autocomplete: "(text|color|c)-$colors" }],
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": handler.bracket.percent(opacity2) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }]
+];
+const bgColors = [
+  [/^bg-(.+)$/, colorResolver("background-color", "bg"), { autocomplete: "bg-$colors" }],
+  [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": handler.bracket.percent(opacity2) }), { autocomplete: "bg-(op|opacity)-<percent>" }]
+];
 
-const breakpoints = {
-  "sm": "640px",
-  "md": "768px",
-  "lg": "1024px",
-  "xl": "1280px",
-  "2xl": "1536px"
-};
-const verticalBreakpoints = { ...breakpoints };
-const lineWidth = {
-  DEFAULT: "1px",
-  none: "0px"
-};
-const spacing = {
-  "DEFAULT": "1rem",
-  "none": "0rem",
-  "xs": "0.75rem",
-  "sm": "0.875rem",
-  "lg": "1.125rem",
-  "xl": "1.25rem",
-  "2xl": "1.5rem",
-  "3xl": "1.875rem",
-  "4xl": "2.25rem",
-  "5xl": "3rem",
-  "6xl": "3.75rem",
-  "7xl": "4.5rem",
-  "8xl": "6rem",
-  "9xl": "8rem"
-};
-const duration = {
-  DEFAULT: "150ms",
-  none: "0ms",
-  75: "75ms",
-  100: "100ms",
-  150: "150ms",
-  200: "200ms",
-  300: "300ms",
-  500: "500ms",
-  700: "700ms",
-  1e3: "1000ms"
-};
-const borderRadius = {
-  "DEFAULT": "0.25rem",
-  "none": "0rem",
-  "sm": "0.125rem",
-  "md": "0.375rem",
-  "lg": "0.5rem",
-  "xl": "0.75rem",
-  "2xl": "1rem",
-  "3xl": "1.5rem",
-  "full": "9999px"
-};
-const boxShadow = {
-  "DEFAULT": ["var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)"],
-  "none": "0 0 rgba(0,0,0,0)",
-  "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)",
-  "md": ["var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)"],
-  "lg": ["var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)"],
-  "xl": ["var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)"],
-  "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)",
-  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
-};
-const easing = {
-  "DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
-  "linear": "linear",
-  "in": "cubic-bezier(0.4, 0, 1, 1)",
-  "out": "cubic-bezier(0, 0, 0.2, 1)",
-  "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
-};
-const ringWidth = {
-  DEFAULT: "1px",
-  none: "0px"
-};
+const flex = [
+  ["flex", { display: "flex" }],
+  ["inline-flex", { display: "inline-flex" }],
+  ["flex-inline", { display: "inline-flex" }],
+  [/^flex-(.*)$/, ([, d]) => ({ flex: handler.bracket(d) != null ? handler.bracket(d).split(" ").map((e) => handler.cssvar.fraction(e) ?? e).join(" ") : handler.cssvar.fraction(d) })],
+  ["flex-1", { flex: "1 1 0%" }],
+  ["flex-auto", { flex: "1 1 auto" }],
+  ["flex-initial", { flex: "0 1 auto" }],
+  ["flex-none", { flex: "none" }],
+  [/^(?:flex-)?shrink(?:-(.*))?$/, ([, d = ""]) => ({ "flex-shrink": handler.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ["flex-shrink-<num>", "shrink-<num>"] }],
+  [/^(?:flex-)?grow(?:-(.*))?$/, ([, d = ""]) => ({ "flex-grow": handler.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ["flex-grow-<num>", "grow-<num>"] }],
+  [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ "flex-basis": theme.spacing?.[d] ?? handler.bracket.cssvar.auto.fraction.rem(d) }), { autocomplete: ["flex-basis-$spacing", "basis-$spacing"] }],
+  ["flex-row", { "flex-direction": "row" }],
+  ["flex-row-reverse", { "flex-direction": "row-reverse" }],
+  ["flex-col", { "flex-direction": "column" }],
+  ["flex-col-reverse", { "flex-direction": "column-reverse" }],
+  ["flex-wrap", { "flex-wrap": "wrap" }],
+  ["flex-wrap-reverse", { "flex-wrap": "wrap-reverse" }],
+  ["flex-nowrap", { "flex-wrap": "nowrap" }]
+];
 
-const blur = {
-  "DEFAULT": "8px",
-  "0": "0",
-  "sm": "4px",
-  "md": "12px",
-  "lg": "16px",
-  "xl": "24px",
-  "2xl": "40px",
-  "3xl": "64px"
+const directions = {
+  "": "",
+  "x": "column-",
+  "y": "row-"
 };
-const dropShadow = {
-  "DEFAULT": ["0 1px 2px rgba(0,0,0,0.1)", "0 1px 1px rgba(0,0,0,0.06)"],
-  "sm": "0 1px 1px rgba(0,0,0,0.05)",
-  "md": ["0 4px 3px rgba(0,0,0,0.07)", "0 2px 2px rgba(0,0,0,0.06)"],
-  "lg": ["0 10px 8px rgba(0,0,0,0.04)", "0 4px 3px rgba(0,0,0,0.1)"],
-  "xl": ["0 20px 13px rgba(0,0,0,0.03)", "0 8px 5px rgba(0,0,0,0.08)"],
-  "2xl": "0 25px 25px rgba(0,0,0,0.15)",
-  "none": "0 0 rgba(0,0,0,0)"
+const handleGap = ([, d = "", s], { theme }) => {
+  const v = theme.spacing?.[s] ?? handler.bracket.cssvar.global.rem(s);
+  if (v != null) {
+    return {
+      [`grid-${directions[d]}gap`]: v,
+      [`${directions[d]}gap`]: v
+    };
+  }
 };
+const gaps = [
+  [/^(?:flex-|grid-)?gap-?()(.+)$/, handleGap, { autocomplete: ["gap-$spacing", "gap-<num>"] }],
+  [/^(?:flex-|grid-)?gap-([xy])-?(.+)$/, handleGap, { autocomplete: ["gap-(x|y)-$spacing", "gap-(x|y)-<num>"] }]
+];
 
-const baseSize = {
-  "xs": "20rem",
-  "sm": "24rem",
-  "md": "28rem",
-  "lg": "32rem",
-  "xl": "36rem",
-  "2xl": "42rem",
-  "3xl": "48rem",
-  "4xl": "56rem",
-  "5xl": "64rem",
-  "6xl": "72rem",
-  "7xl": "80rem",
-  "prose": "65ch"
-};
-const width = {
-  auto: "auto",
-  ...baseSize,
-  screen: "100vw"
-};
-const maxWidth = {
-  none: "none",
-  ...baseSize,
-  screen: "100vw"
-};
-const height = {
-  auto: "auto",
-  ...baseSize,
-  screen: "100vh"
-};
-const maxHeight = {
-  none: "none",
-  ...baseSize,
-  screen: "100vh"
+const rowCol = (s) => s.replace("col", "column");
+const rowColTheme = (s) => s[0] === "r" ? "Row" : "Column";
+const autoDirection = (c, theme, prop) => {
+  const v = theme[`gridAuto${rowColTheme(c)}`]?.[prop];
+  if (v != null)
+    return v;
+  switch (prop) {
+    case "min":
+      return "min-content";
+    case "max":
+      return "max-content";
+    case "fr":
+      return "minmax(0,1fr)";
+  }
+  return handler.bracket.cssvar.auto.rem(prop);
 };
+const grids = [
+  ["grid", { display: "grid" }],
+  ["inline-grid", { display: "inline-grid" }],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-${rowCol(c)}`]: theme[`grid${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar.auto(v)
+  })],
+  [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
+    if (s === "full")
+      return { [`grid-${rowCol(c)}`]: "1/-1" };
+    const v = handler.bracket.number(s);
+    if (v != null)
+      return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
+  }, { autocomplete: ["grid-(row|col)-span-<num>", "(row|col)-span-<num>"] }],
+  [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v }), { autocomplete: ["grid-(row|col)-(start|end)-<num>"] }],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) }), { autocomplete: ["grid-auto-(rows|cols)-<num>"] }],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") }), { autocomplete: ["(grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)"] }],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar(v)
+  })],
+  [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
+  [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` }), { autocomplete: ["grid-(rows|cols)-<num>", "grid-(rows|cols)-none"] }],
+  ["grid-rows-none", { "grid-template-rows": "none" }],
+  ["grid-cols-none", { "grid-template-columns": "none" }]
+];
 
-const preflightBase = {
-  ...transformBase,
-  ...boxShadowsBase,
-  ...ringBase
+const sizeMapping = {
+  h: "height",
+  w: "width",
+  inline: "inline-size",
+  block: "block-size"
 };
+function getPropName(minmax, hw) {
+  return `${minmax || ""}${sizeMapping[hw]}`;
+}
+function getSizeValue(minmax, hw, theme, prop) {
+  const str = getPropName(minmax, hw).replace(/-(\w)/g, (_, p) => p.toUpperCase());
+  const v = theme[str]?.[prop];
+  if (v != null)
+    return v;
+  switch (prop) {
+    case "fit":
+    case "max":
+    case "min":
+      return `${prop}-content`;
+  }
+  return handler.bracket.cssvar.global.auto.fraction.rem(prop);
+}
+const sizes = [
+  [/^(min-|max-)?([wh])-?(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) }), {
+    autocomplete: [
+      "(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize",
+      "(block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize",
+      "(max|min)-(w|h|block|inline)",
+      "(max|min)-(w|h|block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize"
+    ]
+  }],
+  [/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] })],
+  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), {
+    autocomplete: [
+      "(w|h)-screen",
+      "(min|max)-(w|h)-screen",
+      "h-screen-$verticalBreakpoints",
+      "(min|max)-h-screen-$verticalBreakpoints",
+      "w-screen-$breakpoints",
+      "(min|max)-w-screen-$breakpoints"
+    ]
+  }]
+];
+function getAspectRatio(prop) {
+  if (/^\d+\/\d+$/.test(prop))
+    return prop;
+  switch (prop) {
+    case "square":
+      return "1/1";
+    case "video":
+      return "16/9";
+  }
+  return handler.bracket.cssvar.global.auto.number(prop);
+}
+const aspectRatio = [
+  [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => ({ "aspect-ratio": getAspectRatio(d) }), { autocomplete: ["aspect-(square|video|ratio)", "aspect-ratio-(square|video)"] }]
+];
+
+const paddings = [
+  [/^pa?()-?(-?.+)$/, directionSize("padding"), { autocomplete: ["(m|p)<num>", "(m|p)-<num>"] }],
+  [/^p-?xy()()$/, directionSize("padding"), { autocomplete: "(m|p)-(xy)" }],
+  [/^p-?([xy])(?:-?(-?.+))?$/, directionSize("padding")],
+  [/^p-?([rltbse])(?:-?(-?.+))?$/, directionSize("padding"), { autocomplete: "(m|p)<directions>-<num>" }],
+  [/^p-(block|inline)(?:-(-?.+))?$/, directionSize("padding"), { autocomplete: "(m|p)-(block|inline)-<num>" }],
+  [/^p-?([bi][se])(?:-?(-?.+))?$/, directionSize("padding"), { autocomplete: "(m|p)-(bs|be|is|ie)-<num>" }]
+];
+const margins = [
+  [/^ma?()-?(-?.+)$/, directionSize("margin")],
+  [/^m-?xy()()$/, directionSize("margin")],
+  [/^m-?([xy])(?:-?(-?.+))?$/, directionSize("margin")],
+  [/^m-?([rltbse])(?:-?(-?.+))?$/, directionSize("margin")],
+  [/^m-(block|inline)(?:-(-?.+))?$/, directionSize("margin")],
+  [/^m-?([bi][se])(?:-?(-?.+))?$/, directionSize("margin")]
+];
 
-const theme = {
-  width,
-  height,
-  maxWidth,
-  maxHeight,
-  minWidth: maxWidth,
-  minHeight: maxHeight,
-  inlineSize: width,
-  blockSize: height,
-  maxInlineSize: maxWidth,
-  maxBlockSize: maxHeight,
-  minInlineSize: maxWidth,
-  minBlockSize: maxHeight,
-  colors,
-  fontFamily,
-  fontSize,
-  breakpoints,
-  verticalBreakpoints,
-  borderRadius,
-  lineHeight,
-  letterSpacing,
-  wordSpacing,
-  boxShadow,
-  textIndent,
-  textShadow,
-  textStrokeWidth,
-  blur,
-  dropShadow,
-  easing,
-  lineWidth,
-  spacing,
-  duration,
-  ringWidth,
-  preflightBase
+const variablesAbbrMap = {
+  backface: "backface-visibility",
+  break: "word-break",
+  case: "text-transform",
+  content: "align-content",
+  fw: "font-weight",
+  items: "align-items",
+  justify: "justify-content",
+  select: "user-select",
+  self: "align-self",
+  vertical: "vertical-align",
+  visible: "visibility",
+  whitespace: "white-space",
+  ws: "white-space"
 };
+const cssVariables = [
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
+    const prop = variablesAbbrMap[name];
+    if (prop)
+      return { [prop]: handler.cssvar(varname) };
+  }]
+];
+const cssProperty = [
+  [/^\[([\w_-]+):([^'"]+)\]$/, ([, prop, value]) => ({ [prop]: handler.bracket(`[${value}]`) })]
+];
+
+const questionMark = [
+  [
+    /^(where|\?)$/,
+    (_, { constructCSS, generator }) => {
+      if (generator.userConfig.envMode === "dev")
+        return `@keyframes __un_qm{0%{box-shadow:inset 4px 4px #ff1e90, inset -4px -4px #ff1e90}100%{box-shadow:inset 8px 8px #3399ff, inset -8px -8px #3399ff}}
+${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
+    }
+  ]
+];
+
+const svgUtilities = [
+  [/^fill-(.+)$/, colorResolver("fill", "fill"), { autocomplete: "fill-$colors" }],
+  [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) }), { autocomplete: "fill-(op|opacity)-<percent>" }],
+  ["fill-none", { fill: "none" }],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s], { theme }) => ({ "stroke-width": theme.lineWidth?.[s] ?? handler.bracket.cssvar.fraction.px.number(s) }), { autocomplete: ["stroke-width-$lineWidth", "stroke-size-$lineWidth"] }],
+  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.cssvar.number(s) }), { autocomplete: "stroke-dash-<num>" }],
+  [/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": theme.lineWidth?.[s] ?? handler.bracket.cssvar.px.numberWithUnit(s) }), { autocomplete: "stroke-offset-$lineWidth" }],
+  [/^stroke-(.+)$/, colorResolver("stroke", "stroke"), { autocomplete: "stroke-$colors" }],
+  [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) }), { autocomplete: "stroke-(op|opacity)-<percent>" }],
+  ["stroke-cap-square", { "stroke-linecap": "square" }],
+  ["stroke-cap-round", { "stroke-linecap": "round" }],
+  ["stroke-cap-auto", { "stroke-linecap": "butt" }],
+  ["stroke-join-arcs", { "stroke-linejoin": "arcs" }],
+  ["stroke-join-bevel", { "stroke-linejoin": "bevel" }],
+  ["stroke-join-clip", { "stroke-linejoin": "miter-clip" }],
+  ["stroke-join-round", { "stroke-linejoin": "round" }],
+  ["stroke-join-auto", { "stroke-linejoin": "miter" }],
+  ["stroke-none", { stroke: "none" }]
+];
+
+const rules = [
+  cssVariables,
+  cssProperty,
+  paddings,
+  margins,
+  displays,
+  opacity,
+  bgColors,
+  svgUtilities,
+  borders,
+  contents,
+  fonts,
+  tabSizes,
+  textIndents,
+  textOverflows,
+  textDecorations,
+  textStrokes,
+  textShadows,
+  textTransforms,
+  textAligns,
+  textColors,
+  fontStyles,
+  fontSmoothings,
+  boxShadows,
+  rings,
+  flex,
+  grids,
+  gaps,
+  positions,
+  sizes,
+  aspectRatio,
+  cursors,
+  appearances,
+  pointerEvents,
+  resizes,
+  verticalAligns,
+  userSelects,
+  whitespaces,
+  breaks,
+  overflows,
+  outline,
+  appearance,
+  orders,
+  justifies,
+  alignments,
+  placements,
+  insets,
+  floats,
+  zIndexes,
+  boxSizing,
+  transitions,
+  transforms,
+  willChange,
+  questionMark
+].flat(1);
 
-export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, lineWidth as j, duration as k, lineHeight as l, borderRadius as m, boxShadow as n, easing as o, baseSize as p, width as q, ringWidth as r, spacing as s, theme as t, maxWidth as u, verticalBreakpoints as v, wordSpacing as w, height as x, maxHeight as y, preflightBase as z };
+export { grids as a, bgColors as b, aspectRatio as c, svgUtilities as d, cssVariables as e, flex as f, gaps as g, cssProperty as h, margins as m, opacity as o, paddings as p, questionMark as q, rules as r, sizes as s, textColors as t };