use css variables for animation properties

new-data-services · May 27, 2024 · 8c832a3 · 8c832a3
1 parent 66d661b
commit 8c832a3
Show file tree

Hide file tree

Showing 15 changed files with 790 additions and 74 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,9 +12,11 @@ yarn-debug.log*
 yarn-error.log*
 
 # misc
+/.build
 /.idea
+/.nvmrc
 /.vscode
-.nvmrc
-.DS_Store
+/dist
 *.local
+.DS_Store
 .env
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>tailwindcss-animated examples</title>
+        <link rel="stylesheet" href="dist/tailwind.css" />
+    </head>
+
+    <body>
+
+    </body>
+</html>
diff --git a/jest/index.test.js b/jest/index.test.js
@@ -6,7 +6,7 @@ function run(config, plugin = tailwindcss) {
     const { currentTestName } = expect.getState()
 
     config = {
-        plugins: [require('./../src/index.js')],
+        plugins: [require('./../src')],
         corePlugins: { preflight: false },
         ...config,
     }
@@ -21,8 +21,14 @@ it('should add `delay` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-delay-75 animate-delay-[333ms]"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-delay-75 { animation-delay: 75ms; }
-            .animate-delay-\[333ms\] { animation-delay: 333ms; }
+            .animate-delay-75 {
+                --tw-animate-delay: 75ms;
+                animation-delay: var(--tw-animate-delay);
+            }
+            .animate-delay-\[333ms\] {
+                --tw-animate-delay: 333ms;
+                animation-delay: var(--tw-animate-delay);
+            }
         `)
     })
 })
@@ -32,8 +38,14 @@ it('should add `duration` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-duration-75 animate-duration-[333ms]"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-duration-75 { animation-duration: 75ms; }
-            .animate-duration-\[333ms\] { animation-duration: 333ms; }
+            .animate-duration-75 {
+                --tw-animate-duration: 75ms;
+                animation-duration: var(--tw-animate-duration);
+            }
+            .animate-duration-\[333ms\] {
+                --tw-animate-duration: 333ms;
+                animation-duration: var(--tw-animate-duration);
+            }
         `)
     })
 })
@@ -43,8 +55,14 @@ it('should add `direction` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-normal animate-reverse"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-normal { animation-direction: normal; }
-            .animate-reverse { animation-direction: reverse; }
+            .animate-normal {
+                --tw-animate-direction: normal;
+                animation-direction: var(--tw-animate-direction);
+            }
+            .animate-reverse {
+                --tw-animate-direction: reverse;
+                animation-direction: var(--tw-animate-direction);
+            }
         `)
     })
 })
@@ -54,8 +72,14 @@ it('should add `fill-mode` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-fill-none animate-fill-both"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-fill-none { animation-fill-mode: normal; }
-            .animate-fill-both { animation-fill-mode: both; }
+            .animate-fill-none {
+                --tw-animate-fill: normal;
+                animation-fill-mode: var(--tw-animate-fill);
+            }
+            .animate-fill-both {
+                --tw-animate-fill: both;
+                animation-fill-mode: var(--tw-animate-fill);
+            }
         `)
     })
 })
@@ -65,8 +89,14 @@ it('should add `iteration-count` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-infinite animate-once"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-infinite { animation-iteration-count: infinite; }
-            .animate-once { animation-iteration-count: 1; }
+            .animate-infinite {
+                --tw-animate-iteration: infinite;
+                animation-iteration-count: var(--tw-animate-iteration);
+            }
+            .animate-once {
+                --tw-animate-iteration: 1;
+                animation-iteration-count: var(--tw-animate-iteration);
+            }
         `)
     })
 })
@@ -76,8 +106,14 @@ it('should add `play-state` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-play animate-stop"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-play { animation-play-state: running; }
-            .animate-stop { animation-play-state: paused; }
+            .animate-play {
+                --tw-animate-state: running;
+                animation-play-state: var(--tw-animate-state);
+            }
+            .animate-stop {
+                --tw-animate-state: paused;
+                animation-play-state: var(--tw-animate-state);
+            }
         `)
     })
 })
@@ -87,8 +123,14 @@ it('should add `timing-function` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-ease-linear animate-ease-in-out"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-ease-linear { animation-timing-function: linear; }
-            .animate-ease-in-out { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+            .animate-ease-linear {
+                --tw-animate-easing: linear;
+                animation-timing-function: var(--tw-animate-easing);
+            }
+            .animate-ease-in-out {
+                --tw-animate-easing: cubic-bezier(0.4, 0, 0.2, 1);
+                animation-timing-function: var(--tw-animate-easing);
+            }
         `)
     })
 })
@@ -98,28 +140,46 @@ it('should add `composition` utilities', () => {
         content: [{ raw: String.raw`<div class="animate-replace animate-add animate-accumulate"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-replace { animation-composition: replace; }
-            .animate-add { animation-composition: add; }
-            .animate-accumulate { animation-composition: accumulate; }
+            .animate-replace {
+                --tw-animate-composition: replace;
+                animation-composition: var(--tw-animate-composition);
+            }
+            .animate-add {
+                --tw-animate-composition: add;
+                animation-composition: var(--tw-animate-composition);
+            }
+            .animate-accumulate {
+                --tw-animate-composition: accumulate;
+                animation-composition: var(--tw-animate-composition);
+            }
         `)
     })
 })
 
 it('should add predefined animations', () => {
     return run({
-        content: [{ raw: String.raw`<div class="animate-fade animate-wiggle"></div>` }],
+        content: [{ raw: String.raw`<div class="animate-fade animate-spin"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
             @keyframes fade {
                 0% { opacity: 0; }
                 100% { opacity: 1; }
             }
-            .animate-fade { animation: fade 1s both; }
-            @keyframes wiggle {
-                0%, 100% { transform: rotate(-3deg); }
-                50% { transform: rotate(3deg); }
+            .animate-fade {
+                animation: fade var(--tw-animate-duration, 1s) var(--tw-animate-easing, ease) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both);
+            }
+            @keyframes spin {
+                to { transform: rotate(360deg); }
+            }
+            .animate-spin {
+                animation: spin var(--tw-animate-duration, 1s) var(--tw-animate-easing, linear) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
+            }
+            .animate-fade {
+                animation-composition: var(--tw-animate-composition);
+            }
+            .animate-spin {
+                animation-composition: var(--tw-animate-composition);
             }
-            .animate-wiggle { animation: wiggle 1s both; }
         `)
     })
 })
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     ],
     "main": "src/index.js",
     "scripts": {
+        "watch": "npm run dev -- -w",
+        "dev": "tailwindcss -o public/tailwind.css",
         "test": "jest --setupFilesAfterEnv '<rootDir>/jest/customMatchers.js'",
         "eslint": "npx eslint {src,jest}/**",
         "eslint:fix": "npx eslint {src,jest}/** --fix"