Add test

tailwindlabs · Oct 22, 2024 · 4d8841b · 4d8841b
1 parent 2452837
commit 4d8841b
Showing 1 changed file with 61 additions and 0 deletions.
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -71,6 +71,67 @@ describe('theme', async () => {
     `)
   })
 
+  test('keyframes added via addUtilities are appended to the AST', async () => {
+    let input = css`
+      @tailwind utilities;
+      @plugin "my-plugin";
+    `
+
+    let compiler = await compile(input, {
+      loadModule: async (id, base) => {
+        return {
+          base,
+          module: plugin(
+            function ({ addUtilities, theme }) {
+              addUtilities({
+                '@keyframes enter': theme('keyframes.enter'),
+                '@keyframes exit': theme('keyframes.exit'),
+              })
+            },
+            {
+              theme: {
+                extend: {
+                  keyframes: {
+                    enter: {
+                      from: {
+                        opacity: 'var(--tw-enter-opacity, 1)',
+                        transform:
+                          'translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))',
+                      },
+                    },
+                    exit: {
+                      to: {
+                        opacity: 'var(--tw-exit-opacity, 1)',
+                        transform:
+                          'translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ),
+        }
+      },
+    })
+
+    expect(compiler.build([])).toMatchInlineSnapshot(`
+      "@keyframes enter {
+        from {
+          opacity: var(--tw-enter-opacity, 1);
+          transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+        }
+      }
+      @keyframes exit {
+        to {
+          opacity: var(--tw-exit-opacity, 1);
+          transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+        }
+      }
+      "
+    `)
+  })
+
   test('plugin theme can extend colors', async () => {
     let input = css`
       @theme reference {