From 7a8e3fd33e52b662ff57807d70c74bfed9418cd2 Mon Sep 17 00:00:00 2001 From: sibbng Date: Fri, 27 Jan 2023 16:28:48 +0300 Subject: [PATCH] feat(preset-mini): include outline-color in color properties (#2116) --- packages/preset-mini/src/_rules/transition.ts | 2 +- test/__snapshots__/preset-attributify.test.ts.snap | 4 ++-- test/__snapshots__/preset-mini.test.ts.snap | 4 ++-- test/__snapshots__/preset-wind.test.ts.snap | 2 +- test/__snapshots__/transformer-directives.test.ts.snap | 6 +++--- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/preset-mini/src/_rules/transition.ts b/packages/preset-mini/src/_rules/transition.ts index 0aec626862..b39f5b1daf 100644 --- a/packages/preset-mini/src/_rules/transition.ts +++ b/packages/preset-mini/src/_rules/transition.ts @@ -4,7 +4,7 @@ import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils' const transitionPropertyGroup: Record = { all: 'all', - colors: ['color', 'background-color', 'border-color', 'text-decoration-color', 'fill', 'stroke'].join(','), + colors: ['color', 'background-color', 'border-color', 'outline-color', 'text-decoration-color', 'fill', 'stroke'].join(','), none: 'none', opacity: 'opacity', shadow: 'box-shadow', diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index e8179c70b6..8cdec9c900 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/test/__snapshots__/preset-attributify.test.ts.snap @@ -271,8 +271,8 @@ exports[`attributify > fixture2 1`] = ` [un-placeholder~=\\"text-red\\"]::placeholder{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} [group=\\"\\"]:hover [group-hover~=\\"op-50\\"]{opacity:0.5;} [op-20=\\"\\"]{opacity:0.2;} -[all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;} -[transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} +[all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;} +[transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} [after~=\\"content-\\\\[string\\\\:\\\\!\\\\]\\"]::after{content:!;} [before-content~=\\"\\\\[quoted\\\\:\\\\!\\\\]\\"]::before{content:\\"!\\";} @media (min-width: 640px){ diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 4007accfd2..90cd58bb33 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -858,8 +858,8 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .box-border{box-sizing:border-box;} .box-content{box-sizing:content-box;} .box-inherit{box-sizing:inherit;} -.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} -.transition-200{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} +.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} +.transition-200{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} .transition-background-color\\\\,color-200{transition-property:background-color,color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} .transition-color\\\\,background-color-200{transition-property:color,background-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} .transition-opacity-200{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 6e59a2c86f..8585b5e056 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -436,7 +436,7 @@ exports[`preset-wind > targets 1`] = ` .\\\\@dark\\\\:contrast-more\\\\:p-10{padding:2.5rem;} }} @media (prefers-reduced-motion: no-preference){ -.motion-safe\\\\:transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} +.motion-safe\\\\:transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} } @media (prefers-reduced-motion: reduce){ .motion-reduce\\\\:hover\\\\:translate-0:hover{--un-translate-x:0rem;--un-translate-y:0rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} diff --git a/test/__snapshots__/transformer-directives.test.ts.snap b/test/__snapshots__/transformer-directives.test.ts.snap index 39adfd1210..e5de791319 100644 --- a/test/__snapshots__/transformer-directives.test.ts.snap +++ b/test/__snapshots__/transformer-directives.test.ts.snap @@ -44,7 +44,7 @@ html.dark { rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)); - transition-property: color, background-color, border-color, + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -63,7 +63,7 @@ html.dark { } .basic-transition { - transition-property: color, background-color, border-color, + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -121,7 +121,7 @@ html.dark { font-size: 1.5rem; line-height: 2rem; opacity: 0.75; - transition-property: color, background-color, border-color, + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);