add arbitrary values for iteration count and timing function

new-data-services · May 28, 2024 · 1b62bf9 · 1b62bf9
1 parent 3a7a792
commit 1b62bf9
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 671 deletions.
diff --git a/jest/index.test.js b/jest/index.test.js
@@ -86,7 +86,7 @@ it('should add `fill-mode` utilities', () => {
 
 it('should add `iteration-count` utilities', () => {
     return run({
-        content: [{ raw: String.raw`<div class="animate-infinite animate-once"></div>` }],
+        content: [{ raw: String.raw`<div class="animate-infinite animate-once animate-iteration-[7]"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
             .animate-infinite {
@@ -97,6 +97,10 @@ it('should add `iteration-count` utilities', () => {
                 --tw-animate-iteration: 1;
                 animation-iteration-count: var(--tw-animate-iteration);
             }
+            .animate-iteration-\[7\] {
+                --tw-animate-iteration: 7;
+                animation-iteration-count: var(--tw-animate-iteration);
+            }
         `)
     })
 })
@@ -120,15 +124,19 @@ it('should add `play-state` utilities', () => {
 
 it('should add `timing-function` utilities', () => {
     return run({
-        content: [{ raw: String.raw`<div class="animate-ease-linear animate-ease-in-out"></div>` }],
+        content: [{ raw: String.raw`<div class="animate-ease animate-ease-[cubic-bezier(1,0.66,0.33,0)] animate-ease-linear"></div>` }],
     }).then(result => {
         expect(result.css).toMatchCss(String.raw`
-            .animate-ease-linear {
-                --tw-animate-easing: linear;
+            .animate-ease {
+                --tw-animate-easing: ease;
                 animation-timing-function: var(--tw-animate-easing);
             }
-            .animate-ease-in-out {
-                --tw-animate-easing: cubic-bezier(0.4, 0, 0.2, 1);
+            .animate-ease-\[cubic-bezier\(1\2c 0\.66\2c 0\.33\2c 0\)\] {
+                --tw-animate-easing: cubic-bezier(1, 0.66, 0.33, 0);
+                animation-timing-function: var(--tw-animate-easing);
+            }
+            .animate-ease-linear {
+                --tw-animate-easing: linear;
                 animation-timing-function: var(--tw-animate-easing);
             }
         `)

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "main": "src/index.js",
     "scripts": {
         "watch": "npm run dev -- -w",
-        "dev": "tailwindcss -o public/tailwind.css",
+        "dev": "tailwindcss -o dist/tailwind.css",
         "test": "jest --setupFilesAfterEnv '<rootDir>/jest/customMatchers.js'",
         "eslint": "npx eslint {src,jest}/**",
         "eslint:fix": "npx eslint {src,jest}/** --fix"