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

unocss · May 29, 2022 · a416bf1 · a416bf1
1 parent a1d187b
commit a416bf1
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 18 deletions.
diff --git a/packages/preset-mini/src/rules/align.ts b/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 }])
diff --git a/packages/preset-mini/src/rules/behaviors.ts b/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' }],
 ]
 

diff --git a/packages/preset-mini/src/rules/border.ts b/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

diff --git a/packages/preset-mini/src/rules/decoration.ts b/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' }],
 ]
diff --git a/packages/preset-mini/src/rules/transition.ts b/packages/preset-mini/src/rules/transition.ts
@@ -1,5 +1,6 @@
 import type { Rule } from '@unocss/core'
 import type { Theme } from '../theme'
+import { globalKeywords } from '../utils'
 import { handler as h } from '../utils'
 
 const transitionPropertyGroup: Record<string, string> = {
@@ -42,7 +43,10 @@ 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' }],

diff --git a/packages/preset-mini/src/utils/handlers/handlers.ts b/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
 }
 

diff --git a/packages/preset-mini/src/utils/mappings.ts b/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',
+]
diff --git a/packages/preset-wind/src/rules/animation.ts b/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' }],

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/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,
@@ -631,6 +633,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;}

diff --git a/test/assets/preset-mini-targets.ts b/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',

diff --git a/test/preset-uno.test.ts b/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',