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

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

@@ -13,10 +13,11 @@ const verticalAlignAlias: Record<string, string> = {
   'text-bottom': 'text-bottom',
   'sub': 'sub',
   'super': 'super',
+  ...Object.fromEntries(globalKeywords.map(x => [x, x])),
 }
 
 export const verticalAligns: Rule[] = [
-  [/^(?:vertical|align|v)-(.+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
+  [/^(?:vertical|align|v)-([-\w]+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
 ]
 
 export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end', ...globalKeywords].map(v => [`text-${v}`, { 'text-align': v }])

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

@@ -4,13 +4,13 @@ import { colorResolver, globalKeywords, handler as h } from '../utils'
 
 export const outline: Rule<Theme>[] = [
   // size
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ 'outline-width': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'outline-(width|size)-<num>' }],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ 'outline-width': theme.lineWidth?.[d] ?? h.bracket.cssvar.global.px(d) }), { autocomplete: 'outline-(width|size)-<num>' }],
 
   // color
   [/^outline-(?:color-)?(.+)$/, colorResolver('outline-color', 'outline-color'), { autocomplete: 'outline-$colors' }],
 
   // offset
-  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ 'outline-offset': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'outline-(offset)-<num>' }],
+  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ 'outline-offset': theme.lineWidth?.[d] ?? h.bracket.cssvar.global.px(d) }), { autocomplete: 'outline-(offset)-<num>' }],
 
   // style
   ['outline', { 'outline-style': 'solid' }],

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

@@ -96,7 +96,7 @@ function handlerBorder(m: string[], ctx: RuleContext): CSSEntries | undefined {
 }
 
 function handlerBorderSize([, a = '', b]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
-  const v = theme.lineWidth?.[b || 'DEFAULT'] ?? h.bracket.cssvar.px(b || '1')
+  const v = theme.lineWidth?.[b || 'DEFAULT'] ?? h.bracket.cssvar.global.px(b || '1')
   if (a in directionMap && v != null)
     return directionMap[a].map(i => [`border${i}-width`, v])
 }
@@ -117,7 +117,7 @@ function handlerBorderOpacity([, a = '', opacity]: string[]): CSSEntries | undef
 }
 
 function handlerRounded([, a = '', s]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
-  const v = theme.borderRadius?.[s || 'DEFAULT'] || h.bracket.cssvar.fraction.rem(s || '1')
+  const v = theme.borderRadius?.[s || 'DEFAULT'] || h.bracket.cssvar.global.fraction.rem(s || '1')
   if (a in cornerMap && v != null)
     return cornerMap[a].map(i => [`border${i}-radius`, v])
 }

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

@@ -8,7 +8,7 @@ export const textDecorations: Rule<Theme>[] = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ 'text-decoration-line': s }), { autocomplete: 'decoration-(underline|overline|line-through)' }],
 
   // size
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ 'text-decoration-thickness': theme.lineWidth?.[s] ?? h.bracket.cssvar.px(s) }), { autocomplete: '(underline|decoration)-<num>' }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ 'text-decoration-thickness': theme.lineWidth?.[s] ?? h.bracket.cssvar.global.px(s) }), { autocomplete: '(underline|decoration)-<num>' }],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ 'text-decoration-thickness': s }), { autocomplete: '(underline|decoration)-(auto|from-font)' }],
 
   // colors
@@ -24,7 +24,7 @@ export const textDecorations: Rule<Theme>[] = [
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-line-opacity': h.bracket.percent(opacity) }), { autocomplete: '(underline|decoration)-(op|opacity)-<percent>' }],
 
   // offset
-  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.px(s) }), { autocomplete: '(underline|decoration)-(offset)-<num>' }],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.global.px(s) }), { autocomplete: '(underline|decoration)-(offset)-<num>' }],
 
   // style
   ...decorationStyles.map(v => [`underline-${v}`, { 'text-decoration-style': v }] as Rule<Theme>),

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

@@ -9,7 +9,7 @@ const directions: Record<string, string> = {
 }
 
 const handleGap = ([, d = '', s]: string[], { theme }: RuleContext<Theme>) => {
-  const v = theme.spacing?.[s] ?? h.bracket.cssvar.rem(s)
+  const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.rem(s)
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,

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

@@ -1,11 +1,13 @@
 import type { Rule } from '@unocss/core'
+import { globalKeywords } from '../utils'
 
 const overflowValues = [
   'auto',
   'hidden',
   'clip',
   'visible',
   'scroll',
+  ...globalKeywords,
 ]
 
 export const overflows: Rule[] = [

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

@@ -1,9 +1,10 @@
 import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '../theme'
-import { handler as h, insetMap } from '../utils'
+import { globalKeywords, handler as h, insetMap, makeGlobalStaticRules } from '../utils'
 
 export const positions: Rule[] = [
   [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
+  [/^(?:position-|pos-)([-\w]+)$/, ([, v]) => globalKeywords.includes(v) ? { position: v } : undefined],
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })],
 ]
 
