From bc630753b1cf06fd749b89fd79cb069e8b747ee7 Mon Sep 17 00:00:00 2001 From: Saya Date: Sun, 26 Jun 2022 11:21:25 +0800 Subject: [PATCH] feat(preset-mini,preset-wind)!: add global keywords --- packages/preset-mini/src/rules/border.ts | 2 +- packages/preset-mini/src/rules/typography.ts | 10 +++++----- packages/preset-mini/src/utils/utilities.ts | 9 +++++++-- packages/preset-wind/src/rules/animation.ts | 12 ++++++++---- packages/preset-wind/src/rules/behaviors.ts | 18 +++++++++++------- packages/preset-wind/src/rules/divide.ts | 7 ++----- packages/preset-wind/src/rules/line-clamp.ts | 10 ++++++---- test/__snapshots__/autocomplete.test.ts.snap | 2 +- test/__snapshots__/preset-mini.test.ts.snap | 5 ++++- test/__snapshots__/preset-wind.test.ts.snap | 9 ++++++++- test/assets/preset-mini-targets.ts | 4 +++- test/assets/preset-wind-targets.ts | 7 +++++++ 12 files changed, 63 insertions(+), 32 deletions(-) diff --git a/packages/preset-mini/src/rules/border.ts b/packages/preset-mini/src/rules/border.ts index afad7bbaa8..dd54175e6c 100644 --- a/packages/preset-mini/src/rules/border.ts +++ b/packages/preset-mini/src/rules/border.ts @@ -2,7 +2,7 @@ import type { CSSEntries, CSSObject, Rule, RuleContext } from '@unocss/core' import type { Theme } from '../theme' import { colorOpacityToString, colorToString, cornerMap, directionMap, globalKeywords, handler as h, hasParseableColor, parseColor } from '../utils' -const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords] +export 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/typography.ts b/packages/preset-mini/src/rules/typography.ts index 294a205a29..55229c590a 100644 --- a/packages/preset-mini/src/rules/typography.ts +++ b/packages/preset-mini/src/rules/typography.ts @@ -63,11 +63,11 @@ export const fonts: Rule[] = [ ], // synthesis - [ - /^font-synthesis-(.+)$/, - ([, s]) => ({ 'font-synthesis': s }), - { autocomplete: 'font-synthesis-(none|weight|style|small-caps)' }, - ], + ['font-synthesis-weight', { 'font-synthesis': 'weight' }], + ['font-synthesis-style', { 'font-synthesis': 'style' }], + ['font-synthesis-small-caps', { 'font-synthesis': 'small-caps' }], + ['font-synthesis-none', { 'font-synthesis': 'none' }], + [/^font-synthesis-(.+)$/, ([, s]) => ({ 'font-synthesis': h.bracket.cssvar.global(s) })], // tracking [ diff --git a/packages/preset-mini/src/utils/utilities.ts b/packages/preset-mini/src/utils/utilities.ts index 1ce4ce6907..3fd951b310 100644 --- a/packages/preset-mini/src/utils/utilities.ts +++ b/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' @@ -200,3 +200,8 @@ export const resolveVerticalBreakpoints = ({ theme, generator }: Readonly { + return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }] as Rule) +} + diff --git a/packages/preset-wind/src/rules/animation.ts b/packages/preset-wind/src/rules/animation.ts index 2b0fd7b198..fa0efbc72b 100644 --- a/packages/preset-wind/src/rules/animation.ts +++ b/packages/preset-wind/src/rules/animation.ts @@ -1,5 +1,5 @@ import type { Rule } from '@unocss/core' -import { handler as h } from '@unocss/preset-mini/utils' +import { globalKeywords, handler as h, makeGlobalStaticRules } from '@unocss/preset-mini/utils' import type { Theme } from '@unocss/preset-mini' export const animations: Rule[] = [ @@ -38,7 +38,8 @@ 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|revert-layer|unset)$/, ([, d]) => ({ 'animation-fill-mode': d }), + [/^animate-(fill-mode-|fill-|mode-)?(.+)$/, + ([, t, d]) => ['none', 'forwards', 'backwards', 'both', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-fill-mode': d } : undefined, { autocomplete: [ 'animate-(fill|mode|fill-mode)', @@ -49,7 +50,8 @@ export const animations: Rule[] = [ ], // direction - [/^animate-(?:direction-)?(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)$/, ([, d]) => ({ 'animation-direction': d }), + [/^animate-(direction-)?(.+)$/, + ([, t, d]) => ['normal', 'reverse', 'alternate', 'alternate-reverse', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-direction': d } : undefined, { autocomplete: [ 'animate-direction', @@ -61,7 +63,8 @@ export const animations: Rule[] = [ // 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|revert-layer|unset)$/, ([, d]) => ({ 'animation-play-state': d }), + [/^animate-(play-state-|play-|state-)?(.+)$/, + ([, t, d]) => ['paused', 'running', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-play-state': d } : undefined, { autocomplete: [ 'animate-(play|state|play-state)', @@ -70,4 +73,5 @@ export const animations: Rule[] = [ ], }], ['animate-none', { animation: 'none' }], + ...makeGlobalStaticRules('animate', 'animation'), ] diff --git a/packages/preset-wind/src/rules/behaviors.ts b/packages/preset-wind/src/rules/behaviors.ts index 1bc5f1f190..64b1f11feb 100644 --- a/packages/preset-wind/src/rules/behaviors.ts +++ b/packages/preset-wind/src/rules/behaviors.ts @@ -1,5 +1,5 @@ import type { Rule } from '@unocss/core' -import { colorResolver, handler as h } from '@unocss/preset-mini/utils' +import { colorResolver, handler as h, makeGlobalStaticRules } from '@unocss/preset-mini/utils' const listStyles: Record = { 'disc': 'disc', @@ -18,19 +18,23 @@ const listStyles: Record = { export const listStyle: Rule[] = [ // base - [/^list-(.+)(?:-(outside|inside))?$/, ([, style, position]) => { - if (position != null) { - return { - 'list-style-position': position, - 'list-style-type': listStyles[style], + [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => { + const style = listStyles[alias] + if (style) { + if (position) { + return { + 'list-style-position': position, + 'list-style-type': style, + } } + return { 'list-style-type': style } } - return { 'list-style-type': listStyles[style] } }, { autocomplete: [`list-(${Object.keys(listStyles).join('|')})`, `list-(${Object.keys(listStyles).join('|')})-(outside|inside)`] }], // styles ['list-outside', { 'list-style-position': 'outside' }], ['list-inside', { 'list-style-position': 'inside' }], ['list-none', { 'list-style-type': 'none' }], + ...makeGlobalStaticRules('list', 'list-style-type'), ] export const accents: Rule[] = [ diff --git a/packages/preset-wind/src/rules/divide.ts b/packages/preset-wind/src/rules/divide.ts index b1bee38981..9dabadb018 100644 --- a/packages/preset-wind/src/rules/divide.ts +++ b/packages/preset-wind/src/rules/divide.ts @@ -1,5 +1,6 @@ import type { CSSEntries, Rule, RuleContext } from '@unocss/core' import type { Theme } from '@unocss/preset-mini' +import { borderStyles } from '@unocss/preset-mini/rules' import { colorResolver, directionMap, handler as h } from '@unocss/preset-mini/utils' export const divides: Rule[] = [ @@ -16,11 +17,7 @@ export const divides: Rule[] = [ [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-divide-opacity': h.bracket.percent(opacity) }), { autocomplete: ['divide-(op|opacity)', 'divide-(op|opacity)-'] }], // styles - ['divide-solid', { 'border-style': 'solid' }], - ['divide-dashed', { 'border-style': 'dashed' }], - ['divide-dotted', { 'border-style': 'dotted' }], - ['divide-double', { 'border-style': 'double' }], - ['divide-none', { 'border-style': 'none' }], + ...borderStyles.map(style => [`divide-${style}`, { 'border-style': style }] as Rule), ] function handlerDivide([, d, s]: string[], { theme }: RuleContext): CSSEntries | undefined { diff --git a/packages/preset-wind/src/rules/line-clamp.ts b/packages/preset-wind/src/rules/line-clamp.ts index ff41394a80..7c441f8e64 100644 --- a/packages/preset-wind/src/rules/line-clamp.ts +++ b/packages/preset-wind/src/rules/line-clamp.ts @@ -1,4 +1,5 @@ import type { Rule } from '@unocss/core' +import { globalKeywords } from '@unocss/preset-mini/utils' export const lineClamps: Rule[] = [ [/^line-clamp-(\d+)$/, ([, v]) => ({ @@ -8,8 +9,9 @@ export const lineClamps: Rule[] = [ '-webkit-line-clamp': v, 'line-clamp': v, }), { autocomplete: ['line-clamp', 'line-clamp-'] }], - ['line-clamp-none', { - '-webkit-line-clamp': 'unset', - 'line-clamp': 'unset', - }], + + ...['none', ...globalKeywords].map(keyword => [`line-clamp-${keyword}`, { + '-webkit-line-clamp': keyword, + 'line-clamp': keyword, + }] as Rule), ] diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index a30a9b2279..1cea1349fe 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/test/__snapshots__/autocomplete.test.ts.snap @@ -44,7 +44,7 @@ exports[`autocomplete > should provide autocomplete 1`] = ` "origin-": "origin-b origin-bc origin-bl origin-bottom origin-bottom-center origin-bottom-left origin-bottom-right origin-br origin-c origin-cb", "outline-": "outline-amber outline-auto outline-black outline-blue outline-bluegray outline-blueGray outline-coolgray outline-coolGray outline-current outline-cyan", "outline-offset-": "outline-offset-0 outline-offset-1 outline-offset-2 outline-offset-3 outline-offset-4 outline-offset-5 outline-offset-6 outline-offset-8 outline-offset-10 outline-offset-12", - "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@light: placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction placeholder-animate-duration placeholder-animate-none", + "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@light: placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction placeholder-animate-duration placeholder-animate-inherit", "scroll-": "scroll-auto scroll-block scroll-inline scroll-m scroll-ma scroll-p scroll-pa scroll-smooth", "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", diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 82885c8482..59c1963c13 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -285,8 +285,11 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .lh-\\\\$variable{line-height:var(--variable);} .leading-inherit{line-height:inherit;} .lh-\\\\[1\\\\.5\\\\]{line-height:1.5;} -.font-synthesis-small-caps{font-synthesis:small-caps;} .font-synthesis-weight{font-synthesis:weight;} +.font-synthesis-small-caps{font-synthesis:small-caps;} +.font-synthesis-\\\\[weight_style\\\\]{font-synthesis:weight style;} +.font-synthesis-\\\\$synth{font-synthesis:var(--synth);} +.font-synthesis-inherit{font-synthesis:inherit;} .font-tracking-1em{letter-spacing:1em;} .tracking-\\\\[2\\\\/5\\\\]{letter-spacing:2/5;} .tracking-\\\\$variable{letter-spacing:var(--variable);} diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 40fc55b292..3733e919fe 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -44,7 +44,8 @@ exports[`preset-wind > targets 1`] = ` .not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;} .line-clamp-100{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:100;line-clamp:100;} .line-clamp-7{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;} -.line-clamp-none{-webkit-line-clamp:unset;line-clamp:unset;} +.line-clamp-none{-webkit-line-clamp:none;line-clamp:none;} +.line-clamp-unset{-webkit-line-clamp:unset;line-clamp:unset;} .isolate{isolation:isolate;} .isolate-auto, .isolation-auto{isolation:auto;} @@ -112,6 +113,8 @@ exports[`preset-wind > targets 1`] = ` .animate-play-state-running, .animate-state-running{animation-play-state:running;} .animate-none{animation:none;} +.animate-inherit{animation:inherit;} +.animate-unset{animation:unset;} .touch-pan-left{--un-pan-x:pan-left;touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);} .touch-pan-y{--un-pan-y:pan-y;touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);} .touch-pinch-zoom{--un-pinch-zoom:pinch-zoom;touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);} @@ -142,10 +145,13 @@ exports[`preset-wind > targets 1`] = ` .scroll-pbs2{scroll-padding-block-start:0.5rem;} .scroll-pis-10px{scroll-padding-inline-start:10px;} .list-alpha{list-style-type:lower-alpha;} +.list-alpha-inside{list-style-position:inside;list-style-type:lower-alpha;} .list-disc{list-style-type:disc;} +.list-disc-outside{list-style-position:outside;list-style-type:disc;} .list-greek{list-style-type:lower-greek;} .list-outside{list-style-position:outside;} .list-none{list-style-type:none;} +.list-inherit{list-style-type:inherit;} .columns-\\\\[3_auto\\\\]{columns:3 auto;} .columns-\\\\[auto_13em\\\\]{columns:auto 13em;} .columns-\\\\[auto_auto\\\\]{columns:auto auto;} @@ -184,6 +190,7 @@ exports[`preset-wind > targets 1`] = ` .divide-dashed>:not([hidden])~:not([hidden]){border-style:dashed;} .divide-dotted>:not([hidden])~:not([hidden]){border-style:dotted;} .divide-none>:not([hidden])~:not([hidden]){border-style:none;} +.divide-ridge>:not([hidden])~:not([hidden]){border-style:ridge;} .overscroll-contain{overscroll-behavior:contain;} .overscroll-none{overscroll-behavior:none;} .overscroll-x-auto{overscroll-behavior-x:auto;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 59af61cb0d..a5638cd6de 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -650,7 +650,9 @@ export const presetMiniTargets: string[] = [ 'font-50', 'font-synthesis-weight', 'font-synthesis-small-caps', - 'font-synthesis-small-caps', + 'font-synthesis-[weight_style]', + 'font-synthesis-$synth', + 'font-synthesis-inherit', 'font-inherit', 'fw-900', 'fw-050', diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts index defa5ae6c5..01a4cbbe73 100644 --- a/test/assets/preset-wind-targets.ts +++ b/test/assets/preset-wind-targets.ts @@ -40,6 +40,8 @@ export const presetWindTargets: string[] = [ 'animate-ease-[steps(4,_jump-start)]', 'animate-$variable', 'animate-[4s_linear_0s_infinite_alternate_move\\_eye]', + 'animate-inherit', + 'animate-unset', // background 'bg-auto', @@ -120,6 +122,9 @@ export const presetWindTargets: string[] = [ 'list-alpha', 'list-greek', 'list-outside', + 'list-disc-outside', + 'list-alpha-inside', + 'list-inherit', 'box-decoration-slice', 'accent-op-90', 'accent-red', @@ -157,6 +162,7 @@ export const presetWindTargets: string[] = [ 'divide-opacity-50', 'divide-dashed', 'divide-dotted', + 'divide-ridge', 'divide-transparent', 'divide-current', 'divide-none', @@ -223,6 +229,7 @@ export const presetWindTargets: string[] = [ 'line-clamp-7', 'line-clamp-100', 'line-clamp-none', + 'line-clamp-unset', // scrolls 'snap-y',