Add support for matching multiple utility definitions for one candidate (tailwindlabs#14231)

Currently if a plugin adds a utility called `duration` it will take
precedence over the built-in utilities — or any utilities with the same
name in previously included plugins. However, in v3, we emitted matches
from _all_ plugins where possible.

Take this plugin for example which adds utilities for
`animation-duration` via the `duration-*` class:

```ts
import plugin from 'tailwindcss/plugin'

export default plugin(
  function ({ matchUtilities, theme }) {
    matchUtilities(
      { duration: (value) => ({ animationDuration: value }) },
      { values: theme("animationDuration") },
    )
  },
  {
    theme: {
      extend: {
        animationDuration: ({ theme }) => ({
          ...theme("transitionDuration"),
        }),
      }
    },
  }
)
```

Before this PR this plugin's `duration` utility would override the
built-in `duration` utility so you'd get this for a class like
`duration-3500`:
```css
.duration-3000 {
  animation-duration: 3500ms;
}
```

Now, after this PR, we'll emit rules for `transition-duration`
(Tailwind's built-in `duration-*` utility) and `animation-duration`
(from the above plugin) and you'll get this instead:
```css
.duration-3000 {
  transition-duration: 3500ms;
}

.duration-3000 {
  animation-duration: 3500ms;
}
```

These are output as separate rules to ensure that they can all be sorted
appropriately against other utilities.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

Author: thecrypticace

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `tailwindcss/colors` and `tailwindcss/defaultTheme` exports for use with plugins ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
 - Add support for the `@tailwindcss/typography` and `@tailwindcss/forms` plugins ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
 - Add support for the `theme()` function in CSS and class names ([#14177](https://github.com/tailwindlabs/tailwindcss/pull/14177))
+- Add support for matching multiple utility definitions for one candidate ([#14231](https://github.com/tailwindlabs/tailwindcss/pull/14231))
 
 ### Fixed
 

integrations/cli/plugins.test.ts

@@ -1,7 +1,7 @@
 import { candidate, css, html, json, test } from '../utils'
 
 test(
-  'builds the typography plugin utilities',
+  'builds the `@tailwindcss/typography` plugin utilities',
   {
     fs: {
       'package.json': json`
@@ -40,7 +40,7 @@ test(
 )
 
 test(
-  'builds the forms plugin utilities',
+  'builds the `@tailwindcss/forms` plugin utilities',
   {
     fs: {
       'package.json': json`
@@ -76,3 +76,39 @@ test(
     ])
   },
 )
+
+test(
+  'builds the `tailwindcss-animate` plugin utilities',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss-animate": "^1.0.7",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.html': html`
+        <div class="animate-in fade-in zoom-in duration-350"></div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin 'tailwindcss-animate';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [
+      candidate`animate-in`,
+      candidate`fade-in`,
+      candidate`zoom-in`,
+      candidate`duration-350`,
+      'transition-duration: 350ms',
+      'animation-duration: 350ms',
+    ])
+  },
+)

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -488,7 +488,6 @@ exports[`getClassList 1`] = `
   "bg-gradient-to-tl",
   "bg-gradient-to-tr",
   "bg-inherit",
-  "bg-inherit",
   "bg-left",
   "bg-left-bottom",
   "bg-left-top",
@@ -517,7 +516,6 @@ exports[`getClassList 1`] = `
   "bg-space",
   "bg-top",
   "bg-transparent",
-  "bg-transparent",
   "block",
   "blur-none",
   "border",

packages/tailwindcss/src/candidate.bench.ts

@@ -15,6 +15,6 @@ const designSystem = buildDesignSystem(new Theme())
 
 bench('parseCandidate', () => {
   for (let candidate of candidates) {
-    parseCandidate(candidate, designSystem)
+    Array.from(parseCandidate(candidate, designSystem))
   }
 })