diff --git a/packages/preset-mini/src/rules/align.ts b/packages/preset-mini/src/rules/align.ts index 82a8ff7ab8..e540e2a245 100644 --- 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 = { '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 index 273a22ca33..511fe2d582 100644 --- 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[] = [ // size @@ -14,7 +14,7 @@ export const outline: Rule[] = [ // 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), + ...['auto', 'dashed', 'dotted', 'double', 'hidden', 'solid', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords].map(v => [`outline-${v}`, { 'outline-style': v }] as Rule), ['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 index 8927312e79..1cdf74399f 100644 --- 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 index efc201e9c7..6f1152feb6 100644 --- 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[] = [ [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ 'text-decoration-line': s }), { autocomplete: 'decoration-(underline|overline|line-through)' }], @@ -25,7 +27,8 @@ export const textDecorations: Rule[] = [ [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.px(s) }), { autocomplete: '(underline|decoration)-(offset)-' }], // 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), + ...decorationStyles.map(v => [`decoration-${v}`, { 'text-decoration-style': v }] as Rule), ['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 index 55dab0a013..ee33c7ac39 100644 --- 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 = { @@ -42,7 +43,10 @@ export const transitions: Rule[] = [ // 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 index 0069dd687f..c07c2f9548 100644 --- 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 index acf6833c0f..2cf93bc7be 100644 --- a/packages/preset-mini/src/utils/mappings.ts +++ b/packages/preset-mini/src/utils/mappings.ts @@ -97,3 +97,11 @@ export const positionMap: Record = 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 index 6ff4d7ca1e..bf47fd21f5 100644 --- a/packages/preset-wind/src/rules/animation.ts +++ b/packages/preset-wind/src/rules/animation.ts @@ -28,35 +28,35 @@ export const animations: Rule[] = [ [/^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)-'] }], - [/^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 index d6cfce0337..029594eea6 100644 --- 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 index 5d5b6044d8..2c21ae629a 100644 --- 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 index 2fc271862a..6ea62f76a6 100644 --- 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',