Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for matching multiple utility definitions for one candidate #14231

Merged
merged 12 commits into from
Aug 22, 2024

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
Member

@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
2 checks passed
@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 <hello@philippspiess.com>
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.

2 participants