@unocss/preset-wind 0.18.1 → 0.20.2

package/dist/index.cjs

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const variants = require('@unocss/preset-mini/variants');
 const core = require('@unocss/core');
 const theme$1 = require('@unocss/preset-mini/theme');
 const presetMini = require('@unocss/preset-mini');
 const rules$1 = require('@unocss/preset-mini/rules');
 const utils = require('@unocss/preset-mini/utils');
+const variants$1 = require('@unocss/preset-mini/variants');
 
 const animations = [
   [/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
@@ -34,22 +34,19 @@ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinit
   ["animate-none", { animation: "none" }]
 ];
 
-const colorResolver = (mode) => ([, body], { theme }) => {
+const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   const data = utils.parseColor(body, theme);
   if (!data)
     return;
-  const { opacity, color, rgba } = data;
+  const { alpha, color, rgba } = data;
   if (!color)
     return;
   let colorString = color;
   if (rgba) {
-    const a = opacity ? opacity[0] === "[" ? utils.handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba[3];
-    if (a != null && !Number.isNaN(a)) {
-      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+    if (alpha != null)
       colorString = `rgba(${rgba.join(",")})`;
-    } else {
-      colorString = `rgba(${rgba.slice(0, 3).join(",")}, var(--un-${mode}-opacity, 1))`;
-    }
+    else
+      colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
   }
   switch (mode) {
     case "from":
@@ -101,9 +98,9 @@ const backgroundStyles = [
   ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
   ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
   ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
-  [/^(?:bg-gradient-)?from-(.+)$/, colorResolver("from")],
-  [/^(?:bg-gradient-)?to-(.+)$/, colorResolver("to")],
-  [/^(?:bg-gradient-)?via-(.+)$/, colorResolver("via")],
+  [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
+  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
+  [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": utils.handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": utils.handler.bracket.percent(opacity) })],
@@ -199,11 +196,7 @@ const scrollBehaviors = [
 ];
 
 const columns = [
-  [/^columns-(.+)$/, ([, v]) => {
-    const column = utils.handler.bracket.global.number.auto.numberWithUnit(v);
-    if (column)
-      return { column };
-  }],
+  [/^columns-(.+)$/, ([, v]) => ({ column: utils.handler.bracket.global.number.auto.numberWithUnit(v) })],
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -272,7 +265,7 @@ const filterBase = {
   "--un-sepia": rules$1.varEmpty,
   "--un-drop-shadow": rules$1.varEmpty,
   "filter": filterContnet,
-  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  [variants$1.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 = {
@@ -286,7 +279,7 @@ const backdropFilterBase = {
   "--un-backdrop-sepia": rules$1.varEmpty,
   "-webkit-backdrop-filter": backdropFilterContent,
   "backdrop-filter": backdropFilterContent,
-  [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const percentWithDefault = (defaultValue = "1") => (str) => {
   const v = str ? utils.handler.bracket.percent(str) : defaultValue;
@@ -484,11 +477,8 @@ const cssVariables = [[
   /^(.+)-\$(.+)$/,
   ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
-    if (prop) {
-      return {
-        [prop]: `var(--${varname})`
-      };
-    }
+    if (prop)
+      return { [prop]: `var(--${varname})` };
   }
 ]];
 
@@ -544,7 +534,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_CLASS]: ""
+  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const fontVariantNumeric = [
   [/^ordinal$/, () => [fontVariantNumericBase, { "--un-ordinal": "ordinal" }]],
@@ -563,7 +553,7 @@ const touchActionBase = {
   "--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]: ""
+  [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
 };
 const touchActions = [
   [/^touch-pan-(x|left|right)$/, ([, d]) => [
@@ -596,7 +586,7 @@ const scrolls = [
   [/^snap-(x|y|base)$/, ([, d]) => [
     {
       "--un-scroll-snap-strictness": "proximity",
-      [variants.CONTROL_BYPASS_PSEUDO_CLASS]: ""
+      [variants$1.CONTROL_BYPASS_PSEUDO_CLASS]: ""
     },
     {
       "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
@@ -858,39 +848,34 @@ const theme = {
 };
 
 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)"
-      };
-    }
-  }
+  utils.variantMatcher(".dark", (input) => `.dark $$ ${input}`),
+  utils.variantMatcher(".light", (input) => `.light $$ ${input}`),
+  utils.variantParentMatcher("@dark", "@media (prefers-color-scheme: dark)"),
+  utils.variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
 ];
 
-const presetWind = (options = {}) => ({
-  name: "@unocss/preset-wind",
-  theme,
-  rules,
-  shortcuts: [
-    ...containerShortcuts
-  ],
-  variants: [
-    ...variants.variants(options),
-    ...variantColorsScheme
-  ],
-  options
-});
+const variantFilePseudoElement = utils.variantMatcher("file", (input) => `${input}::file-selector-button`);
+
+const variants = [
+  ...variants$1.variants,
+  variantFilePseudoElement,
+  ...variantColorsScheme
+];
+
+const presetWind = (options = {}) => {
+  options.dark = options.dark ?? "class";
+  options.attributifyPseudo = options.attributifyPseudo ?? false;
+  return {
+    name: "@unocss/preset-wind",
+    theme,
+    rules,
+    shortcuts: [
+      ...containerShortcuts
+    ],
+    variants,
+    options
+  };
+};
 
 exports.colors = presetMini.colors;
 exports["default"] = presetWind;

package/dist/index.d.ts

@@ -1,18 +1,10 @@
 import { Preset } from '@unocss/core';
-import { Theme } from '@unocss/preset-mini';
+import { Theme, PresetMiniOptions } from '@unocss/preset-mini';
 export { Theme, colors } from '@unocss/preset-mini';
 
 declare const theme: Theme;
 
-interface UnoOptions {
-    /**
-     * @default 'class'
-     */
-    dark?: 'class' | 'media';
-    /**
-     * @default false
-     */
-    attributifyPseudo?: Boolean;
+interface UnoOptions extends PresetMiniOptions {
 }
 declare const presetWind: (options?: UnoOptions) => Preset<Theme>;
 

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { CONTROL_BYPASS_PSEUDO_CLASS, variants } from '@unocss/preset-mini/variants';
 import { toArray } from '@unocss/core';
 import { theme as theme$1 } from '@unocss/preset-mini/theme';
 export { colors } from '@unocss/preset-mini';
 import { varEmpty, 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, opacity, boxShadows, outline, rings, transitions, willChange, contents, questionMark } from '@unocss/preset-mini/rules';
-import { handler, parseColor, colorResolver as colorResolver$1, directionSize, directionMap, variantMatcher } from '@unocss/preset-mini/utils';
+import { handler, parseColor, colorResolver, directionSize, directionMap, variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils';
+import { CONTROL_BYPASS_PSEUDO_CLASS, variants as variants$1 } from '@unocss/preset-mini/variants';
 
 const animations = [
   [/^animate-(.+)$/, ([, name], { theme, constructCSS }) => {
@@ -30,22 +30,19 @@ ${constructCSS(Object.assign({ animation: `${name} ${duration} ${timing} infinit
   ["animate-none", { animation: "none" }]
 ];
 
-const colorResolver = (mode) => ([, body], { theme }) => {
+const bgGradientColorResolver = (mode) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { opacity, color, rgba } = data;
+  const { alpha, color, rgba } = data;
   if (!color)
     return;
   let colorString = color;
   if (rgba) {
-    const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba[3];
-    if (a != null && !Number.isNaN(a)) {
-      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+    if (alpha != null)
       colorString = `rgba(${rgba.join(",")})`;
-    } else {
-      colorString = `rgba(${rgba.slice(0, 3).join(",")}, var(--un-${mode}-opacity, 1))`;
-    }
+    else
+      colorString = `rgba(${rgba.join(",")}, var(--un-${mode}-opacity, 1))`;
   }
   switch (mode) {
     case "from":
@@ -97,9 +94,9 @@ const backgroundStyles = [
   ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-attachment": "content-box" }],
   ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-attachment": "padding-box" }],
   ["bg-clip-text", { "-webkit-background-clip": "text", "background-attachment": "text" }],
-  [/^(?:bg-gradient-)?from-(.+)$/, colorResolver("from")],
-  [/^(?:bg-gradient-)?to-(.+)$/, colorResolver("to")],
-  [/^(?:bg-gradient-)?via-(.+)$/, colorResolver("via")],
+  [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver("from")],
+  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver("to")],
+  [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver("via")],
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-from-opacity": handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-to-opacity": handler.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-via-opacity": handler.bracket.percent(opacity) })],
@@ -156,13 +153,13 @@ const accentOpacity = [
   [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": handler.bracket.percent(d) })]
 ];
 const accentColors = [
-  [/^accent-(.+)$/, colorResolver$1("accent-color", "accent")]
+  [/^accent-(.+)$/, colorResolver("accent-color", "accent")]
 ];
 const caretOpacity = [
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": handler.bracket.percent(d) })]
 ];
 const caretColors = [
-  [/^caret-(.+)$/, colorResolver$1("caret-color", "caret")]
+  [/^caret-(.+)$/, colorResolver("caret-color", "caret")]
 ];
 const imageRenderings = [
   ["image-render-auto", { "image-rendering": "auto" }],
@@ -195,11 +192,7 @@ const scrollBehaviors = [
 ];
 
 const columns = [
-  [/^columns-(.+)$/, ([, v]) => {
-    const column = handler.bracket.global.number.auto.numberWithUnit(v);
-    if (column)
-      return { column };
-  }],
+  [/^columns-(.+)$/, ([, v]) => ({ column: handler.bracket.global.number.auto.numberWithUnit(v) })],
   ["break-before-auto", { "break-before": "auto" }],
   ["break-before-avoid", { "break-before": "avoid" }],
   ["break-before-all", { "break-before": "all" }],
@@ -480,16 +473,13 @@ const cssVariables = [[
   /^(.+)-\$(.+)$/,
   ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
-    if (prop) {
-      return {
-        [prop]: `var(--${varname})`
-      };
-    }
+    if (prop)
+      return { [prop]: `var(--${varname})` };
   }
 ]];
 
 const divideColors = [
-  [/^divide-(.+)$/, colorResolver$1("border-color", "divide")],
+  [/^divide-(.+)$/, colorResolver("border-color", "divide")],
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": handler.bracket.percent(opacity) })]
 ];
 const divideSizes = [
@@ -854,38 +844,33 @@ const theme = {
 };
 
 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)"
-      };
-    }
-  }
+  variantMatcher(".dark", (input) => `.dark $$ ${input}`),
+  variantMatcher(".light", (input) => `.light $$ ${input}`),
+  variantParentMatcher("@dark", "@media (prefers-color-scheme: dark)"),
+  variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
 ];
 
-const presetWind = (options = {}) => ({
-  name: "@unocss/preset-wind",
-  theme,
-  rules,
-  shortcuts: [
-    ...containerShortcuts
-  ],
-  variants: [
-    ...variants(options),
-    ...variantColorsScheme
-  ],
-  options
-});
+const variantFilePseudoElement = variantMatcher("file", (input) => `${input}::file-selector-button`);
+
+const variants = [
+  ...variants$1,
+  variantFilePseudoElement,
+  ...variantColorsScheme
+];
+
+const presetWind = (options = {}) => {
+  options.dark = options.dark ?? "class";
+  options.attributifyPseudo = options.attributifyPseudo ?? false;
+  return {
+    name: "@unocss/preset-wind",
+    theme,
+    rules,
+    shortcuts: [
+      ...containerShortcuts
+    ],
+    variants,
+    options
+  };
+};
 
 export { presetWind as default, presetWind, theme };

package/package.json

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