From 56e2b90683f37b414dcc102f13a99f252579aaf7 Mon Sep 17 00:00:00 2001 From: Saya Date: Sun, 29 May 2022 22:56:49 +0800 Subject: [PATCH] feat(preset-mini,preset-wind): add `revert-layer` global keyword (#1023) --- packages/preset-mini/src/rules/align.ts | 3 ++- packages/preset-mini/src/rules/behaviors.ts | 4 ++-- packages/preset-mini/src/rules/border.ts | 4 ++-- packages/preset-mini/src/rules/decoration.ts | 7 +++++-- packages/preset-mini/src/rules/transition.ts | 4 ++-- .../preset-mini/src/utils/handlers/handlers.ts | 3 ++- packages/preset-mini/src/utils/mappings.ts | 8 ++++++++ packages/preset-wind/src/rules/animation.ts | 18 +++++++++--------- test/__snapshots__/autocomplete.test.ts.snap | 4 ++-- test/__snapshots__/preset-mini.test.ts.snap | 3 +++ test/assets/preset-mini-targets.ts | 3 +++ test/preset-uno.test.ts | 1 + 12 files changed, 41 insertions(+), 21 deletions(-) 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..59cee8921d 100644 --- a/packages/preset-mini/src/rules/transition.ts +++ b/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 = { all: 'all', @@ -42,7 +42,7 @@ 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__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index 0783eab3d2..a30a5474b8 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/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", diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index a6ebeb5c23..62d542c4c6 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, @@ -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;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 2c9b60d346..e49d7ccf86 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 ff0304e730..a55500610e 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',