mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
cc228fbfc3
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>
115 lines
2.9 KiB
TypeScript
115 lines
2.9 KiB
TypeScript
import { candidate, css, html, json, test } from '../utils'
|
|
|
|
test(
|
|
'builds the `@tailwindcss/typography` plugin utilities',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"dependencies": {
|
|
"@tailwindcss/typography": "^0.5.14",
|
|
"tailwindcss": "workspace:^",
|
|
"@tailwindcss/cli": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'index.html': html`
|
|
<div className="prose">
|
|
<h1>Headline</h1>
|
|
<p>
|
|
Until now, trying to style an article, document, or blog post with Tailwind has been a
|
|
tedious task that required a keen eye for typography and a lot of complex custom CSS.
|
|
</p>
|
|
</div>
|
|
`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/typography';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec }) => {
|
|
await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
|
|
|
|
await fs.expectFileToContain('dist/out.css', [
|
|
candidate`prose`,
|
|
':where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))',
|
|
':where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *))',
|
|
])
|
|
},
|
|
)
|
|
|
|
test(
|
|
'builds the `@tailwindcss/forms` plugin utilities',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"dependencies": {
|
|
"@tailwindcss/forms": "^0.5.7",
|
|
"tailwindcss": "workspace:^",
|
|
"@tailwindcss/cli": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'index.html': html`
|
|
<input type="text" class="form-input" />
|
|
<textarea class="form-textarea"></textarea>
|
|
`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/forms';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec }) => {
|
|
await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
|
|
|
|
await fs.expectFileToContain('dist/out.css', [
|
|
//
|
|
candidate`form-input`,
|
|
candidate`form-textarea`,
|
|
])
|
|
await fs.expectFileNotToContain('dist/out.css', [
|
|
//
|
|
candidate`form-radio`,
|
|
])
|
|
},
|
|
)
|
|
|
|
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',
|
|
])
|
|
},
|
|
)
|