fix(preset-wind3, preset-wind4): update column generate value from container (#5030)

zyyv · web-flow · commit 46860e654dbf · 2025-12-30T13:49:50.000+08:00
diff --git a/packages-engine/autocomplete/test/__snapshots__/autocomplete.test.ts.snap b/packages-engine/autocomplete/test/__snapshots__/autocomplete.test.ts.snap
@@ -371,7 +371,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "border-": "border-amber border-b border-b-amber border-b-black border-b-blue border-b-bluegray border-b-blueGray border-b-coolgray border-b-coolGray border-b-current",
   "border-r": "border-r border-r-amber border-r-black border-r-blue border-r-bluegray border-r-blueGray border-r-coolgray border-r-coolGray border-r-current border-r-cyan",
   "border-spacing-": "border-spacing-lg border-spacing-none border-spacing-sm border-spacing-x border-spacing-x-lg border-spacing-x-none border-spacing-x-sm border-spacing-x-xl border-spacing-x-xs border-spacing-xl",
-  "columns-": "columns-0 columns-1 columns-2 columns-3 columns-4 columns-5 columns-6 columns-8 columns-10 columns-12",
+  "columns-": "columns-auto columns-lg columns-md columns-prose columns-sm columns-xl columns-xs columns-0 columns-1 columns-2",
   "divide-": "divide-amber divide-black divide-block divide-block-none divide-block-reverse divide-blue divide-bluegray divide-blueGray divide-coolgray divide-coolGray",
   "fill-": "fill-amber fill-black fill-blue fill-bluegray fill-blueGray fill-coolgray fill-coolGray fill-current fill-cyan fill-dark",
   "filter-": "filter-blur filter-blur-lg filter-blur-md filter-blur-sm filter-blur-xl filter-drop filter-drop-shadow filter-drop-shadow-color filter-drop-shadow-color-amber filter-drop-shadow-color-black",
@@ -478,7 +478,7 @@ exports[`autocomplete with attributify prefix > should provide autocomplete 1`]
   "u-border-": "u-border-amber u-border-b u-border-b-amber u-border-b-black u-border-b-blue u-border-b-bluegray u-border-b-blueGray u-border-b-coolgray u-border-b-coolGray u-border-b-current",
   "u-border-r": "u-border-r u-border-r-amber u-border-r-black u-border-r-blue u-border-r-bluegray u-border-r-blueGray u-border-r-coolgray u-border-r-coolGray u-border-r-current u-border-r-cyan",
   "u-border-spacing-": "u-border-spacing-lg u-border-spacing-none u-border-spacing-sm u-border-spacing-x u-border-spacing-x-lg u-border-spacing-x-none u-border-spacing-x-sm u-border-spacing-x-xl u-border-spacing-x-xs u-border-spacing-xl",
-  "u-columns-": "u-columns-0 u-columns-1 u-columns-2 u-columns-3 u-columns-4 u-columns-5 u-columns-6 u-columns-8 u-columns-10 u-columns-12",
+  "u-columns-": "u-columns-auto u-columns-lg u-columns-md u-columns-prose u-columns-sm u-columns-xl u-columns-xs u-columns-0 u-columns-1 u-columns-2",
   "u-divide-": "u-divide-amber u-divide-black u-divide-block u-divide-block-none u-divide-block-reverse u-divide-blue u-divide-bluegray u-divide-blueGray u-divide-coolgray u-divide-coolGray",
   "u-fill-": "u-fill-amber u-fill-black u-fill-blue u-fill-bluegray u-fill-blueGray u-fill-coolgray u-fill-coolGray u-fill-current u-fill-cyan u-fill-dark",
   "u-filter-": "u-filter-blur u-filter-blur-lg u-filter-blur-md u-filter-blur-sm u-filter-blur-xl u-filter-drop u-filter-drop-shadow u-filter-drop-shadow-color u-filter-drop-shadow-color-amber u-filter-drop-shadow-color-black",
diff --git a/packages-presets/preset-wind3/src/rules/columns.ts b/packages-presets/preset-wind3/src/rules/columns.ts
@@ -1,8 +1,16 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { h, makeGlobalStaticRules } from '@unocss/preset-mini/utils'
 
-export const columns: Rule[] = [
-  [/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: 'columns-<num>' }],
+export const columns: Rule<Theme>[] = [
+  [/^columns-(.+)$/, ([, v], { theme }) => {
+    if (theme.containers && v in theme.containers) {
+      return { columns: theme.containers[v] }
+    }
+
+    return { columns: h.bracket.numberWithUnit.number.cssvar(v) }
+  }, { autocomplete: ['columns-<num>', 'columns-$containers'] }],
+  ['columns-auto', { columns: 'auto' }],
 
   // break before
   ['break-before-auto', { 'break-before': 'auto' }],
diff --git a/packages-presets/preset-wind4/src/rules/columns.ts b/packages-presets/preset-wind4/src/rules/columns.ts
@@ -1,9 +1,17 @@
 import type { Rule } from '@unocss/core'
 import type { Theme } from '../theme'
-import { h, makeGlobalStaticRules } from '../utils'
+import { generateThemeVariable, h, makeGlobalStaticRules, themeTracking } from '../utils'
 
 export const columns: Rule<Theme>[] = [
-  [/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: 'columns-<num>' }],
+  [/^columns-(.+)$/, ([, v], { theme }) => {
+    if (theme.container && v in theme.container) {
+      themeTracking('container', v)
+      return { columns: generateThemeVariable('container', v) }
+    }
+
+    return { columns: h.bracket.numberWithUnit.number.cssvar(v) }
+  }, { autocomplete: ['columns-<num>', 'columns-$container'] }],
+  ['columns-auto', { columns: 'auto' }],
 
   // break before
   ['break-before-auto', { 'break-before': 'auto' }],
diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap
@@ -142,10 +142,11 @@ exports[`postcss > @unocss 1`] = `
 .columns-\\[3_auto\\]{columns:3 auto;}
 .columns-\\[auto_13em\\]{columns:auto 13em;}
 .columns-\\[auto_auto\\]{columns:auto auto;}
+.columns-\\$variable{columns:var(--variable);}
 .columns-3{columns:3;}
 .columns-5em{columns:5em;}
+.columns-sm{columns:24rem;}
 .columns-auto{columns:auto;}
-.columns-unset{columns:unset;}
 .break-before-avoid-page{break-before:avoid-page;}
 .break-before-initial{break-before:initial;}
 .break-inside-avoid-column{break-inside:avoid-column;}
diff --git a/test/assets/output/preset-wind3-targets.css b/test/assets/output/preset-wind3-targets.css
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -173,6 +173,7 @@
 --colors-red-300: oklch(80.8% 0.114 19.571);
 --font-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";
 --colors-red-DEFAULT: oklch(70.4% 0.191 22.216);
+--container-sm: 24rem;
 --colors-sky-300: oklch(82.8% 0.111 230.318);
 --colors-gray-DEFAULT: oklch(70.7% 0.022 261.325);
 --colors-gray-400: oklch(70.7% 0.022 261.325);
@@ -1593,10 +1594,11 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .columns-\[3_auto\]{columns:3 auto;}
 .columns-\[auto_13em\]{columns:auto 13em;}
 .columns-\[auto_auto\]{columns:auto auto;}
+.columns-\$variable{columns:var(--variable);}
 .columns-3{columns:3;}
 .columns-5em{columns:5em;}
+.columns-sm{columns:var(--container-sm);}
 .columns-auto{columns:auto;}
-.columns-unset{columns:unset;}
 .break-before-avoid-page{break-before:avoid-page;}
 .break-before-initial{break-before:initial;}
 .break-inside-avoid-column{break-inside:avoid-column;}
diff --git a/test/assets/preset-wind3-targets.ts b/test/assets/preset-wind3-targets.ts
@@ -170,7 +170,8 @@ export const targets = [
   'columns-[3_auto]',
   'columns-[auto_13em]',
   'columns-[auto_auto]',
-  'columns-unset',
+  'columns-sm',
+  'columns-$variable',
   'break-before-avoid-page',
   'break-inside-avoid-column',
   'break-after-column',
diff --git a/test/assets/preset-wind4-targets.ts b/test/assets/preset-wind4-targets.ts
@@ -180,7 +180,8 @@ export const presetWind4Targets: string[] = [
   'columns-[3_auto]',
   'columns-[auto_13em]',
   'columns-[auto_auto]',
-  'columns-unset',
+  'columns-sm',
+  'columns-$variable',
   'break-before-avoid-page',
   'break-inside-avoid-column',
   'break-after-column',
