From 835c0518ffe2dcf6b261026ce514f4933ae64e7d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 14 Aug 2024 15:31:21 -0400
Subject: [PATCH] wip

---
 packages/tailwindcss/src/plugin-api.test.ts | 64 ++++++++++++++++++---
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/packages/tailwindcss/src/plugin-api.test.ts b/packages/tailwindcss/src/plugin-api.test.ts
index fe4ea3b5f..5128eed29 100644
--- a/packages/tailwindcss/src/plugin-api.test.ts
+++ b/packages/tailwindcss/src/plugin-api.test.ts
@@ -256,7 +256,7 @@ describe('theme', async () => {
     `)
   })
 
-  test('wip', async ({ expect }) => {
+  test('wip about the DEFAULT key', async ({ expect }) => {
     let input = css`
       @tailwind utilities;
       @plugin "my-plugin";
@@ -268,19 +268,19 @@ describe('theme', async () => {
           function ({ matchUtilities, theme }) {
             matchUtilities(
               {
-                duration: (value) => ({ 'animation-duration': value }),
+                'animate-duration': (value) => ({ 'animation-delay': value }),
               },
               {
-                values: theme('animationDuration'),
+                values: theme('transitionDuration'),
               },
             )
           },
           {
             theme: {
               extend: {
-                animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
-                  ...theme('transitionDuration'),
-                }),
+                transitionDuration: {
+                  DEFAULT: '1500ms',
+                },
               },
             },
           },
@@ -288,11 +288,57 @@ describe('theme', async () => {
       },
     })
 
-    expect(compiler.build(['duration-316'])).toMatchInlineSnapshot(`
-      ".duration-316 {
-        animation-duration: 316ms;
+    expect(compiler.build(['animate-duration'])).toMatchInlineSnapshot(`
+      ".animate-delay {
+        animation-delay: 1500ms;
       }
       "
     `)
   })
+
+  // 1. Access "new" theme keys from CSS using the old theme key notation
+  //   e.g. read `--animation-*` using theme('animation')
+  //   e.g. read `--animation-foo` using theme('animation.foo')
+
+  test('plugins can read CSS theme keys using the old theme key notation', async ({ expect }) => {
+    let input = css`
+      @tailwind utilities;
+      @plugin "my-plugin";
+      @theme reference {
+        --animation: pulse 1s linear infinite;
+        --animation-spin: spin 1s linear infinite;
+      }
+    `
+
+    let compiler = await compile(input, {
+      loadPlugin: async () => {
+        return plugin(function ({ matchUtilities, theme }) {
+          matchUtilities(
+            {
+              animation: (value) => ({ '--animation': value }),
+            },
+            {
+              values: theme('animation'),
+            },
+          )
+
+          matchUtilities(
+            {
+              animation2: (value) => ({ '--animation': value }),
+            },
+            {
+              values: {
+                DEFAULT: theme('animation.DEFAULT'),
+                twist: theme('animation.spin'),
+              },
+            },
+          )
+        })
+      },
+    })
+
+    expect(
+      compiler.build(['animation-spin', 'animation', 'animation2', 'animation2-twist']),
+    ).toMatchInlineSnapshot(`""`)
+  })
 })