@unocss/preset-wind 0.16.3 → 0.16.4

package/dist/index.cjs

@@ -311,6 +311,12 @@ const boxDecorationBreaks = [
   ["decoration-slice", { "box-decoration-break": "slice" }],
   ["decoration-clone", { "box-decoration-break": "clone" }]
 ];
+const accentOpacity = [
+  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": utils.handler.bracket.percent(d) })]
+];
+const accentColors = [
+  [/^accent-(.+)$/, rules$1.colorResolver("accent-color", "accent")]
+];
 const caretOpacity = [
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": utils.handler.bracket.percent(d) })]
 ];
@@ -340,6 +346,38 @@ const overscrolls = [
   [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
   [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0]
 ];
+const scrollBehaviors = [
+  ["scroll-auto", { "scroll-behavior": "auto" }],
+  ["scroll-smooth", { "scroll-behavior": "smooth" }]
+];
+
+const columns = [
+  [/^columns-(.+)$/, ([, v]) => {
+    const column = utils.handler.bracket.global.number.numberWithUnit(v);
+    if (column)
+      return { column };
+  }],
+  ["break-before-auto", { "break-before": "auto" }],
+  ["break-before-avoid", { "break-before": "avoid" }],
+  ["break-before-all", { "break-before": "all" }],
+  ["break-before-avoid-page", { "break-before": "avoid-page" }],
+  ["break-before-page", { "break-before": "page" }],
+  ["break-before-left", { "break-before": "left" }],
+  ["break-before-right", { "break-before": "right" }],
+  ["break-before-column", { "break-before": "column" }],
+  ["break-inside-auto", { "break-inside": "auto" }],
+  ["break-inside-avoid", { "break-inside": "avoid" }],
+  ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
+  ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
+  ["break-after-auto", { "break-after": "auto" }],
+  ["break-after-avoid", { "break-after": "avoid" }],
+  ["break-after-all", { "break-after": "all" }],
+  ["break-after-avoid-page", { "break-after": "avoid-page" }],
+  ["break-after-page", { "break-after": "page" }],
+  ["break-after-left", { "break-after": "left" }],
+  ["break-after-right", { "break-after": "right" }],
+  ["break-after-column", { "break-after": "column" }]
+];
 
 const queryMatcher = /@media \(min-width: (.+)\)/;
 const container = [
@@ -388,7 +426,7 @@ const filterBase = {
   "--un-sepia": varEmpty,
   "--un-drop-shadow": varEmpty,
   "filter": filterContnet,
-  [variants.CONTROL_BYPASS_PSEUDO]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
@@ -402,7 +440,7 @@ const backdropFilterBase = {
   "--un-backdrop-sepia": varEmpty,
   "-webkit-backdrop-filter": backdropFilterContent,
   "backdrop-filter": backdropFilterContent,
-  [variants.CONTROL_BYPASS_PSEUDO]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const percentWithDefault = (defaultValue = "1") => (str) => {
   const v = str ? utils.handler.bracket.percent(str) : defaultValue;
@@ -665,7 +703,7 @@ const fontVariantNumericBase = {
   "--un-numeric-spacing": rules$1.varEmpty,
   "--un-numeric-fraction": rules$1.varEmpty,
   "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
-  [variants.CONTROL_BYPASS_PSEUDO]: ""
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const fontVariantNumeric = [
   [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -679,6 +717,67 @@ const fontVariantNumeric = [
   ["normal-nums", { "font-variant-numeric": "normal" }]
 ];
 
+const touchActionBase = {
+  "--un-pan-x": rules$1.varEmpty,
+  "--un-pan-y": rules$1.varEmpty,
+  "--un-pinch-zoom": rules$1.varEmpty,
+  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
+  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+};
+const touchActions = [
+  [/^touch-pan-(x|left|right)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-x": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-y": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pinch-zoom$/, () => [
+    touchActionBase,
+    {
+      "--un-pinch-zoom": "pinch-zoom",
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  ["touch-auto", { "touch-action": "auto" }],
+  ["touch-manipulation", { "touch-action": "manipulation" }],
+  ["touch-none", { "touch-action": "none" }]
+];
+
+const scrolls = [
+  [/^snap-(x|y|base)$/, ([, d]) => [
+    {
+      "--un-scroll-snap-strictness": "proximity",
+      [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+    },
+    {
+      "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
+    }
+  ]],
+  ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
+  ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
+  ["snap-none", { "scroll-snap-type": "none" }],
+  ["snap-start", { "scroll-snap-align": "start" }],
+  ["snap-end", { "scroll-snap-align": "end" }],
+  ["snap-center", { "scroll-snap-align": "center" }],
+  ["snap-align-none", { "scroll-snap-align": "none" }],
+  ["snap-normal", { "scroll-snap-stop": "normal" }],
+  ["snap-always", { "scroll-snap-stop": "always" }],
+  [/^scroll-ma?()-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-m-?([xy])-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-m-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-margin")],
+  [/^scroll-pa?()-?(-?.+)$/, utils.directionSize("scroll-padding")],
+  [/^scroll-p-?([xy])-?(-?.+)$/, utils.directionSize("scroll-padding")],
+  [/^scroll-p-?([rltb])-?(-?.+)$/, utils.directionSize("scroll-padding")]
+];
+
 const rules = [
   rules$1.cssVariables,
   cssVariables,
@@ -704,10 +803,13 @@ const rules = [
   rules$1.transforms,
   animations,
   rules$1.cursors,
+  touchActions,
   rules$1.userSelects,
   rules$1.resizes,
+  scrolls,
   listStyle,
   rules$1.appearance,
+  columns,
   rules$1.placements,
   rules$1.alignments,
   rules$1.justifies,
@@ -716,6 +818,7 @@ const rules = [
   divides,
   rules$1.overflows,
   overscrolls,
+  scrollBehaviors,
   rules$1.textOverflows,
   rules$1.whitespaces,
   rules$1.breaks,
@@ -723,7 +826,7 @@ const rules = [
   rules$1.bgColors,
   boxDecorationBreaks,
   backgroundStyles,
-  rules$1.fillColors,
+  rules$1.svgUtilities,
   objectPositions,
   rules$1.paddings,
   rules$1.textAligns,
@@ -745,6 +848,8 @@ const rules = [
   rules$1.placeholder,
   caretColors,
   caretOpacity,
+  accentColors,
+  accentOpacity,
   rules$1.opacity,
   mixBlendModes,
   rules$1.boxShadows,
@@ -753,10 +858,32 @@ const rules = [
   imageRenderings,
   filters,
   rules$1.transitions,
+  rules$1.willChange,
   rules$1.contents,
   rules$1.questionMark
 ].flat(1);
 
+const variantColorsScheme = [
+  utils.variantMatcher("\\.dark", (input) => `.dark $$ ${input}`),
+  utils.variantMatcher("\\.light", (input) => `.light $$ ${input}`),
+  (v) => {
+    const dark = utils.variantMatcher("@dark")(v);
+    if (dark) {
+      return {
+        ...dark,
+        parent: "@media (prefers-color-scheme: dark)"
+      };
+    }
+    const light = utils.variantMatcher("@light")(v);
+    if (light) {
+      return {
+        ...light,
+        parent: "@media (prefers-color-scheme: light)"
+      };
+    }
+  }
+];
+
 const presetWind = (options = {}) => ({
   name: "@unocss/preset-wind",
   theme: theme.theme,
@@ -766,6 +893,7 @@ const presetWind = (options = {}) => ({
   ],
   variants: [
     ...variants.variants,
+    ...variantColorsScheme,
     ...options.dark === "media" ? variants.variantColorsMedia : variants.variantColorsClass
   ],
   options

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { theme } from '@unocss/preset-mini/theme';
-import { CONTROL_BYPASS_PSEUDO, variants, variantColorsMedia, variantColorsClass } from '@unocss/preset-mini/variants';
+import { CONTROL_BYPASS_PSEUDO_CLASS, variants, variantColorsMedia, variantColorsClass } from '@unocss/preset-mini/variants';
 import { toArray } from '@unocss/core';
 export { colors, theme } from '@unocss/preset-mini';
-import { parseColorUtil, colorResolver as colorResolver$1, varEmpty as varEmpty$1, cssVariables as cssVariables$1, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, fillColors, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, placeholder, opacity, boxShadows, outline, rings, transitions, contents, questionMark } from '@unocss/preset-mini/rules';
-import { handler, directionMap } from '@unocss/preset-mini/utils';
+import { parseColorUtil, colorResolver as colorResolver$1, varEmpty as varEmpty$1, cssVariables as cssVariables$1, pointerEvents, appearances, positions, insets, zIndexes, orders, grids, floats, margins, boxSizing, displays, aspectRatio, sizes, flex, transforms, cursors, userSelects, resizes, appearance, placements, alignments, justifies, gaps, overflows, textOverflows, whitespaces, breaks, borders, bgColors, svgUtilities, paddings, textAligns, textIndents, verticalAligns, fonts, fontStyles, textColors, textDecorations, fontSmoothings, tabSizes, textStrokes, textShadows, placeholder, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
+import { handler, directionMap, directionSize as directionSize$1, variantMatcher } from '@unocss/preset-mini/utils';
 
 const keyframes = {
   "pulse": "{0%, 100% {opacity:1} 50% {opacity:.5}}",
@@ -307,6 +307,12 @@ const boxDecorationBreaks = [
   ["decoration-slice", { "box-decoration-break": "slice" }],
   ["decoration-clone", { "box-decoration-break": "clone" }]
 ];
+const accentOpacity = [
+  [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": handler.bracket.percent(d) })]
+];
+const accentColors = [
+  [/^accent-(.+)$/, colorResolver$1("accent-color", "accent")]
+];
 const caretOpacity = [
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": handler.bracket.percent(d) })]
 ];
@@ -336,6 +342,38 @@ const overscrolls = [
   [/^overscroll-(.+)$/, ([, v]) => overflowValues.includes(v) ? { "overscroll-behavior": v } : void 0],
   [/^overscroll-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overscroll-behavior-${d}`]: v } : void 0]
 ];
+const scrollBehaviors = [
+  ["scroll-auto", { "scroll-behavior": "auto" }],
+  ["scroll-smooth", { "scroll-behavior": "smooth" }]
+];
+
+const columns = [
+  [/^columns-(.+)$/, ([, v]) => {
+    const column = handler.bracket.global.number.numberWithUnit(v);
+    if (column)
+      return { column };
+  }],
+  ["break-before-auto", { "break-before": "auto" }],
+  ["break-before-avoid", { "break-before": "avoid" }],
+  ["break-before-all", { "break-before": "all" }],
+  ["break-before-avoid-page", { "break-before": "avoid-page" }],
+  ["break-before-page", { "break-before": "page" }],
+  ["break-before-left", { "break-before": "left" }],
+  ["break-before-right", { "break-before": "right" }],
+  ["break-before-column", { "break-before": "column" }],
+  ["break-inside-auto", { "break-inside": "auto" }],
+  ["break-inside-avoid", { "break-inside": "avoid" }],
+  ["break-inside-avoid-page", { "break-inside": "avoid-page" }],
+  ["break-inside-avoid-column", { "break-inside": "avoid-column" }],
+  ["break-after-auto", { "break-after": "auto" }],
+  ["break-after-avoid", { "break-after": "avoid" }],
+  ["break-after-all", { "break-after": "all" }],
+  ["break-after-avoid-page", { "break-after": "avoid-page" }],
+  ["break-after-page", { "break-after": "page" }],
+  ["break-after-left", { "break-after": "left" }],
+  ["break-after-right", { "break-after": "right" }],
+  ["break-after-column", { "break-after": "column" }]
+];
 
 const queryMatcher = /@media \(min-width: (.+)\)/;
 const container = [
@@ -384,7 +422,7 @@ const filterBase = {
   "--un-sepia": varEmpty,
   "--un-drop-shadow": varEmpty,
   "filter": filterContnet,
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const backdropFilterContent = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
 const backdropFilterBase = {
@@ -398,7 +436,7 @@ const backdropFilterBase = {
   "--un-backdrop-sepia": varEmpty,
   "-webkit-backdrop-filter": backdropFilterContent,
   "backdrop-filter": backdropFilterContent,
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const percentWithDefault = (defaultValue = "1") => (str) => {
   const v = str ? handler.bracket.percent(str) : defaultValue;
@@ -661,7 +699,7 @@ const fontVariantNumericBase = {
   "--un-numeric-spacing": varEmpty$1,
   "--un-numeric-fraction": varEmpty$1,
   "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)",
-  [CONTROL_BYPASS_PSEUDO]: ""
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const fontVariantNumeric = [
   [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -675,6 +713,67 @@ const fontVariantNumeric = [
   ["normal-nums", { "font-variant-numeric": "normal" }]
 ];
 
+const touchActionBase = {
+  "--un-pan-x": varEmpty$1,
+  "--un-pan-y": varEmpty$1,
+  "--un-pinch-zoom": varEmpty$1,
+  "--un-touch-action": "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)",
+  [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+};
+const touchActions = [
+  [/^touch-pan-(x|left|right)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-x": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pan-(y|up|down)$/, ([, d]) => [
+    touchActionBase,
+    {
+      "--un-pan-y": `pan-${d}`,
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  [/^touch-pinch-zoom$/, () => [
+    touchActionBase,
+    {
+      "--un-pinch-zoom": "pinch-zoom",
+      "touch-action": "var(--un-touch-action)"
+    }
+  ]],
+  ["touch-auto", { "touch-action": "auto" }],
+  ["touch-manipulation", { "touch-action": "manipulation" }],
+  ["touch-none", { "touch-action": "none" }]
+];
+
+const scrolls = [
+  [/^snap-(x|y|base)$/, ([, d]) => [
+    {
+      "--un-scroll-snap-strictness": "proximity",
+      [CONTROL_BYPASS_PSEUDO_CLASS]: ""
+    },
+    {
+      "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
+    }
+  ]],
+  ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
+  ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
+  ["snap-none", { "scroll-snap-type": "none" }],
+  ["snap-start", { "scroll-snap-align": "start" }],
+  ["snap-end", { "scroll-snap-align": "end" }],
+  ["snap-center", { "scroll-snap-align": "center" }],
+  ["snap-align-none", { "scroll-snap-align": "none" }],
+  ["snap-normal", { "scroll-snap-stop": "normal" }],
+  ["snap-always", { "scroll-snap-stop": "always" }],
+  [/^scroll-ma?()-?(-?.+)$/, directionSize$1("scroll-margin")],
+  [/^scroll-m-?([xy])-?(-?.+)$/, directionSize$1("scroll-margin")],
+  [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize$1("scroll-margin")],
+  [/^scroll-pa?()-?(-?.+)$/, directionSize$1("scroll-padding")],
+  [/^scroll-p-?([xy])-?(-?.+)$/, directionSize$1("scroll-padding")],
+  [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize$1("scroll-padding")]
+];
+
 const rules = [
   cssVariables$1,
   cssVariables,
@@ -700,10 +799,13 @@ const rules = [
   transforms,
   animations,
   cursors,
+  touchActions,
   userSelects,
   resizes,
+  scrolls,
   listStyle,
   appearance,
+  columns,
   placements,
   alignments,
   justifies,
@@ -712,6 +814,7 @@ const rules = [
   divides,
   overflows,
   overscrolls,
+  scrollBehaviors,
   textOverflows,
   whitespaces,
   breaks,
@@ -719,7 +822,7 @@ const rules = [
   bgColors,
   boxDecorationBreaks,
   backgroundStyles,
-  fillColors,
+  svgUtilities,
   objectPositions,
   paddings,
   textAligns,
@@ -741,6 +844,8 @@ const rules = [
   placeholder,
   caretColors,
   caretOpacity,
+  accentColors,
+  accentOpacity,
   opacity,
   mixBlendModes,
   boxShadows,
@@ -749,10 +854,32 @@ const rules = [
   imageRenderings,
   filters,
   transitions,
+  willChange,
   contents,
   questionMark
 ].flat(1);
 
+const variantColorsScheme = [
+  variantMatcher("\\.dark", (input) => `.dark $$ ${input}`),
+  variantMatcher("\\.light", (input) => `.light $$ ${input}`),
+  (v) => {
+    const dark = variantMatcher("@dark")(v);
+    if (dark) {
+      return {
+        ...dark,
+        parent: "@media (prefers-color-scheme: dark)"
+      };
+    }
+    const light = variantMatcher("@light")(v);
+    if (light) {
+      return {
+        ...light,
+        parent: "@media (prefers-color-scheme: light)"
+      };
+    }
+  }
+];
+
 const presetWind = (options = {}) => ({
   name: "@unocss/preset-wind",
   theme,
@@ -762,6 +889,7 @@ const presetWind = (options = {}) => ({
   ],
   variants: [
     ...variants,
+    ...variantColorsScheme,
     ...options.dark === "media" ? variantColorsMedia : variantColorsClass
   ],
   options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-wind",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "Tailwind / Windi CSS compact preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -35,8 +35,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.16.3",
-    "@unocss/preset-mini": "0.16.3"
+    "@unocss/core": "0.16.4",
+    "@unocss/preset-mini": "0.16.4"
   },
   "scripts": {
     "build": "unbuild",