feat(preset-mini,preset-wind): add revert-layer global keyword (#1023)

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

@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import { globalKeywords } from '../utils/mappings'
 
 const verticalAlignAlias: Record<string, string> = {
   'mid': 'middle',
@@ -18,4 +19,4 @@ export const verticalAligns: Rule[] = [
   [/^(?:vertical|align|v)-(.+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
 ]
 
-export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end', 'inherit', 'initial', 'unset', 'revert'].map(v => [`text-${v}`, { 'text-align': v }])
+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

@@ -1,6 +1,6 @@
 import type { Rule } from '@unocss/core'
 import type { Theme } from '../theme'
-import { colorResolver, handler as h } from '../utils'
+import { colorResolver, globalKeywords, handler as h } from '../utils'
 
 export const outline: Rule<Theme>[] = [
   // size
@@ -14,7 +14,7 @@ export const outline: Rule<Theme>[] = [
 
   // style
   ['outline', { 'outline-style': 'solid' }],
-  ...['auto', 'dashed', 'dotted', 'double', 'hidden', 'solid', 'groove', 'ridge', 'inset', 'outset', 'inherit', 'initial', 'revert', 'unset'].map(v => [`outline-${v}`, { 'outline-style': v }] as Rule<Theme>),
+  ...['auto', 'dashed', 'dotted', 'double', 'hidden', 'solid', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords].map(v => [`outline-${v}`, { 'outline-style': v }] as Rule<Theme>),
   ['outline-none', { 'outline': '2px solid transparent', 'outline-offset': '2px' }],
 ]
 

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

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

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

@@ -1,6 +1,8 @@
 import type { CSSObject, Rule } from '@unocss/core'
 import type { Theme } from '../theme'
-import { colorResolver, handler as h } from '../utils'
+import { colorResolver, globalKeywords, handler as h } from '../utils'
+
+const decorationStyles = ['solid', 'double', 'dotted', 'dashed', 'wavy', ...globalKeywords]
 
 export const textDecorations: Rule<Theme>[] = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ 'text-decoration-line': s }), { autocomplete: 'decoration-(underline|overline|line-through)' }],
@@ -25,7 +27,8 @@ export const textDecorations: Rule<Theme>[] = [
   [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.px(s) }), { autocomplete: '(underline|decoration)-(offset)-<num>' }],
 
   // style
-  [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ 'text-decoration-style': d }), { autocomplete: '(underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)' }],
+  ...decorationStyles.map(v => [`underline-${v}`, { 'text-decoration-style': v }] as Rule<Theme>),
+  ...decorationStyles.map(v => [`decoration-${v}`, { 'text-decoration-style': v }] as Rule<Theme>),
   ['no-underline', { 'text-decoration': 'none' }],
   ['decoration-none', { 'text-decoration': 'none' }],
 ]

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

@@ -1,6 +1,6 @@
 import type { Rule } from '@unocss/core'
 import type { Theme } from '../theme'
-import { handler as h } from '../utils'
+import { globalKeywords, handler as h } from '../utils'
 
 const transitionPropertyGroup: Record<string, string> = {
   all: 'all',
@@ -42,7 +42,7 @@ export const transitions: Rule<Theme>[] = [
 
   // props
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ 'transition-property': h.global(v) || transitionProperty(v) }),
-    { autocomplete: [`transition-property-(${['inherit', 'initial', 'revert', 'unset', ...Object.keys(transitionPropertyGroup)].join('|')})`] }],
+    { autocomplete: [`transition-property-(${[...globalKeywords, ...Object.keys(transitionPropertyGroup)].join('|')})`] }],
 
   // none
   ['transition-none', { transition: 'none' }],

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

@@ -1,4 +1,5 @@
 import { escapeSelector } from '@unocss/core'
+import { globalKeywords } from '../mappings'
 
 // Not all, but covers most high frequency attributes
 const cssProps = [
@@ -157,7 +158,7 @@ export function degree(str: string) {
 }
 
 export function global(str: string) {
-  if (['inherit', 'initial', 'revert', 'unset'].includes(str))
+  if (globalKeywords.includes(str))
     return str
 }
 

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

@@ -97,3 +97,11 @@ export const positionMap: Record<string, string> = Object.assign(
   // [{ t: 'top' }, { tc: 'top center' }, ...]
   ...basePositionMap.map(p => ({ [p.replace(/\b(\w)\w+/g, '$1').replace(/ /, '')]: p })),
 )
+
+export const globalKeywords = [
+  'inherit',
+  'initial',
+  'revert',
+  'revert-layer',
+  'unset',
+]

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

@@ -28,35 +28,35 @@ 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|unset)$/, ([, d]) => ({ 'animation-fill-mode': d }),
+  [/^animate-(?:fill-|mode-|fill-mode-)?(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-fill-mode': d }),
     {
       autocomplete: [
         'animate-(fill|mode|fill-mode)',
-        'animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|unset)',
-        'animate-(none|forwards|backwards|both|inherit|initial|revert|unset)',
+        'animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)',
+        'animate-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)',
       ],
     },
   ],
 
   // direction
-  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)$/, ([, d]) => ({ 'animation-direction': d }),
+  [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-direction': d }),
     {
       autocomplete: [
         'animate-direction',
-        'animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)',
-        'animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|unset)',
+        'animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)',
+        'animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)',
       ],
     },
   ],
 
   // 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|unset)$/, ([, d]) => ({ 'animation-play-state': d }),
