feat(preset-mini,preset-wind)!: add global keywords

packages/preset-mini/src/rules/border.ts

@@ -2,7 +2,7 @@ import type { CSSEntries, CSSObject, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, cornerMap, directionMap, globalKeywords, handler as h, hasParseableColor, parseColor } from '../utils'
 
-const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords]
+export const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords]
 
 export const borders: Rule[] = [
   // compound

packages/preset-mini/src/rules/typography.ts

@@ -63,11 +63,11 @@ export const fonts: Rule<Theme>[] = [
   ],
 
   // synthesis
-  [
-    /^font-synthesis-(.+)$/,
-    ([, s]) => ({ 'font-synthesis': s }),
-    { autocomplete: 'font-synthesis-(none|weight|style|small-caps)' },
-  ],
+  ['font-synthesis-weight', { 'font-synthesis': 'weight' }],
+  ['font-synthesis-style', { 'font-synthesis': 'style' }],
+  ['font-synthesis-small-caps', { 'font-synthesis': 'small-caps' }],
+  ['font-synthesis-none', { 'font-synthesis': 'none' }],
+  [/^font-synthesis-(.+)$/, ([, s]) => ({ 'font-synthesis': h.bracket.cssvar.global(s) })],
 
   // tracking
   [

packages/preset-wind/src/rules/animation.ts

@@ -1,5 +1,5 @@
 import type { Rule } from '@unocss/core'
-import { handler as h } from '@unocss/preset-mini/utils'
+import { globalKeywords, handler as h, makeGlobalStaticRules } from '@unocss/preset-mini/utils'
 import type { Theme } from '@unocss/preset-mini'
 
 export const animations: Rule<Theme>[] = [
@@ -38,7 +38,8 @@ export const animations: Rule<Theme>[] = [
   [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ 'animation-timing-function': theme.easing?.[d || 'DEFAULT'] ?? h.bracket.cssvar(d) }), { autocomplete: 'animate-delay-$easing' }],
 
   // fill mode
-  [/^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-fill-mode': d }),
+  [/^animate-(fill-mode-|fill-|mode-)?(.+)$/,
+    ([, t, d]) => ['none', 'forwards', 'backwards', 'both', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-fill-mode': d } : undefined,
     {
       autocomplete: [
         'animate-(fill|mode|fill-mode)',
@@ -49,7 +50,8 @@ export const animations: Rule<Theme>[] = [
   ],
 
   // direction
-  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-direction': d }),
+  [/^animate-(direction-)?(.+)$/,
+    ([, t, d]) => ['normal', 'reverse', 'alternate', 'alternate-reverse', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-direction': d } : undefined,
     {
       autocomplete: [
         'animate-direction',
@@ -61,7 +63,8 @@ export const animations: Rule<Theme>[] = [
 
   // others
   [/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ 'animation-iteration-count': h.bracket.cssvar(d) ?? d.replace(/\-/g, ',') }), { autocomplete: ['animate-(iteration|count|iteration-count)', 'animate-(iteration|count|iteration-count)-<num>'] }],
-  [/^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-play-state': d }),
+  [/^animate-(play-state-|play-|state-)?(.+)$/,
+    ([, t, d]) => ['paused', 'running', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-play-state': d } : undefined,
     {
       autocomplete: [
         'animate-(play|state|play-state)',
@@ -70,4 +73,5 @@ export const animations: Rule<Theme>[] = [
       ],
     }],
   ['animate-none', { animation: 'none' }],
+  ...makeGlobalStaticRules('animate', 'animation'),
 ]

packages/preset-wind/src/rules/behaviors.ts

@@ -18,20 +18,23 @@ const listStyles: Record<string, string> = {
 
 export const listStyle: Rule[] = [
   // base
-  [/^list-(.+)(?:-(outside|inside))?$/, ([, style, position]) => {
-    if (position != null) {
-      return {
-        'list-style-position': position,
-        'list-style-type': listStyles[style],
+  [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => {
+    const style = listStyles[alias]
+    if (style) {
+      if (position) {
+        return {
+          'list-style-position': position,
+          'list-style-type': style,
+        }
       }
+      return { 'list-style-type': style }
     }
-    return { 'list-style-type': listStyles[style] }
   }, { autocomplete: [`list-(${Object.keys(listStyles).join('|')})`, `list-(${Object.keys(listStyles).join('|')})-(outside|inside)`] }],
   // styles
   ['list-outside', { 'list-style-position': 'outside' }],
   ['list-inside', { 'list-style-position': 'inside' }],
   ['list-none', { 'list-style-type': 'none' }],
-  ...makeGlobalStaticRules('list', 'list-style'),
+  ...makeGlobalStaticRules('list', 'list-style-type'),
 ]
 
 export const accents: Rule[] = [

packages/preset-wind/src/rules/divide.ts

@@ -1,5 +1,6 @@
 import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
+import { borderStyles } from '@unocss/preset-mini/rules'
 import { colorResolver, directionMap, handler as h } from '@unocss/preset-mini/utils'
 
 export const divides: Rule[] = [
@@ -16,11 +17,7 @@ export const divides: Rule[] = [
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-divide-opacity': h.bracket.percent(opacity) }), { autocomplete: ['divide-(op|opacity)', 'divide-(op|opacity)-<percent>'] }],
 
   // styles
-  ['divide-solid', { 'border-style': 'solid' }],
-  ['divide-dashed', { 'border-style': 'dashed' }],
-  ['divide-dotted', { 'border-style': 'dotted' }],
-  ['divide-double', { 'border-style': 'double' }],
-  ['divide-none', { 'border-style': 'none' }],
+  ...borderStyles.map(style => [`divide-${style}`, { 'border-style': style }] as Rule),
 ]
 
 function handlerDivide([, d, s]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {

packages/preset-wind/src/rules/line-clamp.ts

@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import { globalKeywords } from '@unocss/preset-mini/utils'
 
 export const lineClamps: Rule[] = [
   [/^line-clamp-(\d+)$/, ([, v]) => ({
@@ -8,8 +9,9 @@ export const lineClamps: Rule[] = [
     '-webkit-line-clamp': v,
     'line-clamp': v,
   }), { autocomplete: ['line-clamp', 'line-clamp-<num>'] }],
-  ['line-clamp-none', {
-    '-webkit-line-clamp': 'unset',
-    'line-clamp': 'unset',
-  }],
+
+  ...['none', ...globalKeywords].map(keyword => [`line-clamp-${keyword}`, {
+    '-webkit-line-clamp': keyword,
+    'line-clamp': keyword,
+  }] as Rule),
 ]

test/__snapshots__/autocomplete.test.ts.snap

@@ -44,7 +44,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "origin-": "origin-b origin-bc origin-bl origin-bottom origin-bottom-center origin-bottom-left origin-bottom-right origin-br origin-c origin-cb",
   "outline-": "outline-amber outline-auto outline-black outline-blue outline-bluegray outline-blueGray outline-coolgray outline-coolGray outline-current outline-cyan",
   "outline-offset-": "outline-offset-0 outline-offset-1 outline-offset-2 outline-offset-3 outline-offset-4 outline-offset-5 outline-offset-6 outline-offset-8 outline-offset-10 outline-offset-12",
-  "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@light: placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction placeholder-animate-duration placeholder-animate-none",
+  "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@light: placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction placeholder-animate-duration placeholder-animate-inherit",
   "scroll-": "scroll-auto scroll-block scroll-inherit scroll-initial scroll-inline scroll-m scroll-ma scroll-p scroll-pa scroll-revert",
   "scroll-m-": "scroll-m-2xl scroll-m-3xl scroll-m-4xl scroll-m-5xl scroll-m-6xl scroll-m-7xl scroll-m-8xl scroll-m-9xl scroll-m-b scroll-m-be",
   "shadow-": "shadow-2xl shadow-amber shadow-black shadow-blue shadow-bluegray shadow-blueGray shadow-coolgray shadow-coolGray shadow-current shadow-cyan",

test/__snapshots__/preset-mini.test.ts.snap

@@ -300,9 +300,11 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .lh-\\\\$variable{line-height:var(--variable);}
 .leading-inherit{line-height:inherit;}
 .lh-\\\\[1\\\\.5\\\\]{line-height:1.5;}
-.font-synthesis-inherit{font-synthesis:inherit;}
-.font-synthesis-small-caps{font-synthesis:small-caps;}
 .font-synthesis-weight{font-synthesis:weight;}
+.font-synthesis-small-caps{font-synthesis:small-caps;}
+.font-synthesis-\\\\[weight_style\\\\]{font-synthesis:weight style;}
+.font-synthesis-\\\\$synth{font-synthesis:var(--synth);}
+.font-synthesis-inherit{font-synthesis:inherit;}
 .font-tracking-1em{letter-spacing:1em;}
 .tracking-\\\\[2\\\\/5\\\\]{letter-spacing:2/5;}
 .tracking-\\\\$variable{letter-spacing:var(--variable);}

test/__snapshots__/preset-wind.test.ts.snap

@@ -44,7 +44,8 @@ exports[`preset-wind > targets 1`] = `
 .not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;}
 .line-clamp-100{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:100;line-clamp:100;}
 .line-clamp-7{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;}
-.line-clamp-none{-webkit-line-clamp:unset;line-clamp:unset;}
+.line-clamp-none{-webkit-line-clamp:none;line-clamp:none;}
+.line-clamp-unset{-webkit-line-clamp:unset;line-clamp:unset;}
 .isolate{isolation:isolate;}
 .isolate-auto,
 .isolation-auto{isolation:auto;}
@@ -112,6 +113,8 @@ exports[`preset-wind > targets 1`] = `
 .animate-play-state-running,
 .animate-state-running{animation-play-state:running;}
 .animate-none{animation:none;}
+.animate-inherit{animation:inherit;}
+.animate-unset{animation:unset;}
 .touch-pan-left{--un-pan-x:pan-left;touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);}
 .touch-pan-y{--un-pan-y:pan-y;touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);}
 .touch-pinch-zoom{--un-pinch-zoom:pinch-zoom;touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);}
@@ -143,11 +146,13 @@ exports[`preset-wind > targets 1`] = `
 .scroll-pbs2{scroll-padding-block-start:0.5rem;}
 .scroll-pis-10px{scroll-padding-inline-start:10px;}
 .list-alpha{list-style-type:lower-alpha;}
+.list-alpha-inside{list-style-position:inside;list-style-type:lower-alpha;}
 .list-disc{list-style-type:disc;}
+.list-disc-outside{list-style-position:outside;list-style-type:disc;}
 .list-greek{list-style-type:lower-greek;}
 .list-outside{list-style-position:outside;}
 .list-none{list-style-type:none;}
-.list-inherit{list-style:inherit;}
+.list-inherit{list-style-type:inherit;}
 .columns-\\\\[3_auto\\\\]{columns:3 auto;}
 .columns-\\\\[auto_13em\\\\]{columns:auto 13em;}
 .columns-\\\\[auto_auto\\\\]{columns:auto auto;}
@@ -190,6 +195,7 @@ exports[`preset-wind > targets 1`] = `
 .divide-dashed>:not([hidden])~:not([hidden]){border-style:dashed;}
 .divide-dotted>:not([hidden])~:not([hidden]){border-style:dotted;}
 .divide-none>:not([hidden])~:not([hidden]){border-style:none;}
+.divide-ridge>:not([hidden])~:not([hidden]){border-style:ridge;}
 .overscroll-contain{overscroll-behavior:contain;}
 .overscroll-none{overscroll-behavior:none;}
 .overscroll-revert-layer{overscroll-behavior:revert-layer;}

test/assets/preset-mini-targets.ts

@@ -721,6 +721,8 @@ export const presetMiniTargets: string[] = [
   'font-50',
   'font-synthesis-weight',
   'font-synthesis-small-caps',
+  'font-synthesis-[weight_style]',
+  'font-synthesis-$synth',
   'font-synthesis-inherit',
   'font-inherit',
   'fw-900',

test/assets/preset-wind-targets.ts

@@ -40,6 +40,8 @@ export const presetWindTargets: string[] = [
   'animate-ease-[steps(4,_jump-start)]',
   'animate-$variable',
   'animate-[4s_linear_0s_infinite_alternate_move\\_eye]',
+  'animate-inherit',
+  'animate-unset',
 
   // background
   'bg-auto',
@@ -124,6 +126,8 @@ export const presetWindTargets: string[] = [
   'list-alpha',
   'list-greek',
   'list-outside',
+  'list-disc-outside',
+  'list-alpha-inside',
   'list-inherit',
   'box-decoration-slice',
   'box-decoration-initial',
@@ -170,6 +174,7 @@ export const presetWindTargets: string[] = [
   'divide-opacity-50',
   'divide-dashed',
   'divide-dotted',
+  'divide-ridge',
   'divide-transparent',
   'divide-current',
   'divide-none',
@@ -238,6 +243,7 @@ export const presetWindTargets: string[] = [
   'line-clamp-7',
   'line-clamp-100',
   'line-clamp-none',
+  'line-clamp-unset',
 
   // scrolls
   'snap-y',