@@ -15,19 +16,22 @@ export const justifies: Rule[] = [
   ['justify-between', { 'justify-content': 'space-between' }],
   ['justify-around', { 'justify-content': 'space-around' }],
   ['justify-evenly', { 'justify-content': 'space-evenly' }],
+  ...makeGlobalStaticRules('justify', 'justify-content'),
 
   // items
   ['justify-items-start', { 'justify-items': 'start' }],
   ['justify-items-end', { 'justify-items': 'end' }],
   ['justify-items-center', { 'justify-items': 'center' }],
   ['justify-items-stretch', { 'justify-items': 'stretch' }],
+  ...makeGlobalStaticRules('justify-items'),
 
   // selfs
   ['justify-self-auto', { 'justify-self': 'auto' }],
   ['justify-self-start', { 'justify-self': 'start' }],
   ['justify-self-end', { 'justify-self': 'end' }],
   ['justify-self-center', { 'justify-self': 'center' }],
   ['justify-self-stretch', { 'justify-self': 'stretch' }],
+  ...makeGlobalStaticRules('justify-self'),
 ]
 
 export const orders: Rule[] = [
@@ -45,13 +49,15 @@ export const alignments: Rule[] = [
   ['content-between', { 'align-content': 'space-between' }],
   ['content-around', { 'align-content': 'space-around' }],
   ['content-evenly', { 'align-content': 'space-evenly' }],
+  ...makeGlobalStaticRules('content', 'align-content'),
 
   // items
   ['items-start', { 'align-items': 'flex-start' }],
   ['items-end', { 'align-items': 'flex-end' }],
   ['items-center', { 'align-items': 'center' }],
   ['items-baseline', { 'align-items': 'baseline' }],
   ['items-stretch', { 'align-items': 'stretch' }],
+  ...makeGlobalStaticRules('items', 'align-items'),
 
   // selfs
   ['self-auto', { 'align-self': 'auto' }],
@@ -60,6 +66,7 @@ export const alignments: Rule[] = [
   ['self-center', { 'align-self': 'center' }],
   ['self-stretch', { 'align-self': 'stretch' }],
   ['self-baseline', { 'align-self': 'baseline' }],
+  ...makeGlobalStaticRules('self', 'align-self'),
 ]
 
 export const placements: Rule[] = [
@@ -71,23 +78,26 @@ export const placements: Rule[] = [
   ['place-content-around', { 'place-content': 'space-around' }],
   ['place-content-evenly', { 'place-content': 'space-evenly' }],
   ['place-content-stretch', { 'place-content': 'stretch' }],
+  ...makeGlobalStaticRules('place-content'),
 
   // items
   ['place-items-start', { 'place-items': 'start' }],
   ['place-items-end', { 'place-items': 'end' }],
   ['place-items-center', { 'place-items': 'center' }],
   ['place-items-stretch', { 'place-items': 'stretch' }],
+  ...makeGlobalStaticRules('place-items'),
 
   // selfs
   ['place-self-auto', { 'place-self': 'auto' }],
   ['place-self-start', { 'place-self': 'start' }],
   ['place-self-end', { 'place-self': 'end' }],
   ['place-self-center', { 'place-self': 'center' }],
   ['place-self-stretch', { 'place-self': 'stretch' }],
+  ...makeGlobalStaticRules('place-self'),
 ]
 
 function handleInsetValue(v: string, { theme }: RuleContext<Theme>): string | number | undefined {
-  return theme.spacing?.[v] ?? h.bracket.cssvar.auto.fraction.rem(v)
+  return theme.spacing?.[v] ?? h.bracket.cssvar.global.auto.fraction.rem(v)
 }
 
 function handleInsetValues([, d, v]: string[], ctx: RuleContext): CSSEntries | undefined {
@@ -119,20 +129,23 @@ export const floats: Rule[] = [
   ['float-left', { float: 'left' }],
   ['float-right', { float: 'right' }],
   ['float-none', { float: 'none' }],
+  ...makeGlobalStaticRules('float'),
 
   // clears
   ['clear-left', { clear: 'left' }],
   ['clear-right', { clear: 'right' }],
   ['clear-both', { clear: 'both' }],
   ['clear-none', { clear: 'none' }],
+  ...makeGlobalStaticRules('clear'),
 ]
 
 export const zIndexes: Rule[] = [
   [/^z([\d.]+)$/, ([, v]) => ({ 'z-index': h.number(v) })],
-  [/^z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.auto.number(v) }), { autocomplete: 'z-<num>' }],
+  [/^z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.global.auto.number(v) }), { autocomplete: 'z-<num>' }],
 ]
 
 export const boxSizing: Rule[] = [
   ['box-border', { 'box-sizing': 'border-box' }],
   ['box-content', { 'box-sizing': 'content-box' }],
+  ...makeGlobalStaticRules('box', 'box-sizing'),
 ]

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

