Skip to content

Conversation

@thecrypticace
Copy link
Contributor

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:

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:

.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:

.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.

Base automatically changed from feat/v4-plugin-typography-compat to next August 22, 2024 12:06
@philipp-spiess philipp-spiess force-pushed the feat/v4-plugin-multiple-matches branch from 186d087 to 55afb14 Compare August 22, 2024 13:51
@philipp-spiess philipp-spiess changed the title Match utilities from multiple plugins for a given class candidate Add support for matching multiple utility definitions for one candidate Aug 22, 2024
@philipp-spiess philipp-spiess marked this pull request as ready for review August 22, 2024 14:11
Copy link
Contributor

@philipp-spiess philipp-spiess left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Japanese Thumb

@philipp-spiess philipp-spiess merged commit cc228fb into next Aug 22, 2024
@philipp-spiess philipp-spiess deleted the feat/v4-plugin-multiple-matches branch August 22, 2024 14:22
philipp-spiess added a commit that referenced this pull request Aug 27, 2024
…te (#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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants