wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
No description
5479 commits 80 branches 327 tags 212 MiB
Find a file
Philipp Spiess 1e0dfbc6d0
Add matchVariant API (#14371) 
This PR adds support for the `matchVariant` plugin API. I've copied over
all [V3
tests](f07dbff2a7/tests/match-variants.test.js)
and made sure they still pass.

## Sorted order of stacked arbitrary variants

The only difference in behavior is regarding the sort order of stacked
arbitrary variants: Sorting in this case now works by the latest defined
`matchVariant` taking precedence.

So, if you define a plugin like this:

```ts
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
  sort(a, z) {
    return parseInt(a.value) - parseInt(z.value)
  },
})

matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
  sort(a, z) {
    return parseInt(z.value) - parseInt(a.value)
  },
})
```

The resulting CSS is first sorted by the `testmax` values descending and
then the `testmin` values ascending, so these candidates:

```txt
testmin-[150px]:testmax-[400px]:order-2
testmin-[100px]:testmax-[350px]:order-3
testmin-[100px]:testmax-[300px]:order-4
testmin-[100px]:testmax-[400px]:order-1
```

Will resolve to the order outlined by the `order-` utility.

## At-rules and placeholders support

Since we added support for at-rules and placeholders in the
`matchVariant` syntax like this:

```ts
matchVariant(
  'potato',
  (flavor) => `@media (potato: ${flavor}) { @supports (font:bold) { &:large-potato } }`,
)
```

We also added support for the same syntax to the `addVariant` API:

```ts
addVariant(
  'potato',
  '@media (max-width: 400px) { @supports (font:bold) { &:large-potato } }',
)
```

The only change necessary in core was to call functional variants for
when the variant value is set to `null`. This allows functional variants
to define the un-parameterized implementation like `potato:underline` as
opposed to `potato[big]:underline`.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2024-09-11 16:45:07 +02:00
.github set registry url 2024-09-05 10:52:11 -04:00
crates v4.0.0-alpha.23 2024-09-05 10:43:07 -04:00
integrations Integration tests: Move all file writes into retry block (#14350) 2024-09-06 10:48:49 +02:00
packages Add matchVariant API (#14371) 2024-09-11 16:45:07 +02:00
patches Add standalone CLI (#14270) 2024-09-02 15:23:46 +02:00
playgrounds Postcss: Bring back proper type exports (#14256) 2024-08-26 15:54:07 +02:00
scripts Add GitHub release workflow (#14346) 2024-09-05 09:45:29 -04:00
.gitattributes Add .gitattributes and define a merge strategy for changelog files 2024-08-26 16:27:41 +02:00
.gitignore Add test.debug to integration tests (#14133) 2024-08-08 12:02:19 +02:00
.npmrc introduce v4 codebase 2024-03-05 14:29:15 +01:00
.prettierignore Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
Cargo.lock Improve Oxide scanner API (#14187) 2024-08-16 15:05:42 +02:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Add matchVariant API (#14371) 2024-09-11 16:45:07 +02:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Add standalone CLI (#14270) 2024-09-02 15:23:46 +02:00
pnpm-lock.yaml Rework Vite plugin to support lightningcss pre processor and fast rebuilds (#14269) 2024-09-04 10:09:24 +02:00
pnpm-workspace.yaml Bump dependencies (#14160) 2024-08-09 16:12:24 +02:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
turbo.json Fix Rust build by passing through RUSTUP_HOME variable (#14171) 2024-08-12 11:37:45 +02:00
vitest.workspace.ts introduce v4 codebase 2024-03-05 14:29:15 +01:00

README.md

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License

Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.