When sorting utilities it was possible for a utility like `duration-700`
to come before `duration-75` or `duration-1000` to come before
`duration-150`.
This PR fixes this behavior by reading the full "magnitude" of each
numbers before we compare them.
This reverts #16211
We found some unexpected interactions with using `@apply` and CSS
variables in multi-root setups like CSS modules or Vue inline `<style>`
blocks that were broken due to that change. We plan to re-enable this
soon and include a proper fix for those scenarios.
## Test plan
- Updated snapshots
- Tested using the CLI in a new project:
<img width="1523" alt="Screenshot 2025-02-10 at 13 08 42"
src="https://github.com/user-attachments/assets/defe0858-adb3-4d61-9d2c-87166558fd68"
/>
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Here is everything you need to know about this update. Please take a
good look at what changed and the test results before merging this pull
request.
### What changed?
#### ✳️ eslint (9.18.0 → 9.19.0) ·
[Repo](https://github.com/eslint/eslint) ·
[Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/eslint/eslint/releases/tag/v9.19.0">9.19.0</a></h4>
<blockquote><h2 dir="auto">Features</h2>
<ul dir="auto">
<li>
<a
href="1637b8e87d"><code
class="notranslate">1637b8e</code></a> feat: add <code
class="notranslate">--report-unused-inline-configs</code> (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19201">#19201</a>)
(Josh Goldberg ✨)</li>
</ul>
<h2 dir="auto">Bug Fixes</h2>
<ul dir="auto">
<li>
<a
href="aae67172ab"><code
class="notranslate">aae6717</code></a> fix: sync rule type header
comments automatically (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19276">#19276</a>)
(Francesco Trotta)</li>
</ul>
<h2 dir="auto">Documentation</h2>
<ul dir="auto">
<li>
<a
href="cfea9abe0e"><code
class="notranslate">cfea9ab</code></a> docs: Clarify overrideConfig
option (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19370">#19370</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="2b84f666cd"><code
class="notranslate">2b84f66</code></a> docs: Update README (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19362">#19362</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="044f93cbbe"><code
class="notranslate">044f93c</code></a> docs: clarify frozen rule
description (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19351">#19351</a>)
(Pavel)</li>
<li>
<a
href="797ee7c0d6"><code
class="notranslate">797ee7c</code></a> docs: fix Bluesky links (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19368">#19368</a>)
(Milos Djermanovic)</li>
<li>
<a
href="81a9c0ebc3"><code
class="notranslate">81a9c0e</code></a> docs: Update README (GitHub
Actions Bot)</li>
<li>
<a
href="093fb3d402"><code
class="notranslate">093fb3d</code></a> docs: replace <code
class="notranslate">var</code> with <code class="notranslate">let</code>
and <code class="notranslate">const</code> in rule examples (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19365">#19365</a>)
(Tanuj Kanti)</li>
<li>
<a
href="417de32985"><code
class="notranslate">417de32</code></a> docs: replace var with const in
rule examples (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19352">#19352</a>)
(jj)</li>
<li>
<a
href="17f2aaec16"><code
class="notranslate">17f2aae</code></a> docs: update getting-started
config to match default generated config (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19308">#19308</a>)
(0xDev)</li>
<li>
<a
href="8a0a5a8851"><code
class="notranslate">8a0a5a8</code></a> docs: better <code
class="notranslate">global ignores</code> instruction (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19297">#19297</a>)
(Jacopo Marrone)</li>
<li>
<a
href="6671a2cd8c"><code
class="notranslate">6671a2c</code></a> docs: Update README (GitHub
Actions Bot)</li>
<li>
<a
href="e39d3f22ff"><code
class="notranslate">e39d3f2</code></a> docs: fix divider for rule
category (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19264">#19264</a>)
(Tanuj Kanti)</li>
<li>
<a
href="e0cf53f80a"><code
class="notranslate">e0cf53f</code></a> docs: fix search result box
position for small screens (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19328">#19328</a>)
(Tanuj Kanti)</li>
<li>
<a
href="f92a6803a1"><code
class="notranslate">f92a680</code></a> docs: replace var with let or
const in rule examples (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19331">#19331</a>)
(Ravi Teja Kolla)</li>
<li>
<a
href="b04b84bc17"><code
class="notranslate">b04b84b</code></a> docs: revert accidental changes
in TS config files docs (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19336">#19336</a>)
(Francesco Trotta)</li>
</ul>
<h2 dir="auto">Chores</h2>
<ul dir="auto">
<li>
<a
href="9b9cb05848"><code
class="notranslate">9b9cb05</code></a> chore: upgrade @eslint/js@9.19.0
(<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19371">#19371</a>)
(Milos Djermanovic)</li>
<li>
<a
href="58560e70bb"><code
class="notranslate">58560e7</code></a> chore: package.json update for
@eslint/js release (Jenkins)</li>
<li>
<a
href="2089707091"><code
class="notranslate">2089707</code></a> test: fix failing test in Node.js
v22.13.0 (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19345">#19345</a>)
(Francesco Trotta)</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="https://depfu.com/packages/npm/eslint/feedback">Please let us
know.</a></em></p>
</details>
<details>
<summary>Commits</summary>
<p><a
href="1c87b41531...208e0b199f">See
the full diff on Github</a>. The new version differs by 21 commits:</p>
<ul>
<li><a
href="208e0b199f"><code>9.19.0</code></a></li>
<li><a
href="196dfdace6"><code>Build:
changelog update for 9.19.0</code></a></li>
<li><a
href="9b9cb05848"><code>chore:
upgrade @eslint/js@9.19.0 (#19371)</code></a></li>
<li><a
href="58560e70bb"><code>chore:
package.json update for @eslint/js release</code></a></li>
<li><a
href="cfea9abe0e"><code>docs:
Clarify overrideConfig option (#19370)</code></a></li>
<li><a
href="2b84f666cd"><code>docs:
Update README (#19362)</code></a></li>
<li><a
href="044f93cbbe"><code>docs:
clarify frozen rule description (#19351)</code></a></li>
<li><a
href="797ee7c0d6"><code>docs:
fix Bluesky links (#19368)</code></a></li>
<li><a
href="81a9c0ebc3"><code>docs:
Update README</code></a></li>
<li><a
href="093fb3d402"><code>docs:
replace `var` with `let` and `const` in rule examples
(#19365)</code></a></li>
<li><a
href="417de32985"><code>docs:
replace var with const in rule examples (#19352)</code></a></li>
<li><a
href="17f2aaec16"><code>docs:
update getting-started config to match default generated config
(#19308)</code></a></li>
<li><a
href="aae67172ab"><code>fix:
sync rule type header comments automatically (#19276)</code></a></li>
<li><a
href="8a0a5a8851"><code>docs:
better `global ignores` instruction (#19297)</code></a></li>
<li><a
href="2089707091"><code>test:
fix failing test in Node.js v22.13.0 (#19345)</code></a></li>
<li><a
href="6671a2cd8c"><code>docs:
Update README</code></a></li>
<li><a
href="1637b8e87d"><code>feat:
add `--report-unused-inline-configs` (#19201)</code></a></li>
<li><a
href="e39d3f22ff"><code>docs:
fix divider for rule category (#19264)</code></a></li>
<li><a
href="e0cf53f80a"><code>docs:
fix search result box position for small screens
(#19328)</code></a></li>
<li><a
href="f92a6803a1"><code>docs:
replace var with let or const in rule examples (#19331)</code></a></li>
<li><a
href="b04b84bc17"><code>docs:
revert accidental changes in TS config files docs
(#19336)</code></a></li>
</ul>
</details>
---
[Depfu](https://depfu.com) will automatically keep this PR
conflict-free, as long as you don't add any commits to this branch
yourself. You can also trigger a rebase manually by commenting with
`@depfu rebase`.
<details><summary>All Depfu comment commands</summary>
<blockquote><dl>
<dt>@depfu rebase</dt><dd>Rebases against your default branch and
redoes this update</dd>
<dt>@depfu recreate</dt><dd>Recreates this PR, overwriting any edits
that you've made to it</dd>
<dt>@depfu merge</dt><dd>Merges this PR once your tests are passing and
conflicts are resolved</dd>
<dt>@depfu cancel merge</dt><dd>Cancels automatic merging of this
PR</dd>
<dt>@depfu close</dt><dd>Closes this PR and deletes the branch</dd>
<dt>@depfu reopen</dt><dd>Restores the branch and reopens this PR (if
it's closed)</dd>
<dt>@depfu pause</dt><dd>Ignores all future updates for this dependency
and closes this PR</dd>
<dt>@depfu pause [minor|major]</dt><dd>Ignores all future minor/major
updates for this dependency and closes this PR</dd>
<dt>@depfu resume</dt><dd>Future versions of this dependency will
create PRs again (leaves this PR as is)</dd>
</dl></blockquote>
</details>
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
This PR bumps the Prettier dependencies, and also pins the version.
Noticed that a PR with a single empty commit started failing at the time
of writing this
(https://github.com/tailwindlabs/tailwindcss/pull/16306). This is
because prettier released a new minor version which results in slightly
different output.
Let's bump prettier and handle the differences, but also pin the version
to avoid this in the future.
<!--
👋 Hey, thanks for your interest in contributing to Tailwind!
**Please ask first before starting work on any significant new
features.**
It's never a fun experience to have your pull request declined after
investing a lot of time and effort into a new feature. To avoid this
from happening, we request that contributors create an issue to first
discuss any significant new features. This includes things like adding
new utilities, creating new at-rules, or adding new component examples
to the documentation.
https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md
-->
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Fixes#16298
This PR fixes an issue where using an AST walk in combination with
`replaceNode` and various `SkipAction` would either cause children to be
visited multiple times or not visited at all even though it should. This
PR fixes the issue which also means we can get rid of a custom walk for
`@variant` inside the `@media` that was used to apply `@variant` because
we never recursively visited children inside the `@media` rule.
Because we now can use the regular walk for `@variant`, we now properly
convert `@variant` to `@custom-variant` inside `@reference`-ed
stylesheet which also fixes#16298
## Test plan
Lots of tests added to ensure the combinations of `WalkAction` and
`replaceWith()` works as expected.
Closes#15181
This PR changes the Standalone builds to use bun baseline instead. This
compiles to a reduced instruction set and should work around the
compatibility issues experienced across older server hardware.
## Test plan
See
https://github.com/tailwindlabs/tailwindcss/issues/15181#issuecomment-2634621266
Also tested it with the repor from @npezza93 and it now works locally as
well with a Docker build.
Closes#15731
This PR adds a FreeBSD build target to our CI workflows. It was tested
on CI:
https://github.com/tailwindlabs/tailwindcss/actions/runs/13159185517/job/36723613079
However, due to the build not emitting final npm packages, we don't have
a way to actually test the final package before we ship it to an
insiders release.
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This PR fixes an issue where `order-last` doesn't work as expected in
Firefox.
The implementation of `order-last`, looks like this:
```css
.order-last {
order: calc(infinity);
}
```
Which is valid CSS, and `calc(infinity)` is even valid in Firefox. You
can use this in other properties such as `border-radius`:
```css
.rounded-full {
border-radius: calc(infinity * 1px);
}
```
While this works, in properties like `order` it just doesn't work.
Fixes: #16165
Closes#16035
In v3 it was possible to unset a specific color namespace by setting
doing something like this:
```js
export default {
theme: {
extend: {
colors: {
red: null,
},
},
},
}
```
This pattern would crash in v4 right now due to the theme access
function not being able to work on the red property being a `null`. This
PR fixes this crash.
However it leaves the behavior as-is for now so that the red namespace
_defined via CSS will still be accessible_. This is technically
different from v3 but fixing this would be more work as we only allow
unsetting top-level namespaces in the interop layer (via the
non-`extend`-theme-object). I would recommend migrating to the v4 API
for doing these partial namespace resets if you want to get rid of the
defaults in v4:
```css
@theme {
--color-red-*: initial;
}
```
## Test plan
The crash was mainly captured via the test in `compat/config.test.ts`
but I've added two more tests across the different levels of
abstractions so that it's clear what `null` should be doing.
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Resolves#16170
This PR fixes an issue where the previously opted-out escaping of the
first argument for the `var(…)` function was not unescaped at all. This
was introduced in https://github.com/tailwindlabs/tailwindcss/pull/14776
where the intention was to not require escaping of underscores in the
var function (e.g. `ml-[var(--spacing-1_5)]`). However, I do think it
still makes sense to unescape an eventually escaped underline for
consistency.
## Test plan
The example from #1670 now parses as expected:
<img width="904" alt="Screenshot 2025-02-03 at 13 51 35"
src="https://github.com/user-attachments/assets/cac0f06e-37da-4dcb-a554-9606d144a8d5"
/>
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Fixes#16233
Vite has a number of special parameters that can be appended to `.css`
files that make it actually load as a JavaScript module. One such
parameter that we haven't handled before is the `?commonjs-proxy` flag.
When importing e.g. `plotly.js/lib/core`, the dependency tree would
eventually load a file called `*.css?commonjs-proxy`. We previously
scanned this for candidates even though it was not, in-fact, a
stylesheet.
This PR fixes this by adding the `?commonjs-proxy` to the ignore list. I
have also updated `SPECIAL_QUERY_RE` to more closely match the Vite
implementation. It does seem like this was the only condition we were
missing, though:
2b2299cbac/packages/vite/src/node/plugins/css.ts (L511-L517)
## Test plan
Add and import `plotly.js/lib/core` into a Vite app. I also added an
integration test to do that.
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This PR fixes an issue where we didn't always generate the `@keyframes`.
Right now we only generate `@keyframes` _if_ they are being used as one
of the `--animate-*` utilities.
However, if your `--animate-*` definition is pretty long such that it is
defined across multiple lines, then we didn't always generate the
`@keyframes` for it.
This is because the animation name would look like
`'my-animation-name\n'` instead of `'my-animation-name'`.
Fixes: #16227
This makes it so `@variant` is replaced at the top level and not just
within rules. This also fixes a bug where `@variant` wasn't handled when
inside an `@media` at-rule.
This PR is an optimization where it will not emit empty rules and
at-rules. I noticed this while working on
https://github.com/tailwindlabs/tailwindcss/pull/16120 where we emitted:
```css
:root, :host {
}
```
There are some exceptions for "empty" at-rules, such as:
```css
@charset "UTF-8";
@layer foo, bar, baz;
@custom-media --modern (color), (hover);
@namespace "http://www.w3.org/1999/xhtml";
```
These don't have a body, but they still have a purpose and therefore
they will be emitted.
However, if you look at this:
```css
/* Empty rule */
.foo {
}
/* Empty rule, with nesting */
.foo {
.bar {
}
.baz {
}
}
/* Empty rule, with special case '&' rules */
.foo {
& {
&:hover {
}
&:focus {
}
}
}
/* Empty at-rule */
@media (min-width: 768px) {
}
/* Empty at-rule with nesting*/
@media (min-width: 768px) {
.foo {
}
@media (min-width: 1024px) {
.bar {
}
}
}
```
None of these will be emitted.
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
I discovered this when triaging an error someone had on Tailwind Play.
1. When we see a `;` we often assume a valid declaration precedes it but
that may not be the case
2. When we see the name of a custom property we assume everything that
follows will be a valid declaration but that is not necessarily the case
3. A bare identifier inside of a rule is treated as a declaration which
is not the case
This PR fixes all three of these by ignoring these invalid cases. Though
some should probably be turned into errors.
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Fixes#16036
This adds a new rule to treat `<style>` blocks found within `.html` file
as Tailwind CSS targets.
## Test plan
- Tested using the Vite extension (dev) and a new integration test
(prod)
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Closes#16039
This PR changes our URL rebasing logic used with Vite so that it does
not rebase URLs that look like common alias paths (e.g. urls starting in
`~`, `@` or `#`, etc.). Unfortunately this is only an approximation and
you can configure an alias for a path that starts with a regular
alphabetical character (e.g. `foo` => `./my/foo`) so this isn't a
perfect fix, however in practice most aliases will be prefixed with a
symbol to make it clear that it's an alias anyways.
One alternative we have considered is to only rebase URLs that we know
are relative (so they need to start with a `.`). This, however, will
break common CSS use cases where urls are loaded like this:
```css
background: image-set(
url('image1.jpg') 1x,
url('image2.jpg') 2x
);
```
So making this change felt like we only trade one GitHub issue for
another one.
In a more ideal scenario we try to resolve the URL with the Vite
resolver (we have to run the resolver and can't rely on the `resolve`
setting alone due to packages like
[`vite-tsconfig-paths`](https://www.npmjs.com/package/vite-tsconfig-paths)),
however even then we can have relative paths being resolvable to
different files based on wether they were rebased or not (e.g. when an
image with the same filename exists in two different paths).
So ultimately we settled on extending the already existing blocklist
(which we have taken from the Vite implementation) for now.
## Test plan
- Added unit test and it was tested with the Vite playground.
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This PR ensures that escaped theme variables are properly handled. We do
this by moving the `escape`/`unescape` responsibility back into the main
tailwindcss entrypoint that reads and writes from the CSS and making
sure that _all internal state of the `Theme` class are unescaped
classes.
However, due to us accidentally shipping the part where a dot in the
theme variable would translate to an underscore in CSS already, this
logic is going to stay as-is for now.
Here's an example test that visualizes the new changes:
```ts
expect(
await compileCss(
css`
@theme {
--spacing-*: initial;
--spacing-1\.5: 2.5rem;
--spacing-foo\/bar: 3rem;
}
@tailwind utilities;
`,
['m-1.5', 'm-foo/bar'],
),
).toMatchInlineSnapshot(`
":root, :host {
--spacing-1\.5: 2.5rem;
--spacing-foo\\/bar: 3rem;
}
.m-1\\.5 {
margin: var(--spacing-1\.5);
}
.m-foo\\/bar {
margin: var(--spacing-foo\\/bar);
}"
`)
```
## Test plan
- Added a unit test
- Ensure this works end-to-end using the Vite playground:
<img width="1016" alt="Screenshot 2025-01-30 at 14 51 05"
src="https://github.com/user-attachments/assets/463c6fd5-793f-4ecc-86d2-5ad40bbb3e74"
/>
This PR fixes na issue where `@keyframes` were emitted if they wre in a
`@theme
reference` and anothe `@theme {}` (that is not a reference) was present.
E.g.:
```css
@reference "tailwindcss";
@theme {
/* ... */
}
```
Produces:
```css
:root, :host {
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
```
With this PR, the produced CSS looks like this instead:
```css
:root, :host {
}
```
Note: the empty `:root, :host` will be solved in a subsequent PR.
### Test plan
Added some unit tests, and a dedicated integration test.
Here is everything you need to know about this update. Please take a
good look at what changed and the test results before merging this pull
request.
### What changed?
#### ✳️ turbo (2.3.3 → 2.3.4) ·
[Repo](https://github.com/turborepo/turbo)
Sorry, we couldn't find anything useful about this release.
---
[Depfu](https://depfu.com) will automatically keep this PR
conflict-free, as long as you don't add any commits to this branch
yourself. You can also trigger a rebase manually by commenting with
`@depfu rebase`.
<details><summary>All Depfu comment commands</summary>
<blockquote><dl>
<dt>@depfu rebase</dt><dd>Rebases against your default branch and
redoes this update</dd>
<dt>@depfu recreate</dt><dd>Recreates this PR, overwriting any edits
that you've made to it</dd>
<dt>@depfu merge</dt><dd>Merges this PR once your tests are passing and
conflicts are resolved</dd>
<dt>@depfu cancel merge</dt><dd>Cancels automatic merging of this
PR</dd>
<dt>@depfu close</dt><dd>Closes this PR and deletes the branch</dd>
<dt>@depfu reopen</dt><dd>Restores the branch and reopens this PR (if
it's closed)</dd>
<dt>@depfu pause</dt><dd>Ignores all future updates for this dependency
and closes this PR</dd>
<dt>@depfu pause [minor|major]</dt><dd>Ignores all future minor/major
updates for this dependency and closes this PR</dd>
<dt>@depfu resume</dt><dd>Future versions of this dependency will
create PRs again (leaves this PR as is)</dd>
</dl></blockquote>
</details>
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Fixes#16045
This PR fixes two Vite issues found with SolidStart:
- SolidStart seems to emit an empty HTML chunk (where the content is
literally just `/`) with _no pathname_. Since we use the path to
generate an `id` for HTML chunks, this would currently cause a crash.
This was reported in #16045
- While testing the fix for the above, we also found that hot reloading
was not working in SolidStart since `4.0.0-alpha.22`. After doing some
bisecting we found that this is happening as SolidStart has the same
module ID in different servers and we were invalidating the root when we
shouldn't. After trying to restructure this code so that it only cleans
up the root when it is _no longer part of any server_, we noticed some
other compatibility issues with Nuxt and SvelteKit. It seems that the
safest bet is to no longer update a root at all during rebuilds in the
SSR step. This makes `invalidateAllRoots` a function that only notifiers
the servers about a change which is conceptually also less confusing.
## Test plan
- Added an integration test for SolidStart dev mode
- Manually tested the dev mode across all Vite based templates in
https://github.com/philipp-spiess/tailwindcss-playgrounds: Astro, Nuxt,
Remix, Solid, SvelteKit, and Vue.
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This PR fixes an issue where tools like Prettier remove important
trailing commas in CSS variables, making gradients invalid.
We encoded the `,` in the `--tw-gradient-position` to ensure that _if_
the `var(--tw-gradient-position)` is used, that the `,` was there. And
if the variable was _not_ used that we didn't end up with a double `,,`
rendering the gradient invalid.
However, when running Prettier (there might be other tools that do this
as well), the trailing comma in the `--tw-gradient-position` was removed
which made the entire gradient invalid. E.g.:
```diff
.bg-gradient-to-r {
- --tw-gradient-position: to right in oklab,;
+ --tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
```
Notice how the `,` is removed.
This PR fixes that, by moving the `,` to where the variable is being
used. The only side effect is that we have to guarantee that the
`--tw-gradient-position` is always present. In our testing (and using UI
tests) this should be the case.
Related Prettier issue:
https://github.com/prettier/prettier/issues/17058Fixes: #16037
This PR fixes an issue where if you only used `@reference` that we
didn't process Tailwind CSS features.
We have a 'quick bail check', in the PostCSS plugin to quickly bail if
we _konw_ that we don't need to handle any Tailwind CSS features. This
is useful in Next.js applications where every single CSS file will be
passed to the PostCSS plugin.
If you use custom font ins Next.js, each of those fonts will have a CSS
file as well.
Before we introduced `@reference`, we used `@import "tailwindcss"
reference`, which passed the bail check because `@import` was being
used. Now we have `@reference` which wasn't included in the list.
This is now solved.
Fixes: #16056
### Test plan
Added a failing test that is now failing after the fix.
This PR fixes an issue where `grid-cols-0` and `grid-rows-0` generated
invalid CSS. We now ensure that the value is any positive integer
(except 0).
Fixes: #16012
Resolves#15722
This PR adds a list of ignored dependencies (in the current form only
`tailwind-merge`) to the Vite extension which, when included in the
dependency tree, are no longer scanned by the Tailwind CSS compiler for
candidates. This is to work around an issue where some dependencies
contain vast lists of valid Tailwind CSS class names which would
otherwise always be inlined in the build.
## Test plan
This was tested in our Vite playground on both dev and prod builds
across macOS and Windows:
### Windows prod build before
### Windows prod build after
This includes a debug `console.log(…)` to make sure it matches the right
module.
### Windows dev build after
This includes a debug `console.log(…)` to make sure it matches the right
module.
Resolves#15799Resolves#14478
Part-of #15005
Adds a `:host` selector for the `@theme` layer. This is necessary for
the `@theme` layer to work correctly in shadow DOM.
Also updates the snapshots for the tests that were affected by this
change (in a separate commit).
## Test plan
Tested via the Vite playground:
<img width="1121" alt="Screenshot 2025-01-29 at 15 06 49"
src="https://github.com/user-attachments/assets/a7908135-5ff8-472f-a053-d2c6d5c81e1b"
/>
Additionally made sure that `@property` defaults also work across
Firefox, Chrome, and Safari (the `@property` definition from the root is
pulled in) and added a UI spec.
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
