From a3c793f5be7596bd41dc287416b23d1c3f3e648c Mon Sep 17 00:00:00 2001 From: Tony Jiang Date: Tue, 9 Jul 2024 17:38:36 +1000 Subject: [PATCH] docs: add missing `percentage` examples and overall improvement --- docs/.vitepress/config.ts | 2 + docs/.vitepress/theme/Layout.vue | 35 +------ docs/src/animations/fade.md | 43 ++++++-- docs/src/animations/slide.md | 89 +++++++++++----- docs/src/animations/zoom.md | 61 ++++++++--- docs/src/interactive-documentation.md | 38 +++++++ docs/uno.config.ts | 8 +- test/fade.test.ts | 62 +++++++++++ test/slide.test.ts | 142 ++++++++++++++++++++++++++ test/zoom.test.ts | 138 +++++++++++++++++++++++++ 10 files changed, 537 insertions(+), 81 deletions(-) create mode 100644 docs/src/interactive-documentation.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 038ff6f..ebf64f5 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -58,6 +58,7 @@ export default defineConfig({ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' }, { text: 'Animations', link: '/animations/', activeMatch: '^/animations/' }, + { text: 'Playground', link: 'https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAWBaJMBOApoQHZQDm%2BYIUADojIdmAC6EC2S2jJb%2B6APgBQUKKEixEKDAhJh2CNszJI41JmBLYW2AGYBXOHCi6EIDVoAMUWfMVMQ%2B-IrAB7LQEZL3m3IVLzRABPbABWHzYADx0ADki4QRFRKAAZV1cAaxsWKHZCJOAAenAIYSKS4SA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUlCRYiOaOa5QAQ17S4GrTv2GIxugFoRCr4O9iBOwNJmSEgYAB6W8JhYDlwANgnYeITEZAAUyMLyjHQAXHAA2lQFtsoQOQCUslUKTCFh0nmawCkpALIQmKV6HBAwABZ6rg1UALrqdUhAA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4IgLgTghgdgzgMwPYQLYAkyoDYgFwJTZwCmAvkA' }, { text: `v${version}`, items: [ @@ -86,6 +87,7 @@ export default defineConfig({ { text: 'Animation Properties', link: '/animations/animation-properties' }, ], }, + { text: 'Interactive Documentation', link: '/interactive-documentation' }, ], socialLinks: [ diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue index b199ea4..6f59f89 100644 --- a/docs/.vitepress/theme/Layout.vue +++ b/docs/.vitepress/theme/Layout.vue @@ -12,33 +12,17 @@ function enableTransitions(): boolean { && window.matchMedia('(prefers-reduced-motion: no-preference)').matches } -provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => { +provide('toggle-appearance', async () => { if (!enableTransitions()) { isDark.value = !isDark.value return } - const clipPath = [ - `circle(0px at ${x}px ${y}px)`, - `circle(${Math.hypot( - Math.max(x, innerWidth - x), - Math.max(y, innerHeight - y), - )}px at ${x}px ${y}px)`, - ] - await document.startViewTransition(async () => { isDark.value = !isDark.value await nextTick() - }).ready - - document.documentElement.animate( - { clipPath: isDark.value ? clipPath.reverse() : clipPath }, - { - duration: 300, - easing: 'ease-in', - pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`, - }, - ) + }) + .ready }) @@ -51,17 +35,6 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => { diff --git a/docs/src/animations/fade.md b/docs/src/animations/fade.md index d458637..5d77573 100644 --- a/docs/src/animations/fade.md +++ b/docs/src/animations/fade.md @@ -9,6 +9,7 @@ Use classname `fade-(in|out)-` to define animation's `opacity`. You can use either of below as the ``: - Any number between `0` and `100` including decimals. E.g. `fade-in-50` +- Any percentage between `0%` and `100%` including decimals, E.g. `fade-in-66.6%` - CSS variable. E.g. `fade-in-$my-css-var` ## Fade In @@ -20,7 +21,8 @@ Define enter animation's starting `opacity`. ```html - + + ``` @@ -33,18 +35,30 @@ Define enter animation's starting `opacity`. - + + + + - + + + + - + + + + + + + @@ -74,7 +88,8 @@ Define exit animation's ending `opacity`. ```html - + + ```
fade-in--una-enter-opacity: 0;--una-enter-opacity: 0;
fade-in-0
fade-in-0%
fade-in-10--una-enter-opacity: 0.1;--una-enter-opacity: 0.1;
fade-in-10%
fade-in-.8--una-enter-opacity: 0.008;--una-enter-opacity: 0.008;
fade-in-0.8
fade-in-.8%
fade-in-52.1
@@ -87,18 +102,30 @@ Define exit animation's ending `opacity`. - + + + + - + + + + - + + + + + + + diff --git a/docs/src/animations/slide.md b/docs/src/animations/slide.md index 4b86e45..ab3885b 100644 --- a/docs/src/animations/slide.md +++ b/docs/src/animations/slide.md @@ -19,12 +19,12 @@ You can use either of below as the `` (alias / full): | y-axis Direction | x-axis Direction | Result | |------------------|------------------|--------| -| `t` / `top` | `l` / `left` | ↖ | -| `t` / `top` | `r` / `right` | ↗ | -| `b` / `bottom` | `l` / `left` | ↙ | -| `b` / `bottom` | `r` / `right` | ↘ | +| `t` / `top` | `l` / `left` | ↖️ | +| `t` / `top` | `r` / `right` | ↗️ | +| `b` / `bottom` | `l` / `left` | ↙️ | +| `b` / `bottom` | `r` / `right` | ↘️ | -E.g. the following combination will make the element slide in from `top-left` corner. +E.g. the following combination will make the element slide in from `top-left` corner. [Playground](https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAWBaJMBOApoQHZQDm%2BYIUADojIdmAC6EC2S2jJb%2B6APgBQUKMABGAVxYsA9mXjI06BCTDsEbZmSRxqTMCWwtsARgD0AJii7927HGwAWKADMEIA0YAMUVes0mT0QATzNvCL81DS0QSXxNMHlwyPFZfE98OmxrfFlJEk8QB3JBEVEoACFpOTIAQXLgcykZeWEm8AhhIA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUlCRYiOaOa5QAQ17S4GrTv2GIxugFoRCr4O9iBOwNJmSEgYAB6W8JhYDlwANgnYeITEZAAUyMLyjHQAXHAA2lQFtsoQOQCUslUKTCFh0nmawCkpALIQmKV6HBAwABZ6rg1UALrqdUhAA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4IgLgTghgdgzgMwPYQLYAkyoDYgFwJTZwCmAvkA) ```html @@ -35,13 +35,14 @@ E.g. the following combination will make the element slide in from `top-left` co You can use either of below as the ``: -- Any number including negative decimals. E.g. `slide-in-t-50` -- Any fraction including negative. E.g. `slide-in-t-1/2` +- Any number including negative(⚠️) and decimals. E.g. `slide-in-t-50` +- Any percentage including negative(⚠️) and decimals. E.g. `slide-in-t-66.6%` +- Any fraction including negative(⚠️). E.g. `slide-in-t-1/2` - `full` as `100%`. E.g. `slide-in-t-full` - CSS variable. E.g. `slide-in-t-$my-css-var` ::: warning -Using **negative** number or fraction is discouraged. Although it will work as expected, but can be misleading or hard to understand. +Using ***NEGATIVE*** value is discouraged. Although it will work as expected, but can be misleading or hard to understand. You can always switch to the opposite direction to avoid using negative values. @@ -55,7 +56,7 @@ is equivalent to ``` -Note: CSS variable usages will be placed as is **without** any direction or positive / negative check. +Note: `CSS variable` usages will be placed as is **WITHOUT** any direction or positive / negative check. ::: ## Slide In @@ -70,9 +71,10 @@ Define enter animation's starting `translate`. - - - + + + + ```
fade-out--una-exit-opacity: 0;--una-exit-opacity: 0;
fade-out-0
fade-out-0%
fade-out-10--una-exit-opacity: 0.1;--una-exit-opacity: 0.1;
fade-out-10%
fade-out-.8--una-exit-opacity: 0.008;--una-exit-opacity: 0.008;
fade-out-0.8
fade-out-.8%
fade-out-52.1
@@ -115,6 +117,10 @@ Define enter animation's starting `translate`. + + + + @@ -123,24 +129,36 @@ Define enter animation's starting `translate`. + + + + - + - + + + + + - + - + + + + + @@ -148,11 +166,11 @@ Define enter animation's starting `translate`. - + - + @@ -188,9 +206,10 @@ Define exit animation's starting `translate`. - - - + + + + ```
slide-in-b-10 --una-enter-translate-y: 2.5rem;
slide-in-b-48%--una-enter-translate-y: 48%;
slide-in-b-.8 --una-enter-translate-y: 0.2rem;slide-in-b-52.1 --una-enter-translate-y: 13.025rem;
slide-in-b-66.6%--una-enter-translate-y: 66.6%;
slide-in-b-100 --una-enter-translate-y: 25rem;
slide-in-b--20slide-in-b--20 ⚠️ --una-enter-translate-y: -5rem;
slide-in-b--66.66slide-in-b--48% ⚠️--una-enter-translate-y: -48%;
slide-in-b--66.66 ⚠️ --una-enter-translate-y: -16.665rem;
slide-in-t--20slide-in-t--20 ⚠️ --una-enter-translate-y: 5rem;
slide-in-t--66.66slide-in-t--48% ⚠️--una-enter-translate-y: 48%;
slide-in-t--66.66 ⚠️ --una-enter-translate-y: 16.665rem;
--una-enter-translate-y: 33.3333333333%;
slide-in-b--2/3slide-in-b--2/3 ⚠️ --una-enter-translate-y: -66.6666666667%;
slide-in-t--2/3slide-in-t--2/3 ⚠️ --una-enter-translate-y: 66.6666666667%;
@@ -233,6 +252,10 @@ Define exit animation's starting `translate`. + + + + @@ -241,24 +264,36 @@ Define exit animation's starting `translate`. + + + + - + - + + + + + - + - + + + + + @@ -266,11 +301,11 @@ Define exit animation's starting `translate`. - + - + diff --git a/docs/src/animations/zoom.md b/docs/src/animations/zoom.md index c653a3d..25d909d 100644 --- a/docs/src/animations/zoom.md +++ b/docs/src/animations/zoom.md @@ -9,6 +9,7 @@ Use classname `zoom-(in|out)-` to define animation's `scale`. You can use either of below as the ``: - Any number including negative and decimals. E.g. `zoom-in-50` +- Any percentage including negative and decimals. E.g. `zoom-in-66.6%` - Any fraction including negative. E.g. `zoom-in-1/2` - `full` as `100%`. E.g. `zoom-in-full` - CSS variable. E.g. `zoom-in-$my-css-var` @@ -22,9 +23,10 @@ Define enter animation's starting `scale`. ```html - - - + + + + ```
slide-out-b-10 --una-exit-translate-y: 2.5rem;
slide-out-b-48%--una-exit-translate-y: 48%;
slide-out-b-.8 --una-exit-translate-y: 0.2rem;slide-out-b-52.1 --una-exit-translate-y: 13.025rem;
slide-out-b-66.6%--una-exit-translate-y: 66.6%;
slide-out-b-100 --una-exit-translate-y: 25rem;
slide-out-b--20slide-out-b--20 ⚠️ --una-exit-translate-y: -5rem;
slide-out-b--66.66slide-out-b--48% ⚠️--una-exit-translate-y: -48%;
slide-out-b--66.66 ⚠️ --una-exit-translate-y: -16.665rem;
slide-out-t--20slide-out-t--20 ⚠️ --una-exit-translate-y: 5rem;
slide-out-t--66.66slide-out-t--48% ⚠️--una-exit-translate-y: 48%;
slide-out-t--66.66 ⚠️ --una-exit-translate-y: 16.665rem;
--una-exit-translate-y: 33.3333333333%;
slide-out-b--2/3slide-out-b--2/3 ⚠️ --una-exit-translate-y: -66.6666666667%;
slide-out-t--2/3slide-out-t--2/3 ⚠️ --una-exit-translate-y: 66.6666666667%;
@@ -37,18 +39,30 @@ Define enter animation's starting `scale`. - + + + + - + + + + - + + + + + + + @@ -60,7 +74,10 @@ Define enter animation's starting `scale`. - + + + + @@ -94,9 +111,10 @@ Define exit animation's ending `scale`. ```html - - - + + + + ```
zoom-in--una-enter-scale: 0;--una-enter-scale: 0;
zoom-in-0
zoom-in-0%
zoom-in-10--una-enter-scale: 0.1;--una-enter-scale: 0.1;
zoom-in-10%
zoom-in-.8--una-enter-scale: 0.008;--una-enter-scale: 0.008;
zoom-in-0.8
zoom-in-.8%
zoom-in-52.1
zoom-in--20--una-enter-scale: -0.2;--una-enter-scale: -0.2;
zoom-in--20%
zoom-in--66.66
@@ -109,18 +127,30 @@ Define exit animation's ending `scale`. - + + + + - + + + + - + + + + + + + @@ -132,7 +162,10 @@ Define exit animation's ending `scale`. - + + + + diff --git a/docs/src/interactive-documentation.md b/docs/src/interactive-documentation.md new file mode 100644 index 0000000..b426946 --- /dev/null +++ b/docs/src/interactive-documentation.md @@ -0,0 +1,38 @@ +# Interactive Documentation + +UnoCSS comes up with a Playground and an Interactive Documentation. + +This tutorial will guide you how to set it up and take advantage of them. + + +## Playground + +There is a playground that has already been set up for you to play with. + +You can access it [here](https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAWBaJMBOApoQHZQDm%2BYIUADojIdmAC6EC2S2jJb%2B6APgBQUKKEixEKDAhJh2CNszJI41JmBLYW2AGYBXOHCi6EIDVoAMUWfMVMQ%2B-IrAB7LQEZL3m3IVLzRABPbABWHzYADx0ADki4QRFRKAAZV1cAaxsWKHZCJOAAenAIYSKS4SA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUlCRYiOaOa5QAQ17S4GrTv2GIxugFoRCr4O9iBOwNJmSEgYAB6W8JhYDlwANgnYeITEZAAUyMLyjHQAXHAA2lQFtsoQOQCUslUKTCFh0nmawCkpALIQmKV6HBAwABZ6rg1UALrqdUhAA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4IgLgTghgdgzgMwPYQLYAkyoDYgFwJTZwCmAvkA). + + +## Setup + +To set up the interactive documentation, follow these steps: + +- Copy the below code + +```ts +import { defineConfig, presetUno } from 'unocss' +import { presetAnimations } from 'unocss-preset-animations' + + +export default defineConfig({ + presets: [ + presetUno(), + presetAnimations({ fillMode: 'both' }), // or whatever mode you want + ], +}) + +``` + +- Head to the official [Interactive Documentation](https://unocss.dev/interactive/) +- Click the icon in the top-right corner +- Paste the above code into the editor and click `OK` +- Enjoy 🥰 diff --git a/docs/uno.config.ts b/docs/uno.config.ts index cb9b6f2..4898bed 100644 --- a/docs/uno.config.ts +++ b/docs/uno.config.ts @@ -1,4 +1,10 @@ -import { defineConfig, presetIcons, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss' +import { + defineConfig, + presetIcons, + presetUno, + transformerDirectives, + transformerVariantGroup, +} from 'unocss' import type { Theme } from '@unocss/preset-mini' diff --git a/test/fade.test.ts b/test/fade.test.ts index 052e48b..c69ff2a 100644 --- a/test/fade.test.ts +++ b/test/fade.test.ts @@ -52,6 +52,37 @@ describe.concurrent('fade animation', () => { .fade-in-99\\.9{--una-enter-opacity:0.999;}" `) }) + + + it(`should also convert both integers and decimals with "%" symbol`, async ({ expect }) => { + const classnames = [ + ...INTEGERS_0_TO_100.map(i => `fade-in-${i}%`), + ...DECIMALS_0_TO_100.map(i => `fade-in-${i}%`), + ] + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .fade-in-0\\.1\\%{--una-enter-opacity:0.001;} + .fade-in-0\\%{--una-enter-opacity:0;} + .fade-in-10\\.1\\%{--una-enter-opacity:0.101;} + .fade-in-10\\%{--una-enter-opacity:0.1;} + .fade-in-100\\%{--una-enter-opacity:1;} + .fade-in-20\\%{--una-enter-opacity:0.2;} + .fade-in-30\\%{--una-enter-opacity:0.3;} + .fade-in-40\\%{--una-enter-opacity:0.4;} + .fade-in-50\\%{--una-enter-opacity:0.5;} + .fade-in-52\\.1\\%{--una-enter-opacity:0.521;} + .fade-in-60\\%{--una-enter-opacity:0.6;} + .fade-in-66\\.66\\%{--una-enter-opacity:0.6666;} + .fade-in-70\\%{--una-enter-opacity:0.7;} + .fade-in-80\\%{--una-enter-opacity:0.8;} + .fade-in-90\\%{--una-enter-opacity:0.9;} + .fade-in-99\\.9\\%{--una-enter-opacity:0.999;}" + `) + }) }) @@ -120,6 +151,37 @@ describe.concurrent('fade animation', () => { .fade-out-99\\.9{--una-exit-opacity:0.999;}" `) }) + + + it(`should also convert both integers and decimals with "%" symbol`, async ({ expect }) => { + const classnames = [ + ...INTEGERS_0_TO_100.map(i => `fade-out-${i}%`), + ...DECIMALS_0_TO_100.map(i => `fade-out-${i}%`), + ] + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .fade-out-0\\.1\\%{--una-exit-opacity:0.001;} + .fade-out-0\\%{--una-exit-opacity:0;} + .fade-out-10\\.1\\%{--una-exit-opacity:0.101;} + .fade-out-10\\%{--una-exit-opacity:0.1;} + .fade-out-100\\%{--una-exit-opacity:1;} + .fade-out-20\\%{--una-exit-opacity:0.2;} + .fade-out-30\\%{--una-exit-opacity:0.3;} + .fade-out-40\\%{--una-exit-opacity:0.4;} + .fade-out-50\\%{--una-exit-opacity:0.5;} + .fade-out-52\\.1\\%{--una-exit-opacity:0.521;} + .fade-out-60\\%{--una-exit-opacity:0.6;} + .fade-out-66\\.66\\%{--una-exit-opacity:0.6666;} + .fade-out-70\\%{--una-exit-opacity:0.7;} + .fade-out-80\\%{--una-exit-opacity:0.8;} + .fade-out-90\\%{--una-exit-opacity:0.9;} + .fade-out-99\\.9\\%{--una-exit-opacity:0.999;}" + `) + }) }) diff --git a/test/slide.test.ts b/test/slide.test.ts index d7e2c3e..7ea96aa 100644 --- a/test/slide.test.ts +++ b/test/slide.test.ts @@ -256,6 +256,77 @@ describe.concurrent('slide animation', () => { }) + describe('percentage', () => { + it(`should leave any percentage with "%" symbol as is`, async ({ expect }) => { + const classnames = [ + ...INTEGERS.map(i => `slide-in-t-${i}%`), + ...DECIMALS.map(i => `slide-in-t-${i}%`), + ] + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .slide-in-t--0\\.1\\%{--una-enter-translate-y:0.1%;} + .slide-in-t--10\\.1\\%{--una-enter-translate-y:10.1%;} + .slide-in-t--10\\%{--una-enter-translate-y:10%;} + .slide-in-t--100\\%{--una-enter-translate-y:100%;} + .slide-in-t--110\\%{--una-enter-translate-y:110%;} + .slide-in-t--120\\%{--una-enter-translate-y:120%;} + .slide-in-t--130\\%{--una-enter-translate-y:130%;} + .slide-in-t--140\\%{--una-enter-translate-y:140%;} + .slide-in-t--150\\%{--una-enter-translate-y:150%;} + .slide-in-t--160\\%{--una-enter-translate-y:160%;} + .slide-in-t--170\\%{--una-enter-translate-y:170%;} + .slide-in-t--180\\.37\\%{--una-enter-translate-y:180.37%;} + .slide-in-t--180\\%{--una-enter-translate-y:180%;} + .slide-in-t--190\\%{--una-enter-translate-y:190%;} + .slide-in-t--199\\.9\\%{--una-enter-translate-y:199.9%;} + .slide-in-t--20\\%{--una-enter-translate-y:20%;} + .slide-in-t--200\\%{--una-enter-translate-y:200%;} + .slide-in-t--30\\%{--una-enter-translate-y:30%;} + .slide-in-t--40\\%{--una-enter-translate-y:40%;} + .slide-in-t--50\\%{--una-enter-translate-y:50%;} + .slide-in-t--52\\.1\\%{--una-enter-translate-y:52.1%;} + .slide-in-t--60\\%{--una-enter-translate-y:60%;} + .slide-in-t--66\\.66\\%{--una-enter-translate-y:66.66%;} + .slide-in-t--70\\%{--una-enter-translate-y:70%;} + .slide-in-t--80\\%{--una-enter-translate-y:80%;} + .slide-in-t--90\\%{--una-enter-translate-y:90%;} + .slide-in-t-0\\.1\\%{--una-enter-translate-y:-0.1%;} + .slide-in-t-0\\%{--una-enter-translate-y:0;} + .slide-in-t-10\\.1\\%{--una-enter-translate-y:-10.1%;} + .slide-in-t-10\\%{--una-enter-translate-y:-10%;} + .slide-in-t-100\\%{--una-enter-translate-y:-100%;} + .slide-in-t-110\\%{--una-enter-translate-y:-110%;} + .slide-in-t-120\\%{--una-enter-translate-y:-120%;} + .slide-in-t-130\\%{--una-enter-translate-y:-130%;} + .slide-in-t-140\\%{--una-enter-translate-y:-140%;} + .slide-in-t-150\\%{--una-enter-translate-y:-150%;} + .slide-in-t-160\\%{--una-enter-translate-y:-160%;} + .slide-in-t-170\\%{--una-enter-translate-y:-170%;} + .slide-in-t-180\\.37\\%{--una-enter-translate-y:-180.37%;} + .slide-in-t-180\\%{--una-enter-translate-y:-180%;} + .slide-in-t-190\\%{--una-enter-translate-y:-190%;} + .slide-in-t-199\\.9\\%{--una-enter-translate-y:-199.9%;} + .slide-in-t-20\\%{--una-enter-translate-y:-20%;} + .slide-in-t-200\\%{--una-enter-translate-y:-200%;} + .slide-in-t-30\\%{--una-enter-translate-y:-30%;} + .slide-in-t-40\\%{--una-enter-translate-y:-40%;} + .slide-in-t-50\\%{--una-enter-translate-y:-50%;} + .slide-in-t-52\\.1\\%{--una-enter-translate-y:-52.1%;} + .slide-in-t-60\\%{--una-enter-translate-y:-60%;} + .slide-in-t-66\\.66\\%{--una-enter-translate-y:-66.66%;} + .slide-in-t-70\\%{--una-enter-translate-y:-70%;} + .slide-in-t-80\\%{--una-enter-translate-y:-80%;} + .slide-in-t-90\\%{--una-enter-translate-y:-90%;} + .slide-in-t-99\\.9\\%{--una-enter-translate-y:-99.9%;}" + `) + }) + }) + + describe('fraction', () => { it(`should convert any fractions including negative`, async ({ expect }) => { const classnames = FRACTIONS.map(i => `slide-in-t-${i}`) @@ -561,6 +632,77 @@ describe.concurrent('slide animation', () => { }) + describe('percentage', () => { + it(`should leave any percentage with "%" symbol as is`, async ({ expect }) => { + const classnames = [ + ...INTEGERS.map(i => `slide-out-t-${i}%`), + ...DECIMALS.map(i => `slide-out-t-${i}%`), + ] + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .slide-out-t--0\\.1\\%{--una-exit-translate-y:0.1%;} + .slide-out-t--10\\.1\\%{--una-exit-translate-y:10.1%;} + .slide-out-t--10\\%{--una-exit-translate-y:10%;} + .slide-out-t--100\\%{--una-exit-translate-y:100%;} + .slide-out-t--110\\%{--una-exit-translate-y:110%;} + .slide-out-t--120\\%{--una-exit-translate-y:120%;} + .slide-out-t--130\\%{--una-exit-translate-y:130%;} + .slide-out-t--140\\%{--una-exit-translate-y:140%;} + .slide-out-t--150\\%{--una-exit-translate-y:150%;} + .slide-out-t--160\\%{--una-exit-translate-y:160%;} + .slide-out-t--170\\%{--una-exit-translate-y:170%;} + .slide-out-t--180\\.37\\%{--una-exit-translate-y:180.37%;} + .slide-out-t--180\\%{--una-exit-translate-y:180%;} + .slide-out-t--190\\%{--una-exit-translate-y:190%;} + .slide-out-t--199\\.9\\%{--una-exit-translate-y:199.9%;} + .slide-out-t--20\\%{--una-exit-translate-y:20%;} + .slide-out-t--200\\%{--una-exit-translate-y:200%;} + .slide-out-t--30\\%{--una-exit-translate-y:30%;} + .slide-out-t--40\\%{--una-exit-translate-y:40%;} + .slide-out-t--50\\%{--una-exit-translate-y:50%;} + .slide-out-t--52\\.1\\%{--una-exit-translate-y:52.1%;} + .slide-out-t--60\\%{--una-exit-translate-y:60%;} + .slide-out-t--66\\.66\\%{--una-exit-translate-y:66.66%;} + .slide-out-t--70\\%{--una-exit-translate-y:70%;} + .slide-out-t--80\\%{--una-exit-translate-y:80%;} + .slide-out-t--90\\%{--una-exit-translate-y:90%;} + .slide-out-t-0\\.1\\%{--una-exit-translate-y:-0.1%;} + .slide-out-t-0\\%{--una-exit-translate-y:0;} + .slide-out-t-10\\.1\\%{--una-exit-translate-y:-10.1%;} + .slide-out-t-10\\%{--una-exit-translate-y:-10%;} + .slide-out-t-100\\%{--una-exit-translate-y:-100%;} + .slide-out-t-110\\%{--una-exit-translate-y:-110%;} + .slide-out-t-120\\%{--una-exit-translate-y:-120%;} + .slide-out-t-130\\%{--una-exit-translate-y:-130%;} + .slide-out-t-140\\%{--una-exit-translate-y:-140%;} + .slide-out-t-150\\%{--una-exit-translate-y:-150%;} + .slide-out-t-160\\%{--una-exit-translate-y:-160%;} + .slide-out-t-170\\%{--una-exit-translate-y:-170%;} + .slide-out-t-180\\.37\\%{--una-exit-translate-y:-180.37%;} + .slide-out-t-180\\%{--una-exit-translate-y:-180%;} + .slide-out-t-190\\%{--una-exit-translate-y:-190%;} + .slide-out-t-199\\.9\\%{--una-exit-translate-y:-199.9%;} + .slide-out-t-20\\%{--una-exit-translate-y:-20%;} + .slide-out-t-200\\%{--una-exit-translate-y:-200%;} + .slide-out-t-30\\%{--una-exit-translate-y:-30%;} + .slide-out-t-40\\%{--una-exit-translate-y:-40%;} + .slide-out-t-50\\%{--una-exit-translate-y:-50%;} + .slide-out-t-52\\.1\\%{--una-exit-translate-y:-52.1%;} + .slide-out-t-60\\%{--una-exit-translate-y:-60%;} + .slide-out-t-66\\.66\\%{--una-exit-translate-y:-66.66%;} + .slide-out-t-70\\%{--una-exit-translate-y:-70%;} + .slide-out-t-80\\%{--una-exit-translate-y:-80%;} + .slide-out-t-90\\%{--una-exit-translate-y:-90%;} + .slide-out-t-99\\.9\\%{--una-exit-translate-y:-99.9%;}" + `) + }) + }) + + describe('fraction', () => { it(`should convert any fractions including negative`, async ({ expect }) => { const classnames = FRACTIONS.map(i => `slide-out-t-${i}`) diff --git a/test/zoom.test.ts b/test/zoom.test.ts index 0ede968..319466e 100644 --- a/test/zoom.test.ts +++ b/test/zoom.test.ts @@ -90,6 +90,75 @@ describe.concurrent('zoom animation', () => { .zoom-in-99\\.9{--una-enter-scale:0.999;}" `) }) + + + it(`should also convert both integers and decimals with "%" symbol`, async ({ expect }) => { + const classnames = [ + ...INTEGERS.map(i => `zoom-in-${i}%`), + ...DECIMALS.map(i => `zoom-in-${i}%`), + ] + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .zoom-in--0\\.1\\%{--una-enter-scale:-0.001;} + .zoom-in--10\\.1\\%{--una-enter-scale:-0.101;} + .zoom-in--10\\%{--una-enter-scale:-0.1;} + .zoom-in--100\\%{--una-enter-scale:-1;} + .zoom-in--110\\%{--una-enter-scale:-1.1;} + .zoom-in--120\\%{--una-enter-scale:-1.2;} + .zoom-in--130\\%{--una-enter-scale:-1.3;} + .zoom-in--140\\%{--una-enter-scale:-1.4;} + .zoom-in--150\\%{--una-enter-scale:-1.5;} + .zoom-in--160\\%{--una-enter-scale:-1.6;} + .zoom-in--170\\%{--una-enter-scale:-1.7;} + .zoom-in--180\\.37\\%{--una-enter-scale:-1.8037;} + .zoom-in--180\\%{--una-enter-scale:-1.8;} + .zoom-in--190\\%{--una-enter-scale:-1.9;} + .zoom-in--199\\.9\\%{--una-enter-scale:-1.999;} + .zoom-in--20\\%{--una-enter-scale:-0.2;} + .zoom-in--200\\%{--una-enter-scale:-2;} + .zoom-in--30\\%{--una-enter-scale:-0.3;} + .zoom-in--40\\%{--una-enter-scale:-0.4;} + .zoom-in--50\\%{--una-enter-scale:-0.5;} + .zoom-in--52\\.1\\%{--una-enter-scale:-0.521;} + .zoom-in--60\\%{--una-enter-scale:-0.6;} + .zoom-in--66\\.66\\%{--una-enter-scale:-0.6666;} + .zoom-in--70\\%{--una-enter-scale:-0.7;} + .zoom-in--80\\%{--una-enter-scale:-0.8;} + .zoom-in--90\\%{--una-enter-scale:-0.9;} + .zoom-in-0\\.1\\%{--una-enter-scale:0.001;} + .zoom-in-0\\%{--una-enter-scale:0;} + .zoom-in-10\\.1\\%{--una-enter-scale:0.101;} + .zoom-in-10\\%{--una-enter-scale:0.1;} + .zoom-in-100\\%{--una-enter-scale:1;} + .zoom-in-110\\%{--una-enter-scale:1.1;} + .zoom-in-120\\%{--una-enter-scale:1.2;} + .zoom-in-130\\%{--una-enter-scale:1.3;} + .zoom-in-140\\%{--una-enter-scale:1.4;} + .zoom-in-150\\%{--una-enter-scale:1.5;} + .zoom-in-160\\%{--una-enter-scale:1.6;} + .zoom-in-170\\%{--una-enter-scale:1.7;} + .zoom-in-180\\.37\\%{--una-enter-scale:1.8037;} + .zoom-in-180\\%{--una-enter-scale:1.8;} + .zoom-in-190\\%{--una-enter-scale:1.9;} + .zoom-in-199\\.9\\%{--una-enter-scale:1.999;} + .zoom-in-20\\%{--una-enter-scale:0.2;} + .zoom-in-200\\%{--una-enter-scale:2;} + .zoom-in-30\\%{--una-enter-scale:0.3;} + .zoom-in-40\\%{--una-enter-scale:0.4;} + .zoom-in-50\\%{--una-enter-scale:0.5;} + .zoom-in-52\\.1\\%{--una-enter-scale:0.521;} + .zoom-in-60\\%{--una-enter-scale:0.6;} + .zoom-in-66\\.66\\%{--una-enter-scale:0.6666;} + .zoom-in-70\\%{--una-enter-scale:0.7;} + .zoom-in-80\\%{--una-enter-scale:0.8;} + .zoom-in-90\\%{--una-enter-scale:0.9;} + .zoom-in-99\\.9\\%{--una-enter-scale:0.999;}" + `) + }) }) @@ -232,6 +301,75 @@ describe.concurrent('zoom animation', () => { .zoom-out-99\\.9{--una-exit-scale:0.999;}" `) }) + + + it(`should also convert both integers and decimals with "%" symbol`, async ({ expect }) => { + const classnames = [ + ...INTEGERS.map(i => `zoom-out-${i}%`), + ...DECIMALS.map(i => `zoom-out-${i}%`), + ] + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .zoom-out--0\\.1\\%{--una-exit-scale:-0.001;} + .zoom-out--10\\.1\\%{--una-exit-scale:-0.101;} + .zoom-out--10\\%{--una-exit-scale:-0.1;} + .zoom-out--100\\%{--una-exit-scale:-1;} + .zoom-out--110\\%{--una-exit-scale:-1.1;} + .zoom-out--120\\%{--una-exit-scale:-1.2;} + .zoom-out--130\\%{--una-exit-scale:-1.3;} + .zoom-out--140\\%{--una-exit-scale:-1.4;} + .zoom-out--150\\%{--una-exit-scale:-1.5;} + .zoom-out--160\\%{--una-exit-scale:-1.6;} + .zoom-out--170\\%{--una-exit-scale:-1.7;} + .zoom-out--180\\.37\\%{--una-exit-scale:-1.8037;} + .zoom-out--180\\%{--una-exit-scale:-1.8;} + .zoom-out--190\\%{--una-exit-scale:-1.9;} + .zoom-out--199\\.9\\%{--una-exit-scale:-1.999;} + .zoom-out--20\\%{--una-exit-scale:-0.2;} + .zoom-out--200\\%{--una-exit-scale:-2;} + .zoom-out--30\\%{--una-exit-scale:-0.3;} + .zoom-out--40\\%{--una-exit-scale:-0.4;} + .zoom-out--50\\%{--una-exit-scale:-0.5;} + .zoom-out--52\\.1\\%{--una-exit-scale:-0.521;} + .zoom-out--60\\%{--una-exit-scale:-0.6;} + .zoom-out--66\\.66\\%{--una-exit-scale:-0.6666;} + .zoom-out--70\\%{--una-exit-scale:-0.7;} + .zoom-out--80\\%{--una-exit-scale:-0.8;} + .zoom-out--90\\%{--una-exit-scale:-0.9;} + .zoom-out-0\\.1\\%{--una-exit-scale:0.001;} + .zoom-out-0\\%{--una-exit-scale:0;} + .zoom-out-10\\.1\\%{--una-exit-scale:0.101;} + .zoom-out-10\\%{--una-exit-scale:0.1;} + .zoom-out-100\\%{--una-exit-scale:1;} + .zoom-out-110\\%{--una-exit-scale:1.1;} + .zoom-out-120\\%{--una-exit-scale:1.2;} + .zoom-out-130\\%{--una-exit-scale:1.3;} + .zoom-out-140\\%{--una-exit-scale:1.4;} + .zoom-out-150\\%{--una-exit-scale:1.5;} + .zoom-out-160\\%{--una-exit-scale:1.6;} + .zoom-out-170\\%{--una-exit-scale:1.7;} + .zoom-out-180\\.37\\%{--una-exit-scale:1.8037;} + .zoom-out-180\\%{--una-exit-scale:1.8;} + .zoom-out-190\\%{--una-exit-scale:1.9;} + .zoom-out-199\\.9\\%{--una-exit-scale:1.999;} + .zoom-out-20\\%{--una-exit-scale:0.2;} + .zoom-out-200\\%{--una-exit-scale:2;} + .zoom-out-30\\%{--una-exit-scale:0.3;} + .zoom-out-40\\%{--una-exit-scale:0.4;} + .zoom-out-50\\%{--una-exit-scale:0.5;} + .zoom-out-52\\.1\\%{--una-exit-scale:0.521;} + .zoom-out-60\\%{--una-exit-scale:0.6;} + .zoom-out-66\\.66\\%{--una-exit-scale:0.6666;} + .zoom-out-70\\%{--una-exit-scale:0.7;} + .zoom-out-80\\%{--una-exit-scale:0.8;} + .zoom-out-90\\%{--una-exit-scale:0.9;} + .zoom-out-99\\.9\\%{--una-exit-scale:0.999;}" + `) + }) })
zoom-out--una-exit-scale: 0;--una-exit-scale: 0;
zoom-out-0
zoom-out-0%
zoom-out-10--una-exit-scale: 0.1;--una-exit-scale: 0.1;
zoom-out-10%
zoom-out-.8--una-exit-scale: 0.008;--una-exit-scale: 0.008;
zoom-out-0.8
zoom-out-.8%
zoom-out-52.1
zoom-out--20--una-exit-scale: -0.2;--una-exit-scale: -0.2;
zoom-out--20%
zoom-out--66.66