From 868665586c8c999b508ed8ae1a7ccaea97dd7469 Mon Sep 17 00:00:00 2001 From: Aelita Date: Wed, 22 Nov 2023 00:11:30 +1100 Subject: [PATCH] Drop `[]` usage, Improvement in slide animation regarding sign and direction handling, Finished Docs --- docs/.vitepress/config.ts | 31 +++- docs/.vitepress/theme/style.scss | 21 +++ docs/src/animations/fade.md | 136 ++++++++++---- docs/src/animations/index.md | 22 ++- docs/src/animations/slide.md | 295 +++++++++++++++++++++++++++++++ docs/src/animations/spin.md | 69 ++++++++ docs/src/animations/zoom.md | 184 +++++++++++++------ docs/src/guide/comparisons.md | 4 +- docs/src/guide/index.md | 4 +- docs/src/guide/migration.md | 70 ++++---- docs/src/index.md | 4 +- package.json | 14 +- pnpm-lock.yaml | 226 +++++++++++------------ src/rules.ts | 61 ++++--- src/utils.ts | 10 ++ tsconfig.json | 3 +- 16 files changed, 872 insertions(+), 282 deletions(-) create mode 100644 src/utils.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 2a945dc..cbf77c0 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,5 +1,6 @@ import unocss from 'unocss/vite' import { defineConfig } from 'vitepress' +import { version } from '../../package.json' import externalLinkIcon from './plugins/externalLinkIcon' @@ -24,7 +25,7 @@ export default defineConfig({ markdown: { theme: { dark: 'material-theme-palenight', - light: 'min-light', + light: 'vitesse-light', }, config: (md) => { md.use(externalLinkIcon) @@ -33,11 +34,37 @@ export default defineConfig({ themeConfig: { logo: '/logo.svg', siteTitle: 'Animations Preset', - // TODO: algolia + + editLink: { + pattern: 'https://github.com/xsjcTony/unocss-preset-animations/edit/main/docs/src/:path', + text: 'Edit this page on GitHub', + }, + + search: { + provider: 'algolia', + options: { + appId: '59LIXN9T8K', + apiKey: 'c029fa22a73158f7b77eab5f47a4f33a', + indexName: 'unocss-preset-animations-aelita', + }, + }, + + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2023-present Aelita (Tony Jiang)', + }, + nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' }, { text: 'Animations', link: '/animations/', activeMatch: '^/animations/' }, + { + // eslint-disable-next-line ts/restrict-template-expressions + text: `v${version}`, + items: [ + { text: 'Release Notes', link: 'https://github.com/xsjcTony/unocss-preset-animations/releases' }, + ], + }, ], sidebar: [ diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss index 7fcf5d8..42ca6ab 100644 --- a/docs/.vitepress/theme/style.scss +++ b/docs/.vitepress/theme/style.scss @@ -60,6 +60,27 @@ } +/** + * Component: Custom Block + * -------------------------------------------------------------------------- */ + +:root { + --vp-custom-block-tip-border: transparent; + --vp-custom-block-tip-text: var(--vp-c-text-1); + --vp-custom-block-tip-bg: var(--vp-c-green-soft); + --vp-custom-block-tip-code-bg: var(--vp-c-green-soft); +} + +.custom-block.tip a, +.custom-block.tip code { + color: var(--vp-c-green-1); +} + +.custom-block.tip a:hover { + color: var(--vp-c-green-2); +} + + /** * Component: Algolia * -------------------------------------------------------------------------- */ diff --git a/docs/src/animations/fade.md b/docs/src/animations/fade.md index 6ad4936..d458637 100644 --- a/docs/src/animations/fade.md +++ b/docs/src/animations/fade.md @@ -2,61 +2,119 @@ Use classname `fade-(in|out)-` to define animation's `opacity`. -The `-` part is ***optional***. +- The `-` part is ***optional***. -You can use either any of below as the ``: -- Any number between `0` and `100` including decimals, e.g. `fade-in-50`. -- Any raw value within brackets, e.g. `fade-in-[0.5]`. -- Css variable with either `$foo`, `[--foo]` or `[var(--foo)]`, e.g. `fade-in-$my-css-var`. +
+ +You can use either of below as the ``: + +- Any number between `0` and `100` including decimals. E.g. `fade-in-50` +- CSS variable. E.g. `fade-in-$my-css-var` ## Fade In Define enter animation's starting `opacity`. -The default is `0` if no value is specified. +- The default **value** is `0` if not specified. ```html - - + ``` -| Classname | Property | -|--------------------------------|-------------------------------------------| -| `fade-in` | `--una-enter-opacity: 0;` | -| `fade-in-0` | `--una-enter-opacity: 0;` | -| `fade-in-10` | `--una-enter-opacity: 0.1;` | -| `fade-in-52.1` | `--una-enter-opacity: 0.521;` | -| `fade-in-66.66` | `--una-enter-opacity: 0.6666;` | -| `fade-in-100` | `--una-enter-opacity: 1;` | -| `fade-in-[.8]` | `--una-enter-opacity: .8;` | -| `fade-in-$my-css-var` | `--una-enter-opacity: var(--my-css-var);` | -| `fade-in-[--my-css-var]` | `--una-enter-opacity: var(--my-css-var);` | -| `fade-in-[var(--$my-css-var)]` | `--una-enter-opacity: var(--my-css-var);` | - -## Fade out + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassnameProperty
fade-in--una-enter-opacity: 0;
fade-in-0
fade-in-10--una-enter-opacity: 0.1;
fade-in-.8--una-enter-opacity: 0.008;
fade-in-52.1--una-enter-opacity: 0.521;
fade-in-66.66--una-enter-opacity: 0.6666;
fade-in-100--una-enter-opacity: 1;
fade-in-$my-css-var--una-enter-opacity: var(--my-css-var);
+ +## Fade Out Define exit animation's ending `opacity`. -The default value is `0` if no value is specified. +- The default **value** is `0` if not specified. ```html - - - - + + + ``` -| Classname | Property | -|---------------------------------|------------------------------------------| -| `fade-out` | `--una-exit-opacity: 0;` | -| `fade-out-0` | `--una-exit-opacity: 0;` | -| `fade-out-10` | `--una-exit-opacity: 0.1;` | -| `fade-out-52.1` | `--una-exit-opacity: 0.521;` | -| `fade-out-66.66` | `--una-exit-opacity: 0.6666;` | -| `fade-out-100` | `--una-exit-opacity: 1;` | -| `fade-out-[.8]` | `--una-exit-opacity: .8;` | -| `fade-out-$my-css-var` | `--una-exit-opacity: var(--my-css-var);` | -| `fade-out-[--my-css-var]` | `--una-exit-opacity: var(--my-css-var);` | -| `fade-out-[var(--$my-css-var)]` | `--una-exit-opacity: var(--my-css-var);` | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassnameProperty
fade-out--una-exit-opacity: 0;
fade-out-0
fade-out-10--una-exit-opacity: 0.1;
fade-out-.8--una-exit-opacity: 0.008;
fade-out-52.1--una-exit-opacity: 0.521;
fade-out-66.66--una-exit-opacity: 0.6666;
fade-out-100--una-exit-opacity: 1;
fade-out-$my-css-var--una-exit-opacity: var(--my-css-var);
diff --git a/docs/src/animations/index.md b/docs/src/animations/index.md index 47cf291..9f444f2 100644 --- a/docs/src/animations/index.md +++ b/docs/src/animations/index.md @@ -12,6 +12,24 @@ E.g. the below code will make the element fade in, zoom in and slide in from top ``` ::: +::: warning +Usage of the bracket `[]` syntax is dropped in this preset from **v1.0.0-beta.8**. + +This is **intentional** because +- UnoCSS is very flexible, and you don't need to use it at all in this preset. +- The syntax is error-prone and may destroy the whole animation with a single invalid value. + +For anything you define in `[]` except specific syntax for CSS variables (e.g. `[--foo]`), it will always use the value inside as is, hence it's very easy to make mistakes. + +E.g. the below code will destroy the whole animation since it's not a valid `rotate()` value. +```html + +``` +It will generate `--una-enter-rotate: 30;`, which lacks a unit and will make the whole `transform` property invalid. + +Instead, just write `spin-in-30` or `spin-in-30deg` to make it work, which will generate `--una-enter-rotate: 30deg;`. +::: + ## Enter Animations To give an element enter animations, use the `animate-in` shortcut in combination with [`fade-in`](./fade#fade-in), [`zoom-in`](./zoom#zoom-in), [`spin-in`](./spin#spin-in) and [`slide-in`](./slide#slide-in) classnames. @@ -20,7 +38,7 @@ To give an element enter animations, use the `animate-in` shortcut in combinatio - + ``` ## Exit Animations @@ -31,5 +49,5 @@ To give an element exit animations, use the `animate-out` shortcut in combinatio - + ``` diff --git a/docs/src/animations/slide.md b/docs/src/animations/slide.md index e69de29..e5dfbd1 100644 --- a/docs/src/animations/slide.md +++ b/docs/src/animations/slide.md @@ -0,0 +1,295 @@ +# Slide Animations + +Use classname `slide-(in|out)--` to define animation's `translate`. + +- The `-` part is ***optional***. +- You can optionally use `slide-in-from` / `slide-out-to` instead of `slide-in` / `slide-out` to make it more readable + +
+ +You can use either of below as the `` (alias / full): + +- `t` / `top` +- `b` / `bottom` +- `l` / `left` +- `r` / `right` + +::: tip +`top` / `bottom` and `left` / `right` can be used together. + +| x-axis Direction | y-axis Direction | Result | +|------------------|------------------|--------| +| `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. + +```html + +``` +::: + +
+ +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` +- `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. + +You can always switch to the opposite direction to avoid using negative values. + +E.g. +```html + + +``` +is equivalent to +```html + + +``` +Note: CSS variable usages will be placed as is **without** any direction or positive / negative check. +::: + +## Slide In + +Define enter animation's starting `translate`. + +- The default **value** is `100%` if not specified. + +```html + + + + + + + + +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassnameProperty
slide-in-t--una-enter-translate-y: -100%;
slide-in-top
slide-in-from-t
slide-in-from-top
slide-in-t-full
slide-in-b--una-enter-translate-y: 100%;
slide-in-l--una-enter-translate-x: -100%;
slide-in-r--una-enter-translate-x: 100%;
slide-in-b-10--una-enter-translate-y: 2.5rem;
slide-in-b-.8--una-enter-translate-y: 0.2rem;
slide-in-b-52.1--una-enter-translate-y: 13.025rem;
slide-in-b-100--una-enter-translate-y: 25rem;
slide-in-b--20--una-enter-translate-y: -5rem;
slide-in-b--66.66--una-enter-translate-y: -16.665rem;
slide-in-t--20--una-enter-translate-y: 5rem;
slide-in-t--66.66--una-enter-translate-y: 16.665rem;
slide-in-b-1/3--una-enter-translate-y: 33.3333333333%;
slide-in-b--2/3--una-enter-translate-y: -66.6666666667%;
slide-in-t--2/3--una-enter-translate-y: 66.6666666667%;
slide-in-b-full--una-enter-translate-y: 100%;
slide-in-t-$my-css-var--una-enter-translate-y: var(--my-css-var);
slide-in-b-$my-css-var
slide-in-l-$my-css-var--una-enter-translate-x: var(--my-css-var);
slide-in-r-$my-css-var
+ +## Slide Out + +Define exit animation's starting `translate`. + +- The default **value** is `100%` if not specified. + +```html + + + + + + + + +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassnameProperty
slide-out-t--una-exit-translate-y: -100%;
slide-out-top
slide-out-to-t
slide-out-to-top
slide-out-t-full
slide-out-b--una-exit-translate-y: 100%;
slide-out-l--una-exit-translate-x: -100%;
slide-out-r--una-exit-translate-x: 100%;
slide-out-b-10--una-exit-translate-y: 2.5rem;
slide-out-b-.8--una-exit-translate-y: 0.2rem;
slide-out-b-52.1--una-exit-translate-y: 13.025rem;
slide-out-b-100--una-exit-translate-y: 25rem;
slide-out-b--20--una-exit-translate-y: -5rem;
slide-out-b--66.66--una-exit-translate-y: -16.665rem;
slide-out-t--20--una-exit-translate-y: 5rem;
slide-out-t--66.66--una-exit-translate-y: 16.665rem;
slide-out-b-1/3--una-exit-translate-y: 33.3333333333%;
slide-out-b--2/3--una-exit-translate-y: -66.6666666667%;
slide-out-t--2/3--una-exit-translate-y: 66.6666666667%;
slide-out-b-full--una-exit-translate-y: 100%;
slide-out-t-$my-css-var--una-exit-translate-y: var(--my-css-var);
slide-out-b-$my-css-var
slide-out-l-$my-css-var--una-exit-translate-x: var(--my-css-var);
slide-out-r-$my-css-var
diff --git a/docs/src/animations/spin.md b/docs/src/animations/spin.md index e69de29..b362a1c 100644 --- a/docs/src/animations/spin.md +++ b/docs/src/animations/spin.md @@ -0,0 +1,69 @@ +# Spin Animations + +Use classname `spin-(in|out)-` to define animation's `rotate`. + +- The `-` part is ***optional***. + +
+ +You can use either of below as the ``: + +- Any number including negative and decimals. E.g. `spin-in-50` +- Number followed by one of the unit: `deg`, `rad`, `grad` or `turn`. E.g. `spin-in-3.1416rad` +- CSS variable. E.g. `spin-in-$my-css-var` + +## Spin In + +Define enter animation's starting `rotate`. + +- The default **value** is `30deg` if not specified. +- The default **unit** is `deg` if not specified. + +```html + + + + +``` + +| Classname | Property | +|-----------------------|------------------------------------------| +| `spin-in` | `--una-enter-rotate: 30deg;` | +| `spin-in-0` | `--una-enter-rotate: 0;` | +| `spin-in-10` | `--una-enter-rotate: 10deg;` | +| `spin-in-.8` | `--una-enter-rotate: 0.8deg;` | +| `spin-in-52.1` | `--una-enter-rotate: 52.1deg;` | +| `spin-in--20` | `--una-enter-rotate: -20deg;` | +| `spin-in--66.66` | `--una-enter-rotate: -66.66deg;` | +| `spin-in-3.1416rad` | `--una-enter-rotate: 3.1416rad;` | +| `spin-in--170grad` | `--una-enter-rotate: -170grad;` | +| `spin-in-0.6turn` | `--una-enter-rotate: 0.6turn;` | +| `spin-in-$my-css-var` | `--una-enter-rotate: var(--my-css-var);` | + +## Spin Out + +Define exit animation's ending `rotate`. + +- The default **value** is `30deg` if not specified. +- The default **unit** is `deg` if not specified. + +```html + + + + +``` + +| Classname | Property | +|------------------------|-----------------------------------------| +| `spin-out` | `--una-exit-rotate: 30deg;` | +| `spin-out-0` | `--una-exit-rotate: 0;` | +| `spin-out-10` | `--una-exit-rotate: 10deg;` | +| `spin-out-.8` | `--una-exit-rotate: 0.8deg;` | +| `spin-out-52.1` | `--una-exit-rotate: 52.1deg;` | +| `spin-out--20` | `--una-exit-rotate: -20deg;` | +| `spin-out--66.66` | `--una-exit-rotate: -66.66deg;` | +| `spin-out-3.1416rad` | `--una-exit-rotate: 3.1416rad;` | +| `spin-out--170grad` | `--una-exit-rotate: -170grad;` | +| `spin-out-0.6turn` | `--una-exit-rotate: 0.6turn;` | +| `spin-out-$my-css-var` | `--una-exit-rotate: var(--my-css-var);` | diff --git a/docs/src/animations/zoom.md b/docs/src/animations/zoom.md index bbcaa95..c653a3d 100644 --- a/docs/src/animations/zoom.md +++ b/docs/src/animations/zoom.md @@ -2,77 +2,157 @@ Use classname `zoom-(in|out)-` to define animation's `scale`. -The `-` part is ***optional***. +- The `-` part is ***optional***. -You can use either any of below as the ``: -- Any number including negative and decimals, e.g. `zoom-in-50`. -- Any fraction including negative, e.g. `zoom-in-1/2`. -- `full` as `100%`, e.g. `zoom-in-full`. -- Any raw value within brackets, e.g. `zoom-in-[0.5]`. -- Css variable with either `$foo`, `[--foo]` or `[var(--foo)]`, e.g. `zoom-in-$my-css-var`. +
+ +You can use either of below as the ``: + +- Any number including negative and decimals. E.g. `zoom-in-50` +- 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` ## Zoom In Define enter animation's starting `scale`. -The default is `0` if no value is specified. +- The default **value** is `0` if not specified. ```html - - + ``` -| Classname | Property | -|--------------------------------|-----------------------------------------| -| `zoom-in` | `--una-enter-scale: 0;` | -| `zoom-in-0` | `--una-enter-scale: 0;` | -| `zoom-in-10` | `--una-enter-scale: 0.1;` | -| `zoom-in-52.1` | `--una-enter-scale: 0.521;` | -| `zoom-in-100` | `--una-enter-scale: 1;` | -| `zoom-in--20` | `--una-enter-scale: -0.2;` | -| `zoom-in--66.66` | `--una-enter-scale: -0.6666;` | -| `zoom-in-2/3` | `--una-enter-scale: 66.6666666667%;` | -| `zoom-in--2/3` | `--una-enter-scale: -66.6666666667%;` | -| `zoom-in-full` | `--una-enter-scale: 100%;` | -| `zoom-in-[.8]` | `--una-enter-scale: .8;` | -| `zoom-in-[-60%]` | `--una-enter-scale: -60%;` | -| `zoom-in-$my-css-var` | `--una-enter-scale: var(--my-css-var);` | -| `zoom-in-[--my-css-var]` | `--una-enter-scale: var(--my-css-var);` | -| `zoom-in-[var(--$my-css-var)]` | `--una-enter-scale: var(--my-css-var);` | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassnameProperty
zoom-in--una-enter-scale: 0;
zoom-in-0
zoom-in-10--una-enter-scale: 0.1;
zoom-in-.8--una-enter-scale: 0.008;
zoom-in-52.1--una-enter-scale: 0.521;
zoom-in-100--una-enter-scale: 1;
zoom-in--20--una-enter-scale: -0.2;
zoom-in--66.66--una-enter-scale: -0.6666;
zoom-in-1/3--una-enter-scale: 33.3333333333%;
zoom-in--2/3--una-enter-scale: -66.6666666667%;
zoom-in-full--una-enter-scale: 100%;
zoom-in-$my-css-var--una-enter-scale: var(--my-css-var);
-## Zoom out +## Zoom Out Define exit animation's ending `scale`. -The default is `0` if no value is specified. +- The default **value** is `0` if not specified. ```html - - - - - - + + + + + ``` -| Classname | Property | -|---------------------------------|----------------------------------------| -| `zoom-out` | `--una-exit-scale: 0;` | -| `zoom-out-0` | `--una-exit-scale: 0;` | -| `zoom-out-10` | `--una-exit-scale: 0.1;` | -| `zoom-out-52.1` | `--una-exit-scale: 0.521;` | -| `zoom-out-100` | `--una-exit-scale: 1;` | -| `zoom-out--20` | `--una-exit-scale: -0.2;` | -| `zoom-out--66.66` | `--una-exit-scale: -0.6666;` | -| `zoom-out-2/3` | `--una-exit-scale: 66.6666666667%;` | -| `zoom-out--2/3` | `--una-exit-scale: -66.6666666667%;` | -| `zoom-out-full` | `--una-exit-scale: 100%;` | -| `zoom-out-[.8]` | `--una-exit-scale: .8;` | -| `zoom-out-[-60%]` | `--una-exit-scale: -60%;` | -| `zoom-out-$my-css-var` | `--una-exit-scale: var(--my-css-var);` | -| `zoom-out-[--my-css-var]` | `--una-exit-scale: var(--my-css-var);` | -| `zoom-out-[var(--$my-css-var)]` | `--una-exit-scale: var(--my-css-var);` | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassnameProperty
zoom-out--una-exit-scale: 0;
zoom-out-0
zoom-out-10--una-exit-scale: 0.1;
zoom-out-.8--una-exit-scale: 0.008;
zoom-out-52.1--una-exit-scale: 0.521;
zoom-out-100--una-exit-scale: 1;
zoom-out--20--una-exit-scale: -0.2;
zoom-out--66.66--una-exit-scale: -0.6666;
zoom-out-1/3--una-exit-scale: 33.3333333333%;
zoom-out--2/3--una-exit-scale: -66.6666666667%;
zoom-out-full--una-exit-scale: 100%;
zoom-out-$my-css-var--una-exit-scale: var(--my-css-var);
diff --git a/docs/src/guide/comparisons.md b/docs/src/guide/comparisons.md index b20fcb5..eba0d66 100644 --- a/docs/src/guide/comparisons.md +++ b/docs/src/guide/comparisons.md @@ -2,13 +2,13 @@ ## tailwindcss-animate -The original `tailwindcss-animate` plugin are consist with 2 parts +The original `tailwindcss-animate` plugin consists with 2 parts - Animations - Animation property modifiers Animation property modifiers are already supported by `@unocss/preset-wind` or `@unocss/preset-uno`. Since this preset is based on them, so that part is removed. -Animations part remains as is, please refer to [Animations](/animations/). +Animations are way more flexible and powerful. Please refer to [Animations](/animations/).
diff --git a/docs/src/guide/index.md b/docs/src/guide/index.md index 5525dbc..c66a4b8 100644 --- a/docs/src/guide/index.md +++ b/docs/src/guide/index.md @@ -2,7 +2,9 @@ ## Overview -This is a preset of [UnoCSS](https://unocss.dev/), which adapts the [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) TailwindCSS plugin to be compatible with UnoCSS. +This is a preset of [UnoCSS](https://unocss.dev/) for creating beautiful animations with simple classnames. + +It adapts the [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) TailwindCSS plugin to be compatible with UnoCSS but more flexible and user-friendly. ## Installation diff --git a/docs/src/guide/migration.md b/docs/src/guide/migration.md index 0040281..b6fbd1d 100644 --- a/docs/src/guide/migration.md +++ b/docs/src/guide/migration.md @@ -7,7 +7,7 @@ next: Animations ## tailwindcss-animate -Animations part remains as is, but way more powerful thanks to UnoCSS's [dynamic rules](https://unocss.dev/config/rules#dynamic-rules). Please refer to [Animations](/animations/). +Animations part remains as is, but way more flexible and powerful thanks to UnoCSS's [dynamic rules](https://unocss.dev/config/rules#dynamic-rules). Please refer to [Animations](/animations/). Animation property modifiers are already supported by `@unocss/preset-wind` or `@unocss/preset-uno`, but with slightly different syntax. @@ -18,9 +18,9 @@ Animation property modifiers are already supported by `@unocss/preset-wind` or ` | `delay-` | `animate-delay-` | ```html - - - + + + ``` ### `animation-direction` @@ -40,12 +40,12 @@ Animation property modifiers are already supported by `@unocss/preset-wind` or ` ```html - - - - + + + + - + ``` ### `animation-duration` @@ -55,15 +55,15 @@ Animation property modifiers are already supported by `@unocss/preset-wind` or ` | `duration-` | `animate-duration-` | ```html - - - + + + ``` ::: tip If no `animation-duration` is defined, it will fall back to `theme.duration.DEFAULT`. -The value `150ms` by default if unchanged, see [unocss/packages/preset-mini/src/_theme/misc.ts at main · unocss/unocss](https://github.com/unocss/unocss/blob/efdc358897a308323e1d943dd0f7c13e344e1495/packages/preset-mini/src/_theme/misc.ts#L37) +The value is `150ms` by default if unchanged, see [unocss/packages/preset-mini/src/_theme/misc.ts at main · unocss/unocss](https://github.com/unocss/unocss/blob/efdc358897a308323e1d943dd0f7c13e344e1495/packages/preset-mini/src/_theme/misc.ts#L37) ::: ### `animation-fill-mode` @@ -89,14 +89,14 @@ The value `150ms` by default if unchanged, see [unocss/packages/preset-mini/src/ ```html - - - - - - - - + + + + + + + + ``` ### `animation-iteration-count` @@ -119,12 +119,12 @@ The value `150ms` by default if unchanged, see [unocss/packages/preset-mini/src/ ```html - - - + + + - - + + ``` ### `animation-play-state` @@ -150,12 +150,12 @@ The value `150ms` by default if unchanged, see [unocss/packages/preset-mini/src/ ```html - --play + +-play - - - + + + ``` ### `animation-timing-function` @@ -165,10 +165,10 @@ The value `150ms` by default if unchanged, see [unocss/packages/preset-mini/src/ | `ease-` | `animate-ease-` | ```html - - - - + + + + ``` ### Prefers reduced motion diff --git a/docs/src/index.md b/docs/src/index.md index e2d1946..edc31db 100644 --- a/docs/src/index.md +++ b/docs/src/index.md @@ -2,8 +2,8 @@ layout: home hero: - name: "Animations Preset for UnoCSS" - tagline: An adaptation of the tailwindcss-animate TailwindCSS plugin for UnoCSS + name: Animations Preset for UnoCSS + tagline: Simple · Flexible · Beautiful · Composable image: src: /logo.svg alt: UnoCSS diff --git a/package.json b/package.json index 4653f20..7e59f2f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "unocss-preset-animations", "version": "1.0.0-beta.7", - "description": "💅 An adaptation of the tailwindcss-animate Tailwind plugin for UnoCSS", + "description": "💅 An animation preset for UnoCSS, which adapts the tailwindcss-animate plugin", "packageManager": "pnpm@8.10.5", "type": "module", "author": "Aelita ", @@ -45,11 +45,11 @@ "docs:preview": "vitepress preview docs" }, "devDependencies": { - "@aelita-dev/eslint-config": "1.0.0-beta.20", - "@iconify/json": "^2.2.143", - "@types/markdown-it": "^13.0.6", - "@typescript-eslint/eslint-plugin": "^6.11.0", - "@typescript-eslint/parser": "^6.11.0", + "@aelita-dev/eslint-config": "1.0.0-beta.21", + "@iconify/json": "^2.2.144", + "@types/markdown-it": "^13.0.7", + "@typescript-eslint/eslint-plugin": "^6.12.0", + "@typescript-eslint/parser": "^6.12.0", "@unocss/core": "^0.57.6", "@unocss/preset-mini": "^0.57.6", "@vue/language-server": "^1.8.22", @@ -60,7 +60,7 @@ "eslint-plugin-import": "^2.29.0", "markdown-it": "^13.0.2", "sass": "^1.69.5", - "typescript": "^5.2.2", + "typescript": "^5.3.2", "unbuild": "^2.0.0", "unocss": "^0.57.6", "vitepress": "1.0.0-rc.29", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a98af41..5a96029 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,20 +11,20 @@ dependencies: devDependencies: '@aelita-dev/eslint-config': - specifier: 1.0.0-beta.20 - version: 1.0.0-beta.20(eslint@8.54.0)(typescript@5.2.2) + specifier: 1.0.0-beta.21 + version: 1.0.0-beta.21(eslint@8.54.0)(typescript@5.3.2) '@iconify/json': - specifier: ^2.2.143 - version: 2.2.143 + specifier: ^2.2.144 + version: 2.2.144 '@types/markdown-it': - specifier: ^13.0.6 - version: 13.0.6 + specifier: ^13.0.7 + version: 13.0.7 '@typescript-eslint/eslint-plugin': - specifier: ^6.11.0 - version: 6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.54.0)(typescript@5.2.2) + specifier: ^6.12.0 + version: 6.12.0(@typescript-eslint/parser@6.12.0)(eslint@8.54.0)(typescript@5.3.2) '@typescript-eslint/parser': - specifier: ^6.11.0 - version: 6.11.0(eslint@8.54.0)(typescript@5.2.2) + specifier: ^6.12.0 + version: 6.12.0(eslint@8.54.0)(typescript@5.3.2) '@unocss/core': specifier: ^0.57.6 version: 0.57.6 @@ -33,7 +33,7 @@ devDependencies: version: 0.57.6 '@vue/language-server': specifier: ^1.8.22 - version: 1.8.22(typescript@5.2.2) + version: 1.8.22(typescript@5.3.2) bumpp: specifier: ^9.2.0 version: 9.2.0 @@ -45,10 +45,10 @@ devDependencies: version: 0.3.9 eslint-import-resolver-typescript: specifier: ^3.6.1 - version: 3.6.1(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0) + version: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0) eslint-plugin-import: specifier: ^2.29.0 - version: 2.29.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) + version: 2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) markdown-it: specifier: ^13.0.2 version: 13.0.2 @@ -56,23 +56,23 @@ devDependencies: specifier: ^1.69.5 version: 1.69.5 typescript: - specifier: ^5.2.2 - version: 5.2.2 + specifier: ^5.3.2 + version: 5.3.2 unbuild: specifier: ^2.0.0 - version: 2.0.0(sass@1.69.5)(typescript@5.2.2) + version: 2.0.0(sass@1.69.5)(typescript@5.3.2) unocss: specifier: ^0.57.6 version: 0.57.6(postcss@8.4.31)(rollup@3.29.4)(vite@5.0.0) vitepress: specifier: 1.0.0-rc.29 - version: 1.0.0-rc.29(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.2.2) + version: 1.0.0-rc.29(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.3.2) vitest: specifier: ^0.34.6 version: 0.34.6(sass@1.69.5) vue: specifier: ^3.3.8 - version: 3.3.8(typescript@5.2.2) + version: 3.3.8(typescript@5.3.2) packages: @@ -81,20 +81,20 @@ packages: engines: {node: '>=0.10.0'} dev: true - /@aelita-dev/eslint-config@1.0.0-beta.20(eslint@8.54.0)(typescript@5.2.2): - resolution: {integrity: sha512-zlHmgN8bV0/iCYK58ntZr4GyqENCXWLijSNa6M+/m41g89hECO10zrSuhbifhmrnvvc4wEw6t7pkxMoLw53Isg==} + /@aelita-dev/eslint-config@1.0.0-beta.21(eslint@8.54.0)(typescript@5.3.2): + resolution: {integrity: sha512-Dpeu+ZV37P+1vmKYGfkSOYwUy5Rq6RFSwJh78aRAR7TbK+4HMxiOZ7pIzhz3g2L+p0D/OaxwDx5fJ4h178dL0w==} peerDependencies: eslint: '>=8.0.0' dependencies: '@antfu/eslint-define-config': 1.23.0-2 - '@typescript-eslint/eslint-plugin': 6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.54.0)(typescript@5.2.2) - '@typescript-eslint/parser': 6.11.0(eslint@8.54.0)(typescript@5.2.2) - '@unocss/eslint-plugin': 0.57.6(eslint@8.54.0)(typescript@5.2.2) + '@typescript-eslint/eslint-plugin': 6.12.0(@typescript-eslint/parser@6.12.0)(eslint@8.54.0)(typescript@5.3.2) + '@typescript-eslint/parser': 6.12.0(eslint@8.54.0)(typescript@5.3.2) + '@unocss/eslint-plugin': 0.57.6(eslint@8.54.0)(typescript@5.3.2) eslint: 8.54.0 eslint-config-flat-gitignore: 0.1.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0) - eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0) + eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.54.0) eslint-plugin-playwright: 0.18.0(eslint@8.54.0) eslint-plugin-react: 7.33.2(eslint@8.54.0) @@ -909,8 +909,8 @@ packages: resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==} dev: true - /@iconify/json@2.2.143: - resolution: {integrity: sha512-gwZmSttIFjhTVqbfV0lTqxCCPfZqI01YI9hSmSm3JGQVRIrzwEuOSe8YElyeWQikhGUoMj6R2mE7Vlw48yWstw==} + /@iconify/json@2.2.144: + resolution: {integrity: sha512-R8JfNAFdp+jJqsdK/ANYFj2iTuWlSphtuHg0d0Ja+UVntXhPptDX1jMASEQrCFnUhLgifjQ7UoBa6sYAUvFUgw==} dependencies: '@iconify/types': 2.0.0 pathe: 1.1.1 @@ -1237,8 +1237,8 @@ packages: resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==} dev: true - /@types/markdown-it@13.0.6: - resolution: {integrity: sha512-0VqpvusJn1/lwRegCxcHVdmLfF+wIsprsKMC9xW8UPcTxhFcQtoN/fBU1zMe8pH7D/RuueMh2CaBaNv+GrLqTw==} + /@types/markdown-it@13.0.7: + resolution: {integrity: sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==} dependencies: '@types/linkify-it': 3.0.5 '@types/mdurl': 1.0.5 @@ -1266,8 +1266,8 @@ packages: resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} dev: true - /@typescript-eslint/eslint-plugin@6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.54.0)(typescript@5.2.2): - resolution: {integrity: sha512-uXnpZDc4VRjY4iuypDBKzW1rz9T5YBBK0snMn8MaTSNd2kMlj50LnLBABELjJiOL5YHk7ZD8hbSpI9ubzqYI0w==} + /@typescript-eslint/eslint-plugin@6.12.0(@typescript-eslint/parser@6.12.0)(eslint@8.54.0)(typescript@5.3.2): + resolution: {integrity: sha512-XOpZ3IyJUIV1b15M7HVOpgQxPPF7lGXgsfcEIu3yDxFPaf/xZKt7s9QO/pbk7vpWQyVulpJbu4E5LwpZiQo4kA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha @@ -1278,25 +1278,25 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 6.11.0(eslint@8.54.0)(typescript@5.2.2) - '@typescript-eslint/scope-manager': 6.11.0 - '@typescript-eslint/type-utils': 6.11.0(eslint@8.54.0)(typescript@5.2.2) - '@typescript-eslint/utils': 6.11.0(eslint@8.54.0)(typescript@5.2.2) - '@typescript-eslint/visitor-keys': 6.11.0 + '@typescript-eslint/parser': 6.12.0(eslint@8.54.0)(typescript@5.3.2) + '@typescript-eslint/scope-manager': 6.12.0 + '@typescript-eslint/type-utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) + '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) + '@typescript-eslint/visitor-keys': 6.12.0 debug: 4.3.4 eslint: 8.54.0 graphemer: 1.4.0 ignore: 5.3.0 natural-compare: 1.4.0 semver: 7.5.4 - ts-api-utils: 1.0.3(typescript@5.2.2) - typescript: 5.2.2 + ts-api-utils: 1.0.3(typescript@5.3.2) + typescript: 5.3.2 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@6.11.0(eslint@8.54.0)(typescript@5.2.2): - resolution: {integrity: sha512-+whEdjk+d5do5nxfxx73oanLL9ghKO3EwM9kBCkUtWMRwWuPaFv9ScuqlYfQ6pAD6ZiJhky7TZ2ZYhrMsfMxVQ==} + /@typescript-eslint/parser@6.12.0(eslint@8.54.0)(typescript@5.3.2): + resolution: {integrity: sha512-s8/jNFPKPNRmXEnNXfuo1gemBdVmpQsK1pcu+QIvuNJuhFzGrpD7WjOcvDc/+uEdfzSYpNu7U/+MmbScjoQ6vg==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -1305,27 +1305,27 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 6.11.0 - '@typescript-eslint/types': 6.11.0 - '@typescript-eslint/typescript-estree': 6.11.0(typescript@5.2.2) - '@typescript-eslint/visitor-keys': 6.11.0 + '@typescript-eslint/scope-manager': 6.12.0 + '@typescript-eslint/types': 6.12.0 + '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) + '@typescript-eslint/visitor-keys': 6.12.0 debug: 4.3.4 eslint: 8.54.0 - typescript: 5.2.2 + typescript: 5.3.2 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/scope-manager@6.11.0: - resolution: {integrity: sha512-0A8KoVvIURG4uhxAdjSaxy8RdRE//HztaZdG8KiHLP8WOXSk0vlF7Pvogv+vlJA5Rnjj/wDcFENvDaHb+gKd1A==} + /@typescript-eslint/scope-manager@6.12.0: + resolution: {integrity: sha512-5gUvjg+XdSj8pcetdL9eXJzQNTl3RD7LgUiYTl8Aabdi8hFkaGSYnaS6BLc0BGNaDH+tVzVwmKtWvu0jLgWVbw==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.11.0 - '@typescript-eslint/visitor-keys': 6.11.0 + '@typescript-eslint/types': 6.12.0 + '@typescript-eslint/visitor-keys': 6.12.0 dev: true - /@typescript-eslint/type-utils@6.11.0(eslint@8.54.0)(typescript@5.2.2): - resolution: {integrity: sha512-nA4IOXwZtqBjIoYrJcYxLRO+F9ri+leVGoJcMW1uqr4r1Hq7vW5cyWrA43lFbpRvQ9XgNrnfLpIkO3i1emDBIA==} + /@typescript-eslint/type-utils@6.12.0(eslint@8.54.0)(typescript@5.3.2): + resolution: {integrity: sha512-WWmRXxhm1X8Wlquj+MhsAG4dU/Blvf1xDgGaYCzfvStP2NwPQh6KBvCDbiOEvaE0filhranjIlK/2fSTVwtBng==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -1334,23 +1334,23 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.11.0(typescript@5.2.2) - '@typescript-eslint/utils': 6.11.0(eslint@8.54.0)(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) + '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) debug: 4.3.4 eslint: 8.54.0 - ts-api-utils: 1.0.3(typescript@5.2.2) - typescript: 5.2.2 + ts-api-utils: 1.0.3(typescript@5.3.2) + typescript: 5.3.2 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/types@6.11.0: - resolution: {integrity: sha512-ZbEzuD4DwEJxwPqhv3QULlRj8KYTAnNsXxmfuUXFCxZmO6CF2gM/y+ugBSAQhrqaJL3M+oe4owdWunaHM6beqA==} + /@typescript-eslint/types@6.12.0: + resolution: {integrity: sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q==} engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@6.11.0(typescript@5.2.2): - resolution: {integrity: sha512-Aezzv1o2tWJwvZhedzvD5Yv7+Lpu1by/U1LZ5gLc4tCx8jUmuSCMioPFRjliN/6SJIvY6HpTtJIWubKuYYYesQ==} + /@typescript-eslint/typescript-estree@6.12.0(typescript@5.3.2): + resolution: {integrity: sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: typescript: '*' @@ -1358,20 +1358,20 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 6.11.0 - '@typescript-eslint/visitor-keys': 6.11.0 + '@typescript-eslint/types': 6.12.0 + '@typescript-eslint/visitor-keys': 6.12.0 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 - ts-api-utils: 1.0.3(typescript@5.2.2) - typescript: 5.2.2 + ts-api-utils: 1.0.3(typescript@5.3.2) + typescript: 5.3.2 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@6.11.0(eslint@8.54.0)(typescript@5.2.2): - resolution: {integrity: sha512-p23ibf68fxoZy605dc0dQAEoUsoiNoP3MD9WQGiHLDuTSOuqoTsa4oAy+h3KDkTcxbbfOtUjb9h3Ta0gT4ug2g==} + /@typescript-eslint/utils@6.12.0(eslint@8.54.0)(typescript@5.3.2): + resolution: {integrity: sha512-LywPm8h3tGEbgfyjYnu3dauZ0U7R60m+miXgKcZS8c7QALO9uWJdvNoP+duKTk2XMWc7/Q3d/QiCuLN9X6SWyQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -1379,9 +1379,9 @@ packages: '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0) '@types/json-schema': 7.0.15 '@types/semver': 7.5.5 - '@typescript-eslint/scope-manager': 6.11.0 - '@typescript-eslint/types': 6.11.0 - '@typescript-eslint/typescript-estree': 6.11.0(typescript@5.2.2) + '@typescript-eslint/scope-manager': 6.12.0 + '@typescript-eslint/types': 6.12.0 + '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) eslint: 8.54.0 semver: 7.5.4 transitivePeerDependencies: @@ -1389,11 +1389,11 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys@6.11.0: - resolution: {integrity: sha512-+SUN/W7WjBr05uRxPggJPSzyB8zUpaYo2hByKasWbqr3PM8AXfZt8UHdNpBS1v9SA62qnSSMF3380SwDqqprgQ==} + /@typescript-eslint/visitor-keys@6.12.0: + resolution: {integrity: sha512-rg3BizTZHF1k3ipn8gfrzDXXSFKyOEB5zxYXInQ6z0hUvmQlhaZQzK+YmHmNViMA9HzW5Q9+bPPt90bU6GQwyw==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.11.0 + '@typescript-eslint/types': 6.12.0 eslint-visitor-keys: 3.4.3 dev: true @@ -1454,11 +1454,11 @@ packages: /@unocss/core@0.57.6: resolution: {integrity: sha512-rkqMX5Lyyl2u2PF2EMcH/QeFUAoiFeq5vnaGGYV2LVfTlDrEVx8CrNHlBmWr5fXrhyzXi366pK/ErJ2pepGiqg==} - /@unocss/eslint-plugin@0.57.6(eslint@8.54.0)(typescript@5.2.2): + /@unocss/eslint-plugin@0.57.6(eslint@8.54.0)(typescript@5.3.2): resolution: {integrity: sha512-6H3kBdLVh6HqOMiGAz6DDQqdDeVmhQ9brRyIwckfD1rXde+c6lSQyTkYcqVW04XtN0m5VoivgOP+JPpaqX4ofw==} engines: {node: '>=14'} dependencies: - '@typescript-eslint/utils': 6.11.0(eslint@8.54.0)(typescript@5.2.2) + '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) '@unocss/config': 0.57.6 '@unocss/core': 0.57.6 magic-string: 0.30.5 @@ -1671,7 +1671,7 @@ packages: vue: ^3.2.25 dependencies: vite: 5.0.0(@types/node@20.9.2)(sass@1.69.5) - vue: 3.3.8(typescript@5.2.2) + vue: 3.3.8(typescript@5.3.2) dev: true /@vitest/expect@0.34.6: @@ -1812,7 +1812,7 @@ packages: resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==} dev: true - /@vue/language-core@1.8.22(typescript@5.2.2): + /@vue/language-core@1.8.22(typescript@5.3.2): resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==} peerDependencies: typescript: '*' @@ -1827,33 +1827,33 @@ packages: computeds: 0.0.1 minimatch: 9.0.3 muggle-string: 0.3.1 - typescript: 5.2.2 + typescript: 5.3.2 vue-template-compiler: 2.7.15 dev: true - /@vue/language-server@1.8.22(typescript@5.2.2): + /@vue/language-server@1.8.22(typescript@5.3.2): resolution: {integrity: sha512-F1ogp9CgEOLPg2ydkDFHFBVBBgzzUYZMAef0/SO01NHEQeIoORtxXKdqgF8hzZlGjh3EqmliogeFCBOULiYuTg==} hasBin: true dependencies: '@volar/language-core': 1.10.10 '@volar/language-server': 1.10.10 '@volar/typescript': 1.10.10 - '@vue/language-core': 1.8.22(typescript@5.2.2) - '@vue/language-service': 1.8.22(typescript@5.2.2) + '@vue/language-core': 1.8.22(typescript@5.3.2) + '@vue/language-service': 1.8.22(typescript@5.3.2) vscode-languageserver-protocol: 3.17.5 - vue-component-meta: 1.8.22(typescript@5.2.2) + vue-component-meta: 1.8.22(typescript@5.3.2) transitivePeerDependencies: - typescript dev: true - /@vue/language-service@1.8.22(typescript@5.2.2): + /@vue/language-service@1.8.22(typescript@5.3.2): resolution: {integrity: sha512-N2VjxOfkTVzSC2PdPq52bZXAtmL+tSEpALtEkFCxv7YA1XeieMvUv1bn7K7P6CoNhakTMdi2ouEyBg9Lc1A+WQ==} dependencies: '@volar/language-core': 1.10.10 '@volar/language-service': 1.10.10 '@volar/typescript': 1.10.10 '@vue/compiler-dom': 3.3.8 - '@vue/language-core': 1.8.22(typescript@5.2.2) + '@vue/language-core': 1.8.22(typescript@5.3.2) '@vue/shared': 3.3.8 computeds: 0.0.1 volar-service-css: 0.0.15(@volar/language-service@1.10.10) @@ -1908,7 +1908,7 @@ packages: dependencies: '@vue/compiler-ssr': 3.3.8 '@vue/shared': 3.3.8 - vue: 3.3.8(typescript@5.2.2) + vue: 3.3.8(typescript@5.3.2) dev: true /@vue/shared@3.3.8: @@ -2800,7 +2800,7 @@ packages: - supports-color dev: true - /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0): + /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0): resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -2810,8 +2810,8 @@ packages: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.54.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) - eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) + eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) fast-glob: 3.3.2 get-tsconfig: 4.7.2 is-core-module: 2.13.1 @@ -2823,7 +2823,7 @@ packages: - supports-color dev: true - /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0): + /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0): resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} engines: {node: '>=4'} peerDependencies: @@ -2844,16 +2844,16 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.11.0(eslint@8.54.0)(typescript@5.2.2) + '@typescript-eslint/parser': 6.12.0(eslint@8.54.0)(typescript@5.3.2) debug: 3.2.7 eslint: 8.54.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.54.0) transitivePeerDependencies: - supports-color dev: true - /eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0): + /eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0): resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==} engines: {node: '>=4'} peerDependencies: @@ -2863,7 +2863,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.11.0(eslint@8.54.0)(typescript@5.2.2) + '@typescript-eslint/parser': 6.12.0(eslint@8.54.0)(typescript@5.3.2) array-includes: 3.1.7 array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 @@ -2872,7 +2872,7 @@ packages: doctrine: 2.1.0 eslint: 8.54.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.11.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.54.0) hasown: 2.0.0 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -4030,7 +4030,7 @@ packages: hasBin: true dev: true - /mkdist@1.3.1(sass@1.69.5)(typescript@5.2.2): + /mkdist@1.3.1(sass@1.69.5)(typescript@5.3.2): resolution: {integrity: sha512-S7C0kObf9Wumw1zCtDkiqwaACKlGpJs2YrmDuirFfgHXtwK/ZLpLRMzPn5CPnGPjO+28xAQwepBxnjhnch9sHQ==} hasBin: true peerDependencies: @@ -4052,7 +4052,7 @@ packages: mri: 1.2.0 pathe: 1.1.1 sass: 1.69.5 - typescript: 5.2.2 + typescript: 5.3.2 dev: true /mlly@1.4.2: @@ -4520,7 +4520,7 @@ packages: glob: 7.2.3 dev: true - /rollup-plugin-dts@6.1.0(rollup@3.29.4)(typescript@5.2.2): + /rollup-plugin-dts@6.1.0(rollup@3.29.4)(typescript@5.3.2): resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==} engines: {node: '>=16'} peerDependencies: @@ -4529,7 +4529,7 @@ packages: dependencies: magic-string: 0.30.5 rollup: 3.29.4 - typescript: 5.2.2 + typescript: 5.3.2 optionalDependencies: '@babel/code-frame': 7.22.13 dev: true @@ -4886,13 +4886,13 @@ packages: engines: {node: '>=6'} dev: true - /ts-api-utils@1.0.3(typescript@5.2.2): + /ts-api-utils@1.0.3(typescript@5.3.2): resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==} engines: {node: '>=16.13.0'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.2.2 + typescript: 5.3.2 dev: true /tsconfig-paths@3.14.2: @@ -4973,8 +4973,8 @@ packages: semver: 7.5.4 dev: true - /typescript@5.2.2: - resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} + /typescript@5.3.2: + resolution: {integrity: sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==} engines: {node: '>=14.17'} hasBin: true dev: true @@ -4996,7 +4996,7 @@ packages: which-boxed-primitive: 1.0.2 dev: true - /unbuild@2.0.0(sass@1.69.5)(typescript@5.2.2): + /unbuild@2.0.0(sass@1.69.5)(typescript@5.3.2): resolution: {integrity: sha512-JWCUYx3Oxdzvw2J9kTAp+DKE8df/BnH/JTSj6JyA4SH40ECdFu7FoJJcrm8G92B7TjofQ6GZGjJs50TRxoH6Wg==} hasBin: true peerDependencies: @@ -5020,15 +5020,15 @@ packages: hookable: 5.5.3 jiti: 1.21.0 magic-string: 0.30.5 - mkdist: 1.3.1(sass@1.69.5)(typescript@5.2.2) + mkdist: 1.3.1(sass@1.69.5)(typescript@5.3.2) mlly: 1.4.2 pathe: 1.1.1 pkg-types: 1.0.3 pretty-bytes: 6.1.1 rollup: 3.29.4 - rollup-plugin-dts: 6.1.0(rollup@3.29.4)(typescript@5.2.2) + rollup-plugin-dts: 6.1.0(rollup@3.29.4)(typescript@5.3.2) scule: 1.1.0 - typescript: 5.2.2 + typescript: 5.3.2 untyped: 1.4.0 transitivePeerDependencies: - sass @@ -5192,7 +5192,7 @@ packages: fsevents: 2.3.3 dev: true - /vitepress@1.0.0-rc.29(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.2.2): + /vitepress@1.0.0-rc.29(@algolia/client-search@4.20.0)(postcss@8.4.31)(sass@1.69.5)(search-insights@2.11.0)(typescript@5.3.2): resolution: {integrity: sha512-6sKmyEvH16SgMqkHzRwwadt9Uju13AOIqouzOVEg3Rk6X9mds6jLsq2GxnAJvg0s6bl/0Qs/cw+f8SNki82ltw==} hasBin: true peerDependencies: @@ -5206,7 +5206,7 @@ packages: dependencies: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.11.0) - '@types/markdown-it': 13.0.6 + '@types/markdown-it': 13.0.7 '@vitejs/plugin-vue': 4.5.0(vite@5.0.0)(vue@3.3.8) '@vue/devtools-api': 6.5.1 '@vueuse/core': 10.6.1(vue@3.3.8) @@ -5218,7 +5218,7 @@ packages: postcss: 8.4.31 shiki: 0.14.5 vite: 5.0.0(@types/node@20.9.2)(sass@1.69.5) - vue: 3.3.8(typescript@5.2.2) + vue: 3.3.8(typescript@5.3.2) transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -5493,7 +5493,7 @@ packages: resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} dev: true - /vue-component-meta@1.8.22(typescript@5.2.2): + /vue-component-meta@1.8.22(typescript@5.3.2): resolution: {integrity: sha512-xic335E3KOm3uMcg23UDqo0y1XII8PVPjwoIkzi3tjUzP0edM3m9jF8SYevnJLp1NqiZ035iG1N6QMEauSAulA==} peerDependencies: typescript: '*' @@ -5502,9 +5502,9 @@ packages: optional: true dependencies: '@volar/typescript': 1.10.10 - '@vue/language-core': 1.8.22(typescript@5.2.2) + '@vue/language-core': 1.8.22(typescript@5.3.2) typesafe-path: 0.2.2 - typescript: 5.2.2 + typescript: 5.3.2 vue-component-type-helpers: 1.8.22 dev: true @@ -5524,7 +5524,7 @@ packages: '@vue/composition-api': optional: true dependencies: - vue: 3.3.8(typescript@5.2.2) + vue: 3.3.8(typescript@5.3.2) dev: true /vue-eslint-parser@9.3.2(eslint@8.54.0): @@ -5552,7 +5552,7 @@ packages: he: 1.2.0 dev: true - /vue@3.3.8(typescript@5.2.2): + /vue@3.3.8(typescript@5.3.2): resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==} peerDependencies: typescript: '*' @@ -5565,7 +5565,7 @@ packages: '@vue/runtime-dom': 3.3.8 '@vue/server-renderer': 3.3.8(vue@3.3.8) '@vue/shared': 3.3.8 - typescript: 5.2.2 + typescript: 5.3.2 dev: true /which-boxed-primitive@1.0.2: diff --git a/src/rules.ts b/src/rules.ts index 7631e95..0b0edbf 100644 --- a/src/rules.ts +++ b/src/rules.ts @@ -1,30 +1,31 @@ import { h } from '@unocss/preset-mini/utils' import { CSS_VARIABLE_PREFIX } from './constants' +import { normalizeDirection } from './utils' import type { Theme } from '@unocss/preset-mini' import type { Rule } from 'unocss' const DEFAULT_FADE_OPACITY = '0' const DEFAULT_ZOOM_SCALE = '0' -const DEFAULT_SPIN_DEGREE = '30' +const DEFAULT_SPIN_DEGREE = '30deg' const DEFAULT_SLIDE_TRANSLATE = '100%' -const directionsAutocomplete = '(t|b|l|r|top|bottom|left|right)' +const DIRECTIONS_AUTOCOMPLETE = '(t|b|l|r|top|bottom|left|right)' const fadeRules: Rule[] = [ [ /^fade-in(?:-(.+))?$/, ([, op]) => ({ - [`${CSS_VARIABLE_PREFIX}-enter-opacity`]: h.bracket.cssvar.percent(op || DEFAULT_FADE_OPACITY) + [`${CSS_VARIABLE_PREFIX}-enter-opacity`]: h.cssvar.percent(op || DEFAULT_FADE_OPACITY) }), { autocomplete: 'fade-(in|out)-' } ], [ /^fade-out(?:-(.+))?$/, ([, op]) => ({ - [`${CSS_VARIABLE_PREFIX}-exit-opacity`]: h.bracket.cssvar.percent(op || DEFAULT_FADE_OPACITY) + [`${CSS_VARIABLE_PREFIX}-exit-opacity`]: h.cssvar.percent(op || DEFAULT_FADE_OPACITY) }) ] ] @@ -34,14 +35,14 @@ const zoomRules: Rule[] = [ [ /^zoom-in(?:-(.+))?$/, ([, scale]) => ({ - [`${CSS_VARIABLE_PREFIX}-enter-scale`]: h.bracket.cssvar.fraction.percent(scale || DEFAULT_ZOOM_SCALE) + [`${CSS_VARIABLE_PREFIX}-enter-scale`]: h.cssvar.fraction.percent(scale || DEFAULT_ZOOM_SCALE) }), { autocomplete: 'zoom-(in|out)-' } ], [ /^zoom-out(?:-(.+))?$/, ([, scale]) => ({ - [`${CSS_VARIABLE_PREFIX}-exit-scale`]: h.bracket.cssvar.fraction.percent(scale || DEFAULT_ZOOM_SCALE) + [`${CSS_VARIABLE_PREFIX}-exit-scale`]: h.cssvar.fraction.percent(scale || DEFAULT_ZOOM_SCALE) }) ] ] @@ -51,38 +52,52 @@ const spinRules: Rule[] = [ [ /^spin-in(?:-(.+))?$/, ([, deg]) => ({ - [`${CSS_VARIABLE_PREFIX}-enter-rotate`]: h.bracket.cssvar.degree(deg || DEFAULT_SPIN_DEGREE) + [`${CSS_VARIABLE_PREFIX}-enter-rotate`]: h.cssvar.degree(deg || DEFAULT_SPIN_DEGREE) }), { autocomplete: 'spin-(in|out)-' } ], [ /^spin-out(?:-(.+))?$/, ([, deg]) => ({ - [`${CSS_VARIABLE_PREFIX}-exit-rotate`]: h.bracket.cssvar.degree(deg || DEFAULT_SPIN_DEGREE) + [`${CSS_VARIABLE_PREFIX}-exit-rotate`]: h.cssvar.degree(deg || DEFAULT_SPIN_DEGREE) }) ] ] +const _handleSlideValue = (val: string | undefined, dir: string | undefined): string | undefined => { + let value = h.cssvar.fraction.rem(val || DEFAULT_SLIDE_TRANSLATE) + + if (!value) + return + + dir = normalizeDirection(dir) + + if (!value.startsWith('var(--') && ['top', 'left'].includes(dir ?? '')) { + if (value.startsWith('-')) + value = value.slice(1) + else + value = `-${value}` + } + + return value +} + const slideRules: Rule[] = [ [ /^slide-in(?:-from)?-(t|b|l|r|top|bottom|left|right)(?:-(.+))?$/, ([, dir, val]) => { - const value = h.bracket.cssvar.fraction.rem(val || DEFAULT_SLIDE_TRANSLATE) + const value = _handleSlideValue(val, dir) if (!value) return switch (dir) { - case 't': case 'top': return { [`${CSS_VARIABLE_PREFIX}-enter-translate-y`]: `-${value}` } - case 'b': case 'bottom': return { [`${CSS_VARIABLE_PREFIX}-enter-translate-y`]: value } - case 'l': case 'left': return { [`${CSS_VARIABLE_PREFIX}-enter-translate-x`]: `-${value}` } - case 'r': case 'right': return { [`${CSS_VARIABLE_PREFIX}-enter-translate-x`]: value } default: @@ -91,10 +106,10 @@ const slideRules: Rule[] = [ }, { autocomplete: [ - `slide-(in|out)-${directionsAutocomplete}-`, - `slide-(in|out)-${directionsAutocomplete}-full`, - `slide-in-from-${directionsAutocomplete}-`, - `slide-in-from-${directionsAutocomplete}-full` + `slide-(in|out)-${DIRECTIONS_AUTOCOMPLETE}-`, + `slide-(in|out)-${DIRECTIONS_AUTOCOMPLETE}-full`, + `slide-in-from-${DIRECTIONS_AUTOCOMPLETE}-`, + `slide-in-from-${DIRECTIONS_AUTOCOMPLETE}-full` ] } ], @@ -102,22 +117,16 @@ const slideRules: Rule[] = [ [ /^slide-out(?:-to)?-(t|b|l|r|top|bottom|left|right)(?:-(.+))?$/, ([, dir, val]) => { - const value = h.bracket.cssvar.fraction.rem(val || DEFAULT_SLIDE_TRANSLATE) + const value = _handleSlideValue(val, dir) if (!value) return switch (dir) { - case 't': case 'top': - return { [`${CSS_VARIABLE_PREFIX}-exit-translate-y`]: `-${value}` } - case 'b': case 'bottom': return { [`${CSS_VARIABLE_PREFIX}-exit-translate-y`]: value } - case 'l': case 'left': - return { [`${CSS_VARIABLE_PREFIX}-exit-translate-x`]: `-${value}` } - case 'r': case 'right': return { [`${CSS_VARIABLE_PREFIX}-exit-translate-x`]: value } default: @@ -126,8 +135,8 @@ const slideRules: Rule[] = [ }, { autocomplete: [ - `slide-out-to-${directionsAutocomplete}-`, - `slide-out-to-${directionsAutocomplete}-full` + `slide-out-to-${DIRECTIONS_AUTOCOMPLETE}-`, + `slide-out-to-${DIRECTIONS_AUTOCOMPLETE}-full` ] } ] diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..eeb8289 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,10 @@ +export const normalizeDirection = (dir: string | undefined): string | undefined => { + const dirMap: Record = { + t: 'top', + b: 'bottom', + l: 'left', + r: 'right' + } + + return dirMap[dir ?? ''] ?? dir +} diff --git a/tsconfig.json b/tsconfig.json index 6e234b7..87e17c0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,8 @@ "strict": true, "esModuleInterop": true, "skipLibCheck": true, - "noUncheckedIndexedAccess": true + "noUncheckedIndexedAccess": true, + "resolveJsonModule": true }, "include": [ "**/*.ts",