+  [/^animate-(?:play-|state-|play-state-)?(paused|running|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-play-state': d }),
     {
       autocomplete: [
         'animate-(play|state|play-state)',
-        'animate-(play|state|play-state)-(paused|running|inherit|initial|revert|unset)',
-        'animate-(paused|running|inherit|initial|revert|unset)',
+        'animate-(play|state|play-state)-(paused|running|inherit|initial|revert|revert-layer|unset)',
+        'animate-(paused|running|inherit|initial|revert|revert-layer|unset)',
       ],
     }],
   ['animate-none', { animation: 'none' }],

test/__snapshots__/autocomplete.test.ts.snap

@@ -26,7 +26,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "bg-r": "bg-red bg-repeat bg-repeat-round bg-repeat-space bg-repeat-x bg-repeat-y bg-rose",
   "border": "border border-collapse border-separate border-spacing border-style",
   "border-": "border-0 border-1 border-2 border-3 border-4 border-5 border-6 border-8 border-10 border-12",
-  "border-r": "border-r border-r-style border-rd border-red border-revert border-ridge border-rose border-rounded",
+  "border-r": "border-r border-r-style border-rd border-red border-revert border-revert-layer border-ridge border-rose border-rounded",
   "border-spacing-": "border-spacing-2xl border-spacing-3xl border-spacing-4xl border-spacing-5xl border-spacing-6xl border-spacing-7xl border-spacing-8xl border-spacing-9xl border-spacing-lg border-spacing-none",
   "columns-": "columns-0 columns-1 columns-2 columns-3 columns-4 columns-5 columns-6 columns-8 columns-10 columns-12",
   "divide-": "divide-amber divide-black divide-block divide-block-reverse divide-blue divide-bluegray divide-blueGray divide-coolgray divide-coolGray divide-current",
@@ -49,7 +49,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "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",
   "space-": "space-block space-block-reverse space-inline space-inline-reverse space-x space-x-reverse space-y space-y-reverse",
-  "text-r": "text-red text-revert text-right text-rose",
+  "text-r": "text-red text-revert text-revert-layer text-right text-rose",
   "text-red-": "text-red-1 text-red-2 text-red-3 text-red-4 text-red-5 text-red-6 text-red-7 text-red-8 text-red-9 text-red-50",
   "touch-": "touch-auto touch-manipulation touch-none touch-pan touch-pinch touch-pinch-zoom",
   "transition-": "transition-all transition-colors transition-none transition-opacity transition-shadow transition-transform",

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

@@ -228,6 +228,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .b-solid,
 .border-solid{border-style:solid;}
 .border-x-dashed{border-left-style:dashed;border-right-style:dashed;}
+.border-y-revert-layer{border-top-style:revert-layer;border-bottom-style:revert-layer;}
 .border-y-unset{border-top-style:unset;border-bottom-style:unset;}
 .border-b-dashed{border-bottom-style:dashed;}
 .border-e-dashed{border-inline-end-style:dashed;}
@@ -293,6 +294,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .indent{text-indent:1.5rem;}
 .indent-1\\\\/2{text-indent:50%;}
 .indent-lg{text-indent:2rem;}
+.indent-revert-layer{text-indent:revert-layer;}
 .indent-unset{text-indent:unset;}
 .text-clip{text-overflow:clip;}
 .decoration-underline,
@@ -632,6 +634,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .outline-solid{outline-style:solid;}
 .outline-hidden{outline-style:hidden;}
 .outline-inset{outline-style:inset;}
+.outline-revert-layer{outline-style:revert-layer;}
 .outline-unset{outline-style:unset;}
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .appearance-none{appearance:none;-webkit-appearance:none;}

test/assets/preset-mini-targets.ts

@@ -19,6 +19,7 @@ export const presetMiniTargets: string[] = [
   'outline-offset-4',
   'outline-offset-none',
   'outline-unset',
+  'outline-revert-layer',
   'outline-solid',
   'outline-color-red-1',
   'outline-width-10px',
@@ -92,6 +93,7 @@ export const presetMiniTargets: string[] = [
   'border-e-dashed',
   'border-x-dashed',
   'border-y-unset',
+  'border-y-revert-layer',
   'border-is-style-double',
   'border-block-style-double',
 
@@ -665,6 +667,7 @@ export const presetMiniTargets: string[] = [
   'indent-1/2',
   'indent-lg',
   'indent-unset',
+  'indent-revert-layer',
   'text-stroke-6',
   'text-stroke-sm',
   'text-stroke-blue-500',

test/preset-uno.test.ts

@@ -86,6 +86,7 @@ const nonTargets = [
   'property-background-color,colour-300',
   'property-colour-background-color-300',
   'transition-unset',
+  'transition-revert-layer',
   'transition-colour',
   'transition-background-color,colour-300',
   'transition-colour,background-color-300',