@unocss/preset-mini 0.44.5 → 0.45.3

package/dist/chunks/default.cjs

@@ -1,295 +1,306 @@
 'use strict';
 
+const decoration = require('./decoration.cjs');
 const colors = require('./colors.cjs');
-const transform = require('./transform.cjs');
+require('@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: colors.handler.bracket.percent.cssvar(d) })]
+];
+const textColors = [
+  [/^(?:color|c)-(.+)$/, colors.colorResolver("color", "text"), { autocomplete: "(text|color|c)-$colors" }],
+  [/^text-(.+)$/, colors.colorResolver("color", "text", (css) => !css.color?.toString().match(colors.numberWithUnitRE)), { autocomplete: "(text|color|c)-$colors" }],
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": colors.handler.bracket.percent(opacity2) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }]
+];
+const bgColors = [
+  [/^bg-(.+)$/, colors.colorResolver("background-color", "bg"), { autocomplete: "bg-$colors" }],
+  [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": colors.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: colors.handler.bracket(d) != null ? colors.handler.bracket(d).split(" ").map((e) => colors.handler.cssvar.fraction(e) ?? e).join(" ") : colors.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": colors.handler.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ["flex-shrink-<num>", "shrink-<num>"] }],
+  [/^(?:flex-)?grow(?:-(.*))?$/, ([, d = ""]) => ({ "flex-grow": colors.handler.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ["flex-grow-<num>", "grow-<num>"] }],
+  [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ "flex-basis": theme.spacing?.[d] ?? colors.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] ?? colors.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 colors.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] ?? colors.handler.bracket.cssvar.auto(v)
+  })],
+  [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
+    if (s === "full")
+      return { [`grid-${rowCol(c)}`]: "1/-1" };
+    const v = colors.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`]: colors.handler.bracket.cssvar(v) ?? v })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: colors.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": colors.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] ?? colors.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 = {
-  ...transform.transformBase,
-  ...transform.boxShadowsBase,
-  ...transform.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 colors.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)]: colors.resolveVerticalBreakpoints(context)?.[s] })],
+  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: colors.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 colors.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?()-?(-?.+)$/, colors.directionSize("padding"), { autocomplete: ["(m|p)<num>", "(m|p)-<num>"] }],
+  [/^p-?xy()()$/, colors.directionSize("padding"), { autocomplete: "(m|p)-(xy)" }],
+  [/^p-?([xy])(?:-?(-?.+))?$/, colors.directionSize("padding")],
+  [/^p-?([rltbse])(?:-?(-?.+))?$/, colors.directionSize("padding"), { autocomplete: "(m|p)<directions>-<num>" }],
+  [/^p-(block|inline)(?:-(-?.+))?$/, colors.directionSize("padding"), { autocomplete: "(m|p)-(block|inline)-<num>" }],
+  [/^p-?([bi][se])(?:-?(-?.+))?$/, colors.directionSize("padding"), { autocomplete: "(m|p)-(bs|be|is|ie)-<num>" }]
+];
+const margins = [
+  [/^ma?()-?(-?.+)$/, colors.directionSize("margin")],
+  [/^m-?xy()()$/, colors.directionSize("margin")],
+  [/^m-?([xy])(?:-?(-?.+))?$/, colors.directionSize("margin")],
+  [/^m-?([rltbse])(?:-?(-?.+))?$/, colors.directionSize("margin")],
+  [/^m-(block|inline)(?:-(-?.+))?$/, colors.directionSize("margin")],
+  [/^m-?([bi][se])(?:-?(-?.+))?$/, colors.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: colors.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]: colors.handler.cssvar(varname) };
+  }]
+];
+const cssProperty = [
+  [/^\[([\w_-]+):([^'"]+)\]$/, ([, prop, value]) => ({ [prop]: colors.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-(.+)$/, colors.colorResolver("fill", "fill"), { autocomplete: "fill-$colors" }],
+  [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": colors.handler.bracket.percent(opacity) }), { autocomplete: "fill-(op|opacity)-<percent>" }],
+  ["fill-none", { fill: "none" }],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s], { theme }) => ({ "stroke-width": theme.lineWidth?.[s] ?? colors.handler.bracket.cssvar.fraction.px.number(s) }), { autocomplete: ["stroke-width-$lineWidth", "stroke-size-$lineWidth"] }],
+  [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": colors.handler.bracket.cssvar.number(s) }), { autocomplete: "stroke-dash-<num>" }],
+  [/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": theme.lineWidth?.[s] ?? colors.handler.bracket.cssvar.px.numberWithUnit(s) }), { autocomplete: "stroke-offset-$lineWidth" }],
+  [/^stroke-(.+)$/, colors.colorResolver("stroke", "stroke"), { autocomplete: "stroke-$colors" }],
+  [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": colors.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,
+  decoration.displays,
+  opacity,
+  bgColors,
+  svgUtilities,
+  decoration.borders,
+  decoration.contents,
+  decoration.fonts,
+  decoration.tabSizes,
+  decoration.textIndents,
+  decoration.textOverflows,
+  decoration.textDecorations,
+  decoration.textStrokes,
+  decoration.textShadows,
+  decoration.textTransforms,
+  decoration.textAligns,
+  textColors,
+  decoration.fontStyles,
+  decoration.fontSmoothings,
+  decoration.boxShadows,
+  decoration.rings,
+  flex,
+  grids,
+  gaps,
+  decoration.positions,
+  sizes,
+  aspectRatio,
+  decoration.cursors,
+  decoration.appearances,
+  decoration.pointerEvents,
+  decoration.resizes,
+  decoration.verticalAligns,
+  decoration.userSelects,
+  decoration.whitespaces,
+  decoration.breaks,
+  decoration.overflows,
+  decoration.outline,
+  decoration.appearance,
+  decoration.orders,
+  decoration.justifies,
+  decoration.alignments,
+  decoration.placements,
+  decoration.insets,
+  decoration.floats,
+  decoration.zIndexes,
+  decoration.boxSizing,
+  decoration.transitions,
+  decoration.transforms,
+  decoration.willChange,
+  questionMark
+].flat(1);
 
-exports.baseSize = baseSize;
-exports.blur = blur;
-exports.borderRadius = borderRadius;
-exports.boxShadow = boxShadow;
-exports.breakpoints = breakpoints;
-exports.dropShadow = dropShadow;
-exports.duration = duration;
-exports.easing = easing;
-exports.fontFamily = fontFamily;
-exports.fontSize = fontSize;
-exports.height = height;
-exports.letterSpacing = letterSpacing;
-exports.lineHeight = lineHeight;
-exports.lineWidth = lineWidth;
-exports.maxHeight = maxHeight;
-exports.maxWidth = maxWidth;
-exports.preflightBase = preflightBase;
-exports.ringWidth = ringWidth;
-exports.spacing = spacing;
-exports.textIndent = textIndent;
-exports.textShadow = textShadow;
-exports.textStrokeWidth = textStrokeWidth;
-exports.theme = theme;
-exports.verticalBreakpoints = verticalBreakpoints;
-exports.width = width;
-exports.wordSpacing = wordSpacing;
+exports.aspectRatio = aspectRatio;
+exports.bgColors = bgColors;
+exports.cssProperty = cssProperty;
+exports.cssVariables = cssVariables;
+exports.flex = flex;
+exports.gaps = gaps;
+exports.grids = grids;
+exports.margins = margins;
+exports.opacity = opacity;
+exports.paddings = paddings;
+exports.questionMark = questionMark;
+exports.rules = rules;
+exports.sizes = sizes;
+exports.svgUtilities = svgUtilities;
+exports.textColors = textColors;