Ensure custom variants using the JS API have access to modifiers

Author: philipp-spiess

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595))
 - Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594))
+- Ensure custom variants using the JS API have access to modifiers
 - _Upgrade (experimental)_: The upgrade tool now automatically discovers your JavaScript config ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597))
 
 ### Fixed

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -2295,6 +2295,52 @@ describe('matchVariant', () => {
       }"
     `)
   })
+
+  test.only('should be called with eventual modifiers', async () => {
+    let { build } = await compile(
+      css`
+        @plugin "my-plugin";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async (id, base) => {
+          return {
+            base,
+            module: ({ matchVariant }: PluginAPI) => {
+              matchVariant('my-container', (value, { modifier }) => {
+                function parseValue(value: string) {
+                  const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
+                  if (numericValue === null) return null
+
+                  return parseFloat(value)
+                }
+
+                const parsed = parseValue(value)
+                return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
+              })
+            },
+          }
+        },
+      },
+    )
+    let compiled = build([
+      'my-container-[250px]:underline',
+      'my-container-[250px]/placement:underline',
+    ])
+    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+      "@container (width >= 250px) {
+        .my-container-\\[250px\\]\\:underline {
+          text-decoration-line: underline;
+        }
+      }
+
+      @container placement (width >= 250px) {
+        .my-container-\\[250px\\]\\/placement\\:underline {
+          text-decoration-line: underline;
+        }
+      }"
+    `)
+  })
 })
 
 describe('addUtilities()', () => {

packages/tailwindcss/src/compat/plugin-api.ts

@@ -116,9 +116,13 @@ export function buildPluginApi(
       designSystem.variants.group(
         () => {
           designSystem.variants.functional(name, (ruleNodes, variant) => {
-            if (!variant.value || variant.modifier) {
+            if (!variant.value) {
               if (options?.values && 'DEFAULT' in options.values) {
-                ruleNodes.nodes = resolveVariantValue(options.values.DEFAULT, null, ruleNodes.nodes)
+                ruleNodes.nodes = resolveVariantValue(
+                  options.values.DEFAULT,
+                  variant.modifier,
+                  ruleNodes.nodes,
+                )
                 return
               }
               return null
@@ -136,7 +140,7 @@ export function buildPluginApi(
                 return
               }
 
-              ruleNodes.nodes = resolveVariantValue(defaultValue, null, ruleNodes.nodes)
+              ruleNodes.nodes = resolveVariantValue(defaultValue, variant.modifier, ruleNodes.nodes)
             }
           })
         },