@@ -28,7 +28,7 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {
       return `${prop}-content`
   }
 
-  return h.bracket.cssvar.auto.fraction.rem(prop)
+  return h.bracket.cssvar.global.auto.fraction.rem(prop)
 }
 
 export const sizes: Rule<Theme>[] = [
@@ -60,7 +60,7 @@ function getAspectRatio(prop: string) {
     case 'video': return '16/9'
   }
 
-  return h.bracket.cssvar.auto.number(prop)
+  return h.bracket.cssvar.global.auto.number(prop)
 }
 
 export const aspectRatio: Rule[] = [

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

@@ -1,5 +1,5 @@
 import type { Rule } from '@unocss/core'
-import { handler as h } from '../utils'
+import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils'
 
 export const varEmpty = 'var(--un-empty,/*!*/ /*!*/)'
 
@@ -12,41 +12,49 @@ export const displays: Rule[] = [
   ['flow-root', { display: 'flow-root' }],
   ['list-item', { display: 'list-item' }],
   ['hidden', { display: 'none' }],
-  [/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar(c) || c })],
+  [/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar.global(c) || c })],
 ]
 
 export const appearances: Rule[] = [
   ['visible', { visibility: 'visible' }],
   ['invisible', { visibility: 'hidden' }],
   ['backface-visible', { 'backface-visibility': 'visible' }],
   ['backface-hidden', { 'backface-visibility': 'hidden' }],
+  ...makeGlobalStaticRules('backface', 'backface-visibility'),
 ]
 
 export const cursors: Rule[] = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar(c) || c })],
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar.global(c) || c })],
 ]
 
 export const pointerEvents: Rule[] = [
   ['pointer-events-auto', { 'pointer-events': 'auto' }],
   ['pointer-events-none', { 'pointer-events': 'none' }],
+  ...makeGlobalStaticRules('pointer-events'),
 ]
 
 export const resizes: Rule[] = [
   ['resize-x', { resize: 'horizontal' }],
   ['resize-y', { resize: 'vertical' }],
   ['resize', { resize: 'both' }],
   ['resize-none', { resize: 'none' }],
+  ...makeGlobalStaticRules('resize'),
 ]
 
 export const userSelects: Rule[] = [
   ['select-auto', { 'user-select': 'auto' }],
   ['select-all', { 'user-select': 'all' }],
   ['select-text', { 'user-select': 'text' }],
   ['select-none', { 'user-select': 'none' }],
+  ...makeGlobalStaticRules('select', 'user-select'),
 ]
 
 export const whitespaces: Rule[] = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)$/, ([, v]) => ({ 'white-space': v }), { autocomplete: '(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)' }],
