Pass options when using addComponents and matchComponents (#14590)

We forgot to pass `options` from `addComponents` to `addUtilities` and from `matchComponents` to `matchUtilities`. This didn't affect anything using addComponents but anything that used `matchComponents` wouldn't have worked 😬
tailwindlabs · Oct 10, 2024 · 958bfc9 · 958bfc9
1 parent a6231b7
commit 958bfc9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix issue that could cause the CLI to crash when files are deleted while watching ([#14616](https://github.com/tailwindlabs/tailwindcss/pull/14616))
 - Ensure custom variants using the JS API have access to modifiers ([#14637](https://github.com/tailwindlabs/tailwindcss/pull/14637))
 - Ensure auto complete suggestions work when using `matchUtilities` ([#14589](https://github.com/tailwindlabs/tailwindcss/pull/14589))
+- Pass options when using `addComponents` and `matchComponents` ([#14590](https://github.com/tailwindlabs/tailwindcss/pull/14590))
 - _Upgrade (experimental)_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596))
 - _Upgrade (experimental)_: Resolve issues where some prefixed candidates were not properly migrated ([#14600](https://github.com/tailwindlabs/tailwindcss/pull/14600))
 

diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -3544,6 +3544,51 @@ describe('addComponents()', () => {
   })
 })
 
+describe('matchComponents()', () => {
+  test('is an alias for matchUtilities', async () => {
+    let compiled = await compile(
+      css`
+        @plugin "my-plugin";
+        @tailwind utilities;
+      `,
+      {
+        async loadModule(id, base) {
+          return {
+            base,
+            module: ({ matchComponents }: PluginAPI) => {
+              matchComponents(
+                {
+                  prose: (value) => ({ '--container-size': value }),
+                },
+                {
+                  values: {
+                    DEFAULT: 'normal',
+                    sm: 'sm',
+                    lg: 'lg',
+                  },
+                },
+              )
+            },
+          }
+        },
+      },
+    )
+
+    expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim())
+      .toMatchInlineSnapshot(`
+      ".prose {
+        --container-size: normal;
+      }
+
+      @media (hover: hover) {
+        .hover\\:prose-lg:hover {
+          --container-size: lg;
+        }
+      }"
+    `)
+  })
+})
+
 describe('prefix()', () => {
   test('is an identity function', async () => {
     let fn = vi.fn()

diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts
@@ -371,11 +371,11 @@ export function buildPluginApi(
     },
 
     addComponents(components, options) {
-      this.addUtilities(components)
+      this.addUtilities(components, options)
     },
 
     matchComponents(components, options) {
-      this.matchUtilities(components)
+      this.matchUtilities(components, options)
     },
 
     theme: createThemeFn(