+  [
+    /^(?:whitespace-|ws-)([-\w]+)$/,
+    ([, v]) => ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces', ...globalKeywords].includes(v) ? { 'white-space': v } : undefined,
+    { autocomplete: '(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)' },
+  ],
 ]
 
 export const contents: Rule[] = [
@@ -73,6 +81,7 @@ export const textTransforms: Rule[] = [
   ['case-lower', { 'text-transform': 'lowercase' }],
   ['case-capital', { 'text-transform': 'capitalize' }],
   ['case-normal', { 'text-transform': 'none' }],
+  ...makeGlobalStaticRules('case', 'text-transform'),
 ]
 
 export const fontStyles: Rule[] = [

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

@@ -1,6 +1,6 @@
 import type { CSSValues, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '../theme'
-import { handler as h, positionMap, xyzMap } from '../utils'
+import { handler as h, makeGlobalStaticRules, positionMap, xyzMap } from '../utils'
 
 const transformCpu = [
   'translateX(var(--un-translate-x))',
@@ -90,6 +90,7 @@ export const transforms: Rule[] = [
   ['transform-cpu', { transform: transformCpu }],
   ['transform-gpu', { transform: transformGpu }],
   ['transform-none', { transform: 'none' }],
+  ...makeGlobalStaticRules('transform'),
 ]
 
 function handleTranslate([, d, b]: string[], { theme }: RuleContext<Theme>): CSSValues | undefined {

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

@@ -1,6 +1,6 @@
 import type { Rule } from '@unocss/core'
 import type { Theme } from '../theme'
-import { globalKeywords, handler as h } from '../utils'
+import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils'
 
 const transitionPropertyGroup: Record<string, string> = {
   all: 'all',
@@ -35,15 +35,21 @@ export const transitions: Rule<Theme>[] = [
   [/^(?:transition-)?duration-(.+)$/,
     ([, d], { theme }) => ({ 'transition-duration': theme.duration?.[d || 'DEFAULT'] ?? h.bracket.cssvar.time(d) }),
     { autocomplete: ['transition-duration-$duration', 'duration-$duration'] }],
-  [/^(?:transition-)?delay-(.+)$/, ([, d], { theme }) => ({ 'transition-delay': theme.duration?.[d || 'DEFAULT'] ?? h.bracket.cssvar.time(d) }),
+
+  [/^(?:transition-)?delay-(.+)$/,
+    ([, d], { theme }) => ({ 'transition-delay': theme.duration?.[d || 'DEFAULT'] ?? h.bracket.cssvar.time(d) }),
     { autocomplete: ['transition-delay-$duration', 'delay-$duration'] }],
-  [/^(?:transition-)?ease(?:-(.+))?$/, ([, d], { theme }) => ({ 'transition-timing-function': theme.easing?.[d || 'DEFAULT'] ?? h.bracket.cssvar(d) }),
+
+  [/^(?:transition-)?ease(?:-(.+))?$/,
+    ([, d], { theme }) => ({ 'transition-timing-function': theme.easing?.[d || 'DEFAULT'] ?? h.bracket.cssvar(d) }),
     { autocomplete: ['transition-ease-(linear|in|out|in-out|DEFAULT)', 'ease-(linear|in|out|in-out|DEFAULT)'] }],
 
   // props
-  [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ 'transition-property': h.global(v) || transitionProperty(v) }),
+  [/^(?:transition-)?property-(.+)$/,
+    ([, v]) => ({ 'transition-property': h.global(v) || transitionProperty(v) }),
     { autocomplete: [`transition-property-(${[...globalKeywords, ...Object.keys(transitionPropertyGroup)].join('|')})`] }],
 
   // none
   ['transition-none', { transition: 'none' }],
+  ...makeGlobalStaticRules('transition'),
 ]

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

@@ -43,7 +43,7 @@ export const fonts: Rule<Theme>[] = [
   ],
   [/^text-size-(.+)$/, ([, s], { theme }) => {
     const themed = toArray(theme.fontSize?.[s])
-    const size = themed?.[0] ?? h.bracket.cssvar.rem(s)
+    const size = themed?.[0] ?? h.bracket.cssvar.global.rem(s)
     if (size != null)
       return { 'font-size': size }
   }, { autocomplete: 'text-size-$fontSize' }],
@@ -119,7 +119,7 @@ export const textShadows: Rule<Theme>[] = [
         'text-shadow': 'var(--un-text-shadow)',
       }
     }
-    return { 'text-shadow': h.bracket.cssvar(s) }
+    return { 'text-shadow': h.bracket.cssvar.global(s) }
   }, { autocomplete: 'text-shadow-$textShadow' }],
 
   // colors

packages/preset-mini/src/utils/utilities.ts

@@ -1,9 +1,9 @@
-import type { CSSEntries, CSSObject, ParsedColorValue, RuleContext, VariantContext } from '@unocss/core'
+import type { CSSEntries, CSSObject, ParsedColorValue, Rule, RuleContext, VariantContext } from '@unocss/core'
 import { toArray } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, getComponents, parseCssColor } from './colors'
 import { handler as h } from './handlers'
-import { directionMap } from './mappings'
+import { directionMap, globalKeywords } from './mappings'
 
 export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
 
@@ -15,7 +15,7 @@ export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
  * @see {@link directionMap}
  */
 export const directionSize = (propertyPrefix: string) => ([_, direction, size]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined => {
-  const v = theme.spacing?.[size || 'DEFAULT'] ?? h.bracket.cssvar.auto.fraction.rem(size)
+  const v = theme.spacing?.[size || 'DEFAULT'] ?? h.bracket.cssvar.global.auto.fraction.rem(size)
   if (v != null)
     return directionMap[direction].map(i => [`${propertyPrefix}${i}`, v])
 }
@@ -200,3 +200,8 @@ export const resolveVerticalBreakpoints = ({ theme, generator }: Readonly<Varian
 
   return verticalBreakpoints
 }
+
+export const makeGlobalStaticRules = (prefix: string, property?: string) => {
+  return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }] as Rule)
+}
+