Commit graph

814 commits

Author SHA1 Message Date
Robin Malfait
6791e8133c
Prepare v4.1.12 release (#18728)
Co-authored-by: Jordan Pittman <thecrypticace@gmail.com>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2025-08-14 14:35:49 +02:00
Bill Criswell
1855d68cd7
Add --border-color to divide theme keys (#18704)
## Summary

In Tailwind 3 the border colors were able to be used with `divide`
utilities. I made it so that's true for Tailwind 4.

## Test plan

Just used `pnpm run tdd` and making it fails then making sure it passes.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-08-13 16:44:44 +02:00
depfu[bot]
42d2433ab8
Update enhanced-resolve 5.18.2 → 5.18.3 (patch) (#18726)
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?




#### ✳️ enhanced-resolve (5.18.2 → 5.18.3) ·
[Repo](https://github.com/webpack/enhanced-resolve)



<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/webpack/enhanced-resolve/releases/tag/v5.18.3">5.18.3</a></h4>

<blockquote><h3 dir="auto">Fixes</h3>
<ul dir="auto">
<li>Fixed nonsensible intersection in types</li>
</ul>
<h3 dir="auto">Performance</h3>
<ul dir="auto">
<li>Decreased initial loading time</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="feedback">Please
let us know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="0bf45033f4...52b61d0f03">See
the full diff on Github</a>. The new version differs by 5 commits:</p>
<ul>
<li><a
href="52b61d0f03"><code>chore(release):
5.18.3</code></a></li>
<li><a
href="ec38ca9851"><code>perf:
decrease initial loading time (#458)</code></a></li>
<li><a
href="5f74295eac"><code>refactor:
update eslint config (#457)</code></a></li>
<li><a
href="86ff2125e9"><code>fix(types):
fix nonsensible intersection</code></a></li>
<li><a
href="367d0f65e6"><code>chore(deps):
bump form-data from 3.0.3 to 3.0.4 (#455)</code></a></li>
</ul>
</details>












---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-08-13 10:30:50 -04:00
Jordan Pittman
6bfdb7c60e
Bump Bun (#18723)
Fixes #18695

Was waiting for 1.2.20 b/c of some build failures. Hopefully fixed now.
Also appears to fix the above linked bug about Windows symlinks.

[ci-all]
2025-08-13 16:29:52 +02:00
Michaël De Boey
8e8a2d6efc
update @ampproject/remapping to @jridgewell/remapping (#18716)
Even though
[`@ampproject/remapping`](https://npm.im/@ampproject/remapping) isn't
deprecated on npm (yet), it's
[repo](https://github.com/ampproject/remapping) is archived, so people
should move to
[`@jridgewell/remapping`](https://npm.im/@jridgewell/remapping)

> Development moved to
[monorepo](https://github.com/jridgewell/sourcemaps)
> See
https://github.com/jridgewell/sourcemaps/tree/main/packages/remapping
for latest code.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-08-12 09:52:35 -04:00
Robin Malfait
30be24b29f
Fix false-positive migrations in addEventListener and JavaScript variable names (#18718)
This PR fixes 2 false-positives when running the upgrade tool on a
Tailwind CSS v3 project converting it to a Tailwind CSS v4 project.

The issue occurs around migrations with short simple names that have a
meaning outside if Tailwind CSS, e.g. `blur` and `outline`.

This PR fixes 2 such cases:


1. The `addEventListener` case:

   ```js
   document.addEventListener('blur', handleBlur)
   ```

We do this by special casing the `addEventListener(` case and making
sure the first argument to `addEventListener` is never migrated.

2. A JavaScript variable with default value:

   ```js
   function foo({ foo = "bar", outline = true, baz = "qux" }) {
     // ...
   }
   ```

The bug is relatively subtle here, but it has actually nothing to do
with `outline` itself, but rather the fact that some quote character
came before and after it on the same line...

One of our heuristics for determining if a migration on these small
words is safe, is to ensure that the candidate is inside of a string.
Since we didn't do any kind of quote balancing, we would consider the
`outline` to be inside of a string, even though it is not.

So to actually solve this, we do some form of quote balancing to ensure
that it's _not_ inside of a string in this case.

Additionally, this PR also introduces a small refactor to the
`is-safe-migration.test.ts` file where we now use a `test.each` to
ensure that failing tests in the middle don't prevent the rest of the
tests from running.

### Test plan

1. Added dedicated tests for the cases mentioned in the issue (#18675).
2. Added a few more tests with various forms of whitespace.

Fixes: #18675
2025-08-12 09:48:35 -04:00
depfu[bot]
ebb2d4395a
Update h3 1.15.3 → 1.15.4 (patch) (#18680)
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?




#### ✳️ h3 (1.15.3 → 1.15.4) · [Repo](https://github.com/h3js/h3) ·
[Changelog](https://github.com/h3js/h3/blob/main/CHANGELOG.md)



<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/h3js/h3/releases/tag/v1.15.4">1.15.4</a></h4>

<blockquote><p dir="auto"><a
href="https://bounce.depfu.com/github.com/h3js/h3/compare/v1.15.2...v1.15.4">compare
changes</a></p>
<h3 dir="auto">🩹 Fixes</h3>
<ul dir="auto">
<li>
<strong>getRequestHost:</strong> Return first host from <code
class="notranslate">x-forwarded-host</code> (<a
href="https://bounce.depfu.com/github.com/h3js/h3/pull/1175">#1175</a>)</li>
</ul>
<h3 dir="auto">💅 Refactors</h3>
<ul dir="auto">
<li>
<strong>useSession:</strong> Backport <code
class="notranslate">SessionManager</code> interface to fix types (<a
href="https://bounce.depfu.com/github.com/h3js/h3/pull/1058">#1058</a>)</li>
</ul>
<h3 dir="auto">🏡 Chore</h3>
<ul dir="auto">
<li>
<strong>docs:</strong> Fix typos (<a
href="https://bounce.depfu.com/github.com/h3js/h3/pull/1108">#1108</a>)</li>
</ul>
<h3 dir="auto">❤️ Contributors</h3>
<ul dir="auto">
<li>Pooya Parsa (<a
href="https://bounce.depfu.com/github.com/pi0">@pi0</a>)</li>
<li>Kricsleo (<a
href="https://bounce.depfu.com/github.com/kricsleo">@kricsleo</a>)</li>
<li>Izoukhai (<a
href="https://bounce.depfu.com/github.com/izoukhai">@izoukhai</a>)</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="feedback">Please let us
know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="5bd27a52d7...ec77d6bc14">See
the full diff on Github</a>. The new version differs by more commits
than we can show here.</p>
</details>












---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-08-11 10:12:46 -04:00
depfu[bot]
7010a9b79b
Update jiti 2.4.2 → 2.5.1 (minor) (#18651)
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?




#### ✳️ jiti (2.4.2 → 2.5.1) · [Repo](https://github.com/unjs/jiti) ·
[Changelog](https://github.com/unjs/jiti/blob/main/CHANGELOG.md)



<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/unjs/jiti/releases/tag/v2.5.1">2.5.1</a></h4>

<blockquote><p dir="auto"><a
href="https://bounce.depfu.com/github.com/unjs/jiti/compare/v2.5.0...v2.5.1">compare
changes</a></p>
<h3 dir="auto">🩹 Fixes</h3>
<ul dir="auto">
<li>
<strong>interop:</strong> Passthrough module if it is a promise (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/389">#389</a>)</li>
</ul></blockquote>
<h4><a
href="https://github.com/unjs/jiti/releases/tag/v2.5.0">2.5.0</a></h4>

<blockquote><p dir="auto"><a
href="https://bounce.depfu.com/github.com/unjs/jiti/compare/v2.4.2...v2.5.0">compare
changes</a></p>
<h3 dir="auto">🚀 Enhancements</h3>
<ul dir="auto">
<li>Use <code class="notranslate">sha256</code> for cache entries in
FIPS mode (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/375">#375</a>)</li>
<li>Support <code class="notranslate">rebuildFsCache</code> ( <code
class="notranslate">JITI_REBUILD_FS_CACHE</code>) (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/379">#379</a>)</li>
</ul>
<h3 dir="auto">🩹 Fixes</h3>
<ul dir="auto">
<li>Interop modules with null/undefined default export (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/377">#377</a>)</li>
<li>Handle <code class="notranslate">require(&lt;json&gt;)</code> in
register mode (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/374">#374</a>)</li>
</ul>
<h3 dir="auto">📦 Dependencies</h3>
<ul dir="auto">
<li>Updated bundled dependencies (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/compare/v2.4.2...v2.5.0">compare
changes</a>)</li>
</ul>
<h3 dir="auto">📖 Docs</h3>
<ul dir="auto">
<li>Add defaults in JSDocs (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/365">#365</a>)</li>
</ul>
<h3 dir="auto">✅ Tests</h3>
<ul dir="auto">
<li>Only include src for coverage report (<a
href="https://bounce.depfu.com/github.com/unjs/jiti/pull/372">#372</a>)</li>
</ul>
<h3 dir="auto">❤️ Contributors</h3>
<ul dir="auto">
<li>Kricsleo (<a
href="https://bounce.depfu.com/github.com/kricsleo">@kricsleo</a>)
🌟</li>
<li>Pooya Parsa (<a
href="https://bounce.depfu.com/github.com/pi0">@pi0</a>)</li>
<li>Kanon (<a
href="https://bounce.depfu.com/github.com/ysknsid25">@ysknsid25</a>)</li>
<li>Arya Emami (<a
href="https://bounce.depfu.com/github.com/aryaemami59">@aryaemami59</a>)</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="feedback">Please let us
know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="340e2a733c...61fa80358b">See
the full diff on Github</a>. The new version differs by 17 commits:</p>
<ul>
<li><a
href="61fa80358b"><code>chore(release):
v2.5.1</code></a></li>
<li><a
href="ad268df55b"><code>fix(interop):
passthrough module if it is a promise (#389)</code></a></li>
<li><a
href="62eac09b15"><code>chore(release):
v2.5.0</code></a></li>
<li><a
href="54461d6061"><code>fix(register):
handle `require(&lt;json&gt;)` (#374)</code></a></li>
<li><a
href="ea2340d1d0"><code>fix:
interop modules with nil default export (#377)</code></a></li>
<li><a
href="2e5a282f4c"><code>feat:
`rebuildFsCache` ( `JITI_REBUILD_FS_CACHE`) (#379)</code></a></li>
<li><a
href="63e907fe35"><code>feat:
use `sha256` for cache entries in fips mode (#375)</code></a></li>
<li><a
href="c567a37af6"><code>chore:
update snapshot</code></a></li>
<li><a
href="fb2da19654"><code>test:
only include src for coverage report (#372)</code></a></li>
<li><a
href="c9fb9fc020"><code>chore(deps):
update autofix-ci/action digest to 635ffb0 (#385)</code></a></li>
<li><a
href="dde7c823fa"><code>chore:
lint</code></a></li>
<li><a
href="35a6a61860"><code>chore:
update deps</code></a></li>
<li><a
href="b396aec458"><code>chore:
add defaults in JSDocs (#365)</code></a></li>
<li><a
href="aa541a64ae"><code>chore(deps):
update autofix-ci/action digest to 551dded (#358)</code></a></li>
<li><a
href="fb2b903cc2"><code>chore:
update deps</code></a></li>
<li><a
href="c7cfeedbd2"><code>test:
update snapshot</code></a></li>
<li><a
href="6b7fe8b7e6"><code>chore:
update ci</code></a></li>
</ul>
</details>












---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-07-31 11:48:58 -04:00
Jordan Pittman
68a79b159c
Suggest bare values for flex-* utilities (#18642)
Fixes
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1426

We weren't suggesting things like `flex-1`. This adds that. I'm not sure
if we want to suggest more `flex-<number>` values though. I've added
1–12 but am open to changing this.
2025-07-30 10:48:26 -04:00
Jordan Pittman
492304212f
Allow users to disable url rewriting in the PostCSS plugin (#18321)
Since we (optionally) support source maps now it's possible that a later
PostCSS plugin that *still* does url rewriting might fail to do so
correctly because nodes will have preserved source locations in dev
builds where before we "pretended" that everything came from the
original file.

But, because we can't know if such a plugin is present, disabling this
behavior when source maps are enabled could cause issues *and* would be
a breaking change.

I wish everything *could just work* here but realistically we can't know
what plugins have run before our PostCSS plugin or what plugins will run
after so the best option (I think) we can offer here is to allow users
to disable url rewriting at the plugin level.

Fixes #16700
2025-07-30 10:35:10 -04:00
Jordan Pittman
fa3f45f02c
Don’t output CSS objects with false or undefined in the AST (#18571)
Fixes https://github.com/tailwindlabs/tailwindcss-typography/issues/384

Basically when addUtilities/addComponents/matchUtilities/matchComponents
saw a value of `false` it was being output instead of being discarded
like it was in v3.

The types really require these to be strings but for things like the
typography plugin this isn't really carried through from its theme
config so it was easy to put anything in there and not realize it
doesn't match the expected types.

Basically this:
```js
addUtilities({
  '.foo': {
    a: 'red',
    'z-index': 0,
    '.bar': false,
    '.baz': null, // this one already worked
    '.qux': undefined,
  },
})
```

Now works like it did in v3 and omits `.bar`, `.baz`, and `.qux`
2025-07-21 15:39:34 -04:00
depfu[bot]
847ed1e4d7 Update @types/bun to version 1.2.18 2025-07-21 14:20:28 +00:00
depfu[bot]
203073f0b8
Update bun 1.2.17 → 1.2.18 (patch) (#18574)
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?




#### ✳️ bun (1.2.17 → 1.2.18) · [Repo](https://github.com/oven-sh/bun)





Sorry, we couldn't find anything useful about this release.











---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-07-21 10:14:43 -04:00
Jordan Pittman
939fda6f4e
Show more specific error for functional-like but invalid utility names (#18568)
Fixes #18566

The behavior is by design but the error message could definitely be
improved.
2025-07-18 12:31:19 -04:00
Jordan Pittman
88b9f15b65
Center the dropdown icon added to an input with a paired datalist in Chrome (#18511)
This PR tweaks the dropdown arrow added to an input by Chrome when it
has a `list` attribute pointing to a `<datalist>`.

Right now the arrow isn't centered vertically:

<img width="227" height="58" alt="Screenshot 2025-07-14 at 15 41 50"
src="https://github.com/user-attachments/assets/b354a5e8-432d-432d-bfe4-f7b6f6683548"
/>

The cause of this is the line height being inherited into the pseudo
element which controls how the marker is positioned. I *think* this is
because it's being drawn with unicode symbols but I'm not sure. It could
just be from the `list-item` display.

After this PR changes the line height its centered again:

<img width="227" height="58" alt="Screenshot 2025-07-14 at 15 42 05"
src="https://github.com/user-attachments/assets/1afa1f33-cc28-4b1f-9e04-e546f6848f57"
/>

Some notes:

This only affects Chrome and also does not appear to cause issues for
date/time inputs. While weird that this pseudo is the one used for a
`<datalist>` marker it is indeed correct.

Fixes #18499

Can use this Play to test the change:
https://play.tailwindcss.com/jzT35CRpr0

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2025-07-15 14:41:04 -04:00
Jordan Pittman
798a7bf905
Ignore consecutive semicolons in the CSS parser (#18532)
Fixes #18523

I swear I'd already landed this but apparently not.
2025-07-14 11:44:31 -04:00
Jelf
fac8cd9def
fix: allow process.env.DEBUG to be a boolean in @tailwindcss/node (#18485)
TanStack Start build to `cloudflare-module`, `debug` value type is
boolean.
reference:
https://developers.cloudflare.com/workers/framework-guides/web-apps/tanstack/

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-07-11 11:51:50 -04:00
Jordan Pittman
2941a7b5c2
Track source locations through @plugin and @config (#18329)
Fixes https://github.com/tailwindlabs/tailwindcss-forms/issues/182

Inside JS plugins and configs we weren't tracking source location info
so using things like `addBase(…)` could result in warnings inside Vite's
url rewriting PostCSS plugin because not all declarations had a source
location.

The goal here is for calls to `addBase` to generate CSS that points back
to the `@plugin` or `@config` that resulted in it being called.
2025-07-03 11:20:54 -04:00
Robin Malfait
9169d73aad
update READMEs
Co-Authored-By: Adam Wathan <adam.wathan@gmail.com>
Co-Authored-By: Jonathan Reinink <jonathan@reinink.ca>
2025-07-02 22:49:47 +02:00
depfu[bot]
f307c31d45
Update enhanced-resolve 5.18.1 → 5.18.2 (patch) (#18423)
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?




#### ✳️ enhanced-resolve (5.18.1 → 5.18.2) ·
[Repo](https://github.com/webpack/enhanced-resolve)



<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/webpack/enhanced-resolve/releases/tag/v5.18.2">5.18.2</a></h4>

<blockquote><h3 dir="auto">Fixes</h3>
<ul dir="auto">
<li>[Types] FileSystem type</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="feedback">Please
let us know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="9436f4d6d9...0bf45033f4">See
the full diff on Github</a>. The new version differs by 14 commits:</p>
<ul>
<li><a
href="0bf45033f4"><code>chore(release):
5.18.2</code></a></li>
<li><a
href="b2441769bd"><code>fix:
types</code></a></li>
<li><a
href="775f2fb8ed"><code>chore:
migrate to eslint-config-webpack (#453)</code></a></li>
<li><a
href="6df312e9a6"><code>chore:
fix tsconfig (#452)</code></a></li>
<li><a
href="b059bff8ce"><code>ci:
show report</code></a></li>
<li><a
href="c974464f46"><code>chore:
fix</code></a></li>
<li><a
href="29f9405129"><code>chore:
fix small stuff</code></a></li>
<li><a
href="01a04fd898"><code>chore:
refactor dev env</code></a></li>
<li><a
href="66a745681a"><code>ci:
show report</code></a></li>
<li><a
href="3bf44c7a6e"><code>ci:
node v24</code></a></li>
<li><a
href="bbbf6ab5b0"><code>ci:
node v24</code></a></li>
<li><a
href="38e9fd9acb"><code>feat:
export `SyncFileSystem` and `BaseFileSystem` types</code></a></li>
<li><a
href="3c9d4b6d51"><code>chore:
fix generation</code></a></li>
<li><a
href="4918c5b3a4"><code>feat:
export type SyncFileSystem and type BaseFileSystem</code></a></li>
</ul>
</details>












---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-07-01 09:23:44 -04:00
depfu[bot]
7946db05ef
Update @types/bun 1.2.15 → 1.2.17 (patch) (#18409)
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?




#### ✳️ @​types/bun (1.2.15 → 1.2.17) ·
[Repo](https://github.com/DefinitelyTyped/DefinitelyTyped)





Sorry, we couldn't find anything useful about this release.











---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-06-30 13:40:00 +00:00
depfu[bot]
ca7caae502
Update bun 1.2.15 → 1.2.17 (patch) (#18408)
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?




#### ✳️ bun (1.2.15 → 1.2.17) · [Repo](https://github.com/oven-sh/bun)





Sorry, we couldn't find anything useful about this release.











---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-06-30 09:31:26 -04:00
Jordan Pittman
2030e942bc
Don't consider the global important state in @apply (#18404)
Fixes #18400

In v3 when you used `important: true` it did not affect `@apply`.
However, in v4 it does and there's no way to make it *not*. This is
definitely a bug and would be unexpected for users coming from v3 who
use `@apply` and `important` together.

Basically, the following code, along with the detected utility `flex` in
source files…

```css
@import 'tailwindcss/utilities' important;
.flex-explicitly-important {
  @apply flex!;
}
.flex-not-important {
  @apply flex;
}
```

… would output this:
```css
.flex {
  display: flex !important;
}
.flex-explicitly-important  {
  display: flex !important;
}
.flex-not-important {
  display: flex !important;
}
```

But it's expected that `@apply` doesn't consider the "global" important
state. This PR addresss this problem and now the output is this:

```css
.flex {
  display: flex !important;
}
.flex-explicitly-important  {
  display: flex !important;
}
.flex-not-important {
  display: flex; /* this line changed */
}
```

If you want to mark a utility as important in `@apply` you can still use
`!` after the utility to do so as shown above.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-06-27 11:55:15 -04:00
Robin Malfait
b24457a9f4
Prepare 4.1.11 (#18397) 2025-06-26 12:43:17 +02:00
Rózsa Zoltán
aa859314d9
feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384)
Closes #18381 

* [Changelog for Vite 7.0.0
(2025-06-24)](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#700-2025-06-24)

Starting from Vite 7, Node 18 support will be dropped, which doesn't
really affect Tailwind. It might be worth mentioning in the
documentation that the recommended minimum Node versions are 20.19 and
22.12.

Vite 7 is only available in ESM format, which is also not an issue.

Vite's browser support aligns with the v4 guidelines:
```
Chrome 87 → 107       (tw: 111)
Edge 88 → 107         (tw: 111)
Firefox 78 → 104      (tw: 128)
Safari 14.0 → 16.0    (tw: 16.4)
```
* [Vite 7 - Browser
Support](https://vite.dev/guide/migration.html#default-browser-target-change)
* [Tailwind CSS v4 - Browser
Support](https://tailwindcss.com/docs/compatibility#browser-support)

So, at first glance, there's nothing more to do except enabling support
for these versions.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-06-24 12:31:17 -04:00
depfu[bot]
767a60a195
Update postcss-import 16.1.0 → 16.1.1 (patch) (#18376)
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?




#### ✳️ postcss-import (16.1.0 → 16.1.1) ·
[Repo](https://github.com/postcss/postcss-import) ·
[Changelog](https://github.com/postcss/postcss-import/blob/master/CHANGELOG.md)



<details>
<summary>Release Notes</summary>

<h4>16.1.1 (from changelog)</h4>
<blockquote><ul dir="auto">
<li>Fix incorrect cascade layer order when some resources can not be
inlined (<a
href="https://bounce.depfu.com/github.com/postcss/postcss-import/issues/567">#567</a>,
<a
href="https://bounce.depfu.com/github.com/postcss/postcss-import/pull/574">#574</a>)</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="feedback">Please let
us know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="9217ec361b...4ae9894edc">See
the full diff on Github</a>. The new version differs by 10 commits:</p>
<ul>
<li><a
href="4ae9894edc"><code>16.1.1</code></a></li>
<li><a
href="a3f38897da"><code>Test
on modern Node versions (#577)</code></a></li>
<li><a
href="10325fc024"><code>Upgrade
eslint &amp; config; use flat config (#576)</code></a></li>
<li><a
href="9227642040"><code>Migrate
config renovate.json (#575)</code></a></li>
<li><a
href="2544155491"><code>Update
dependency prettier to ~3.5.0 (#572)</code></a></li>
<li><a
href="83108aa207"><code>Fix
incorrect cascade layer order when some resources can not be inlined
(#574)</code></a></li>
<li><a
href="cad00220bf"><code>Update
dependency sugarss to v5 (#568)</code></a></li>
<li><a
href="32deb082c6"><code>Update
dependency c8 to v10 (#565)</code></a></li>
<li><a
href="d43ca1506d"><code>Update
dependency prettier to ~3.4.0 (#569)</code></a></li>
<li><a
href="9af465e598"><code>Update
dependency prettier to ~3.3.0 (#564)</code></a></li>
</ul>
</details>












---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-06-24 09:57:35 -04:00
kilavvy
f0e2f5bb7a
Fix: Correct typo in comment (#18361)
This pull request contains a couple of minor documentation fixes.

- Corrected a typo from `predicable` to `predictable` in a comment for
`DarkModeStrategy`.
- Applied minor formatting to a comment in a test file.

These changes help improve code clarity and maintainability.
2025-06-21 19:40:11 +00:00
Jordan Pittman
c5a997cbdb
Document --watch=always in the CLI (#18337)
Closes https://github.com/tailwindlabs/tailwindcss.com/issues/1835

We had this in v3 as an undocumented option. We still have it in v4 but
it's not documented under the CLI usage but should be. This PR adds
this.

**before**
<img width="803" alt="Screenshot 2025-06-18 at 09 41 40"
src="https://github.com/user-attachments/assets/c3becf11-e31d-4355-9d23-bddd0b2fc4a6"
/>

**after**
<img width="1152" alt="Screenshot 2025-06-18 at 09 41 20"
src="https://github.com/user-attachments/assets/4f61a156-680d-4f39-b92d-7f0f63270689"
/>
2025-06-19 14:52:47 -04:00
Jordan Pittman
5fc6698b7b
Add heuristic to skip candidate migrations inside emit(…) (#18330)
Fixes #18318
2025-06-17 12:49:33 -04:00
leopardracer
44534963c3
Small Typo Fixes and Comment Improvements (#18328)
Description:
This pull request corrects minor typos in comments and improves clarity
in two files:
- Fixes a typo in a comment within migrate-js-config.ts ("migrateable" →
"migratable").
- Refines a comment in wasm.test.ts for better readability.

No functional code changes are included.
2025-06-17 10:46:08 -04:00
Robin Malfait
d06bbb80da
Prepare v4.1.10 (#18290) 2025-06-11 22:26:51 +02:00
Robin Malfait
ddb0beff66
Fix missing space around - when using % regression (#18289)
This PR fixes a regression we shipped in v4.1.9, when using arbitrary
values and injecting spaces around operator.

When you use `w-[calc(100%-var(--foo))]`, you expect that this generates
valid CSS:

```css
width: calc(100% - var(--foo));
```

But due to a regression, we generated:

```css
width: calc(100%-var(--foo));
```

Which is invalid CSS.

This is because the algorithm we used to know when we had to inject a
space around the `-` didn't take the `%` sign into account.

We also didn't handle uppercase units like `123PX` properly. This PR
fixes both issues.

## Test plan

1. Added a regression test for the `%`
2. Added a regression test for uppercase units like `123PX`

Fixes: #18288
2025-06-11 20:18:14 +00:00
Robin Malfait
b88371a309
Prepare v4.1.9 (#18285)
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2025-06-11 15:57:38 +02:00
Rózsa Zoltán
aa817fb6de
fix: don't break CSS keywords when formatting math expressions (#18220)
Fixes #18219

## Summary

In an arbitrary value, if there's a non-numeric character both before
and after a hyphen, there's no need for a space.

## Test plan

`decodeArbitraryValue` will correctly format special CSS values like
`fit-content`. I believe spaces are only necessary if there's a digit
either before or after the hyphen.

```js
decodeArbitraryValue('min(fit-content,calc(100dvh-4rem))')
```

This way, the result of the following arbitrary value will also be
correct:

```html
<div class="min-h-[min(fit-content,calc(100dvh-4rem))]"></div>
```

```css
.min-h-\[min\(fit-content\,calc\(100dvh-4rem\)\)\] {
  min-height: min(fit-content, calc(100dvh - 4rem));
}
```

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-06-10 10:38:31 -04:00
Cyril Duez
bea843c90a
CSS Parser: Handle string with semi-colon in custom properties. (#18251)
Strings are not parsed correctly for custom properties which makes the
following CSS raise an `Unterminated string: ";"` error:

```css
:root { 
  --custom: 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==';
}
```

According to the spec, we should accept semi-colon as long as they are
not at the top level.
> The allowed syntax for [custom
properties](https://drafts.csswg.org/css-variables/#custom-property) is
extremely permissive. The <declaration-value> production matches any
sequence of one or more tokens, so long as the sequence does not contain
bad-string-token, bad-url-token, unmatched )-token, ]-token, or }-token,
or top-level semicolon-token tokens or delim-token tokens with a value
of "!".

Extract from: https://drafts.csswg.org/css-variables/#syntax

I was only able to reproduce with **tailwindcss v4**, the previous
version seems to support this. This issue is mitigated by the fact that
even if you want to use a data URL in a custom property, you would need
to wrap the value in a `url()` anyway:

```css
:root { 
  --my-icon-url: url('data:image/svg+xml;base64,...==');
}

.icon {
  background-image: var(--my-icon-url);
}
```

Which works perfectly fine with the current/latest version (v4.1.8).

The fix suggested is to share the same code between regular property and
custom property when it comes to detect that the value is a string
starting with a `SINGLE_QUOTE` or `DOUBLE_QUOTE`. I have moved the
existing code in a `findEndStringIdx` which returns the position of the
ending single/double quote.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-06-09 14:03:44 +00:00
depfu[bot]
fd95af4284
Update bun 1.2.13 → 1.2.15 (patch) (#18252)
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?




#### ✳️ bun (1.2.13 → 1.2.15) · [Repo](https://github.com/oven-sh/bun)





Sorry, we couldn't find anything useful about this release.











---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-06-09 09:23:05 -04:00
depfu[bot]
63f6a6c4c8
Update @types/bun 1.2.13 → 1.2.15 (patch) (#18222)
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?




#### ✳️ @​types/bun (1.2.13 → 1.2.15) ·
[Repo](https://github.com/DefinitelyTyped/DefinitelyTyped)





Sorry, we couldn't find anything useful about this release.











---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-06-05 13:30:12 -04:00
nakanoh
8bfbac5d20
docs: fix typo in container.ts comment ("a the" -> "the") (#18223)
## Description
Fixed a typo in the container.ts comment where "a the" was incorrectly
written as "the" for better readability.

## Test Plan
- [x] Verified the change is purely documentation-related and doesn't
affect functionality
- [x] Ensured the comment is more readable and grammatically correct
- [x] No tests needed as this is a documentation-only change

## Changes
- Modified comment in `packages/tailwindcss/src/compat/container.ts`
- Changed "When setting a the `screens` in v3" to "When setting the
`screens` in v3"

Co-authored-by: 中野 博文 <hirofumi0082@gmail.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-06-05 09:21:56 -04:00
nakanoh
0c1c0c4aa5
docs: fix typo ("a arbitrary" -> "an arbitrary") (#18227)
## Summary
- Fixes a typo: "a arbitrary" → "an arbitrary" in a comment/description.

## Details
- This is a documentation-only change. No code logic is affected.

## Test Plan
- N/A (doc-only)

Co-authored-by: 中野 博文 <hirofumi0082@gmail.com>
2025-06-05 09:30:31 +00:00
Robin Malfait
f425720c24
Do not migrate blur in wire:model.blur (#18216)
This PR fixes an issue where the `blur` in `wire:model.blur="…"` was
incorrectly migrated. We solved it by marking `wire:…` as an unsafe
region (`…` can be anything but whitespace).

Fixes: #18187

## Test plan

Added a test with this use case

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-06-03 18:27:59 +00:00
Robin Malfait
b3fde17eac
Migrate negative arbitrary values to negative bare values (#18212)
This PR adds some improvements to the upgrade tool where it can now also
migrate negative arbitrary values to negative bare values.

We already had support for the positive version of this:
```diff
- mb-[32rem]
+ mb-128
```

But now it can also handle negative values:
```diff
- mb-[-32rem]
+ -mb-128
```

The only tricky part here is that we had to hoist the `-` sign. Before
this PR, we were actually generating `mb--128` and that is invalid so it
was thrown out.

## Test plan

1. Added a test to ensure that the negative values are correctly
transformed.
2025-06-03 08:53:58 +00:00
Robin Malfait
31c0a21452
Improve upgrade migrations (#18184)
This PR fixes 2 issues with the migration tool where certain classes
weren't migrated. This PR fixes those 2 scenarios:

### Scenario 1

When you have an arbitrary opacity modifier that doesn't use `%`, but is
just a number typically between `0` and `1` then this was not converted
to the bare value equivalent before.

E.g.:

```html
<div class="bg-[#f00]/[0.16]"></dv>
```

Will now be converted to:

```html
<div class="bg-[#f00]/16"></dv>
```

### Scenario 2

Fixes a bug when a CSS function was used in a fallback value in the CSS
variable shorthand syntax. In that case we didn't migrate the class to
the new syntax.

This was because we assumed that a `(` was found, that we are dealing
with a CSS function.

E.g.: 
```html
<div class="w-[--spacing(1)]"></div>
                        ^  This indicates a CSS function, we should not be 
                           converting this to `w-(--spacing(1))`
```

But if a function was used as a fallback value, for example:

```html
<div class="bg-[--my-color,theme(colors.red.500)]"></dv>
```

Then we also didn't migrate it, but since the function call is in the
fallback, we can still migrate it.

Will now properly be converted to:

```html
<div class="bg-(--my-color,var(--color-red-500))"></dv>
```


## Test plan

1. Added a test for the first case
2. Added a test for the second case
3. Also added an integration-like test that runs all the migration steps
to make sure that the `theme(…)` in the fallback also gets updated to
`var(…)`. This one caught an issue because the `var(…)` wasn't handling
prefixes correctly.
2025-05-30 13:32:59 +00:00
Robin Malfait
193eb84f6c
Release v4.1.8 (#18164)
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-05-28 17:01:27 +02:00
Robin Malfait
4bfacb33a0
Improve error messages when @apply fails (#18059)
This PR improves error messages when `@apply` fails. Right now it gives
you a generic error message that you cannot apply a certain utility.

```css
.foo {
  @apply bg-red-500;
}
```

Would result in:
```
Cannot apply unknown utility class: bg-red-500
```

However, there are some situations where we can give you more context
about what's happening.

### Missing `@import "tailwindcss"` or `@reference`

If you are in a Vue file for example, and you have the following code:
```vue
<template>
  <div class="foo"></div>
</template>

<style>
.foo {
  @apply bg-red-500;
}
</style>
```

Then this will now result in:
```
Cannot apply unknown utility class `bg-white`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive
```

We do this by checking if we found a `@tailwind utilities` or
`@reference`. If not, we throw this more specific error.

### Explicitly excluded classes via `@source not inline('…')`

Or via the legacy `blocklist` from a JS config.

If you then have the following file:
```css
@import "tailwindcss";

@source not inline('bg-white');

.foo {
  @apply bg-white;
}
```

Then this will now result in:
```
Cannot apply utility class `bg-white` because it has been explicitly disabled: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes
```

We do this by checking if the class was marked as invalid.

### Applying unprefixed class in prefix mode

If you have the prefix option configured, but you are applying a
non-prefixed class, then we will show the following error:

Given this input:
```css
@import "tailwindcss" prefix(tw);

.foo {
  @apply underline;
}
```


The following error is thrown:
```
Cannot apply unprefixed utility class `underline`. Did you mean `tw:underline`?
```

### Applying known utilities with unknown variants

If you have unknown variants, then we will list them as well if the base
utility does compile correctly.

Given this input:

```css
@import "tailwindcss";

.foo {
  @apply hocus:hover:pocus:bg-red-500;
}
```

The following error is thrown:
```
Cannot apply utility class `hocus:hover:pocus:bg-red-500` because the `hocus` and `pocus` variants do not exist.
```

## Test plan

1. Everything behaves the same, but the error messages give more
details.
2. Updated tests with new error messages
3. Added new unit tests to verify the various scenarios
4. Added a Vue specific integration test with a `<style>…</style>` block
using `@apply`

[ci-all] There are some newlines here and there, let's verify that they
work identically on all platforms.

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2025-05-27 20:19:14 +02:00
Robin Malfait
5131237d67
Fix migrating mt-[0px] to -mt-[0px] instead of the other way around (#18154)
I was testing to upgrade tool on various random projects just to see how
it behaves. Then I noticed an odd migration...

This PR fixes an issue where the upgrade tool accidentally migrated
classes such as `mt-[0px]` to `-mt-[0px]`. The reason for this is
because we are trying to find a replacement, and the computed signature
for both of them are exactly the same.

- `mt-[0px]` translates to:

   ```css
   .x {
     margin-top: 0px;
   }
   ```

- `-mt-[0px]` translates to:

   ```css
   .x {
     margin-top: calc(0px * -1);
   }
   ```

   Which in turn translates to

   ```css
   .x {
     margin-top: 0px;
   }
   ```

   Notice that this is `0px`, not `-0px`.

Internally we use the roots of functional utilities to find
replacements. For intellisense purposes we typically show negative
versions before positive versions. This then means that we will try
`-mt-*` before `mt-*`. Because of the signature above, the `mt-[0px]`
was translated into `-mt-[0px]`.

We could solve this in a few ways. The first thing we can try is to make
sure that the signature is not the same and that `-mt-[0px]` actually
translates into `-0px` not `0px`.

This would solve our problem of the accidental migration. However, if we
_just_ sort the functional utilities roots such that the positive
versions exist before negative version and rely on the fact that
`-mt-[0px]` has the same signature. Then it also means that by doing
that we can migrate `-mt-[0px]` into `mt-[0px]` which is even better
because it's the same result and shorter.

## Test plan

1. Added a test to verify that `mt-[0px]` does not get migrated to
`-mt-[0px]`.
2. Added a test to verify that `-mt-[0px]` does get migrated to
`mt-[0px]`.
2025-05-26 16:29:22 +02:00
Robin Malfait
884f02c46b
Fix "Cannot read properties of undefined" crash on malformed arbitrary value (#18133)
This PR fixes a crash when an arbitrary value was malformed and crashed
the build.

If you have a utility like `[--btn-border:var(--color-maroon)/90)]`
which is malformed, it will crash the build. It might not be easy to
spot but the easy is the additional `)` after the `90`.

The reason this crashes is because we parse the value
`var(--color-maroon)/90)` and when we see `)` we assume it's the end of
a "function" which also assumes it was preceded by a `(`. This is not
the case and we crash.

This PR fixes that by not assuming the parsed object is available and
uses `?` to be safe and only access `nodes` if it's available.

I'm actually not 100% sure what the best solution is in this scenario
because these candidates could (and will) be returned from Oxide so even
if we throw a more descriptive error, it will still crash the build and
you might not even have control over the candidate.

This candidate will now eventually generate the following CSS:
```css
.\[--btn-border\:var\(--color-maroon\)\/90\)\] {
  --btn-border: var(--color-maroon) / ;
}
```

Which still looks odd, but even Lightning CSS doesn't throw an error in
this case (because it's a CSS variable definition), so I think it's the
best we can do. If you open your devtools you will see the weird values,
so it's still debug-able.

<img width="359" alt="image"
src="https://github.com/user-attachments/assets/2eb48662-64de-4417-a2da-1577bf9075b5"
/>

Fixes: #17064

## Test plan

Manually tested the candidate that crashed it, and after the change
generated the above CSS. Then used it in JSFiddle to proof it's fixed
now. https://jsfiddle.net/z850ykew/

Couldn't use Tailwind Play because the candidate will cause a crash
there as well 😅
2025-05-23 19:59:02 +00:00
Robin Malfait
9cb38993d2
Upgrade deprecated order-none to order-0 (#18126)
This PR adds an initial version for deprecated utilities. Right now it's
hardcoded to just the `order-none` utility.

This means that `order-0` and `order-[0]` will not be migrated to
`order-none` anymore. We did that automatically because we prefer named
utilities over bare values and arbitrary values.

With this PR, `order-none` is ignored.

Similarly, `order-none` will be migrated to `order-0` instead (defined
in a separate migration for deprecated values). Made it a new migration
instead of using the legacy migration because there all utilities still
exist, but are defined differently (e.g.: `shadow`, `shadow-sm`,
`shadow-xs`).

This PR is also an initial version, it doesn't add any form of
`deprecated` flag or feature on a per-utility implementation basis. This
therefor has the side effect that if you have a custom `order-none`
defined, that it will also be ignored during migrations.


## Test plan

1. Added tests to ensure the `order-0` is not migrated to `order-none`
2. Added tests to ensure `order-none` is migrated to `order-0` (if it's
safe to do so, the signature is still computed to ensure the output is
the same).
3. Ran this on the Tailwind Plus codebase and ensured that `order-0` is
not migrated to `order-none` and that `order-none` is migrated to
`order-0`.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-05-23 15:21:21 +00:00
depfu[bot]
7013ca37ed
Update semver 7.7.1 → 7.7.2 (patch) (#18084)
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?




#### ✳️ semver (7.7.1 → 7.7.2) ·
[Repo](https://github.com/npm/node-semver) ·
[Changelog](https://github.com/npm/node-semver/blob/main/CHANGELOG.md)



<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/npm/node-semver/releases/tag/v7.7.2">7.7.2</a></h4>

<blockquote><h2 dir="auto">
<a
href="https://bounce.depfu.com/github.com/npm/node-semver/compare/v7.7.1...v7.7.2">7.7.2</a>
(2025-05-12)</h2>
<h3 dir="auto">Bug Fixes</h3>
<ul dir="auto">
<li>
<a
href="fcafb61ed5"><code
class="notranslate">fcafb61</code></a> <a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/780">#780</a>
add missing <code class="notranslate">'use strict'</code> directives (<a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/780">#780</a>)
(<a href="https://bounce.depfu.com/github.com/Fdawgs">@Fdawgs</a>)</li>
<li>
<a
href="c99f336fa3"><code
class="notranslate">c99f336</code></a> <a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/781">#781</a>
prerelease identifier starting with digits (<a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/781">#781</a>)
(<a
href="https://bounce.depfu.com/github.com/mbtools">@mbtools</a>)</li>
</ul>
<h3 dir="auto">Chores</h3>
<ul dir="auto">
<li>
<a
href="c760403b93"><code
class="notranslate">c760403</code></a> <a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/784">#784</a>
template-oss-apply for workflow permissions (<a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/784">#784</a>)
(<a
href="https://bounce.depfu.com/github.com/wraithgar">@wraithgar</a>)</li>
<li>
<a
href="2677f2a883"><code
class="notranslate">2677f2a</code></a> <a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/778">#778</a>
bump @npmcli/template-oss from 4.23.6 to 4.24.3 (<a
href="https://bounce.depfu.com/github.com/npm/node-semver/pull/778">#778</a>)
(<a
href="https://bounce.depfu.com/github.com/dependabot">@dependabot</a>[bot],
<a
href="https://bounce.depfu.com/github.com/npm-cli-bot">@npm-cli-bot</a>)</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="feedback">Please let us
know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="30c438bb46...281055e771">See
the full diff on Github</a>. The new version differs by 6 commits:</p>
<ul>
<li><a
href="281055e771"><code>chore:
release 7.7.2 (#783)</code></a></li>
<li><a
href="fcafb61ed5"><code>fix:
add missing `&#39;use strict&#39;` directives (#780)</code></a></li>
<li><a
href="c760403b93"><code>chore:
template-oss-apply for workflow permissions (#784)</code></a></li>
<li><a
href="c99f336fa3"><code>fix:
prerelease identifier starting with digits (#781)</code></a></li>
<li><a
href="2677f2a883"><code>chore:
bump @npmcli/template-oss from 4.23.6 to 4.24.3 (#778)</code></a></li>
<li><a
href="0b98655dbc"><code>chore:
bump @npmcli/template-oss from 4.23.4 to 4.23.6 (#760)</code></a></li>
</ul>
</details>












---
![Depfu
Status](https://depfu.com/badges/edd6acd35d74c8d41cbb540c30442adf/stats.svg)

[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>
2025-05-19 15:19:43 -04:00
Jordan Pittman
9df5ba78bf
Fix PostCSS crash when using toJSON() (#18083)
When I added source maps to PostCSS I mistakenly assumed that `.source`
on a node could be `undefined`. The comment above the property in
PostCSS says that `source` can be `undefined` but this is a commentary
on the value upon **access** not its expected value on **write**:

```ts
declare abstract class Node_ {
  /**
   * …
   *
   * The nodes that are created manually using the public APIs
   * provided by PostCSS will have `source` undefined and
   * will be absent in the source map.
   *
   * …
   */
  source?: Node.Source
}
```

Rather, what these types mean is that *if the property exists* it must
be defined. But otherwise the property can be missing if a node has no
source location metadata. This generally wasn't a problem with the
string-returning APIs but the `toJSON()` API in PostCSS expects that
`source` is defined if present. This caused a crash because our license
comment doesn't have a source location.

I've addressed this by deleting the `source` property from the node if
source location data is not available.

Fixes #18082

ref https://github.com/parcel-bundler/parcel/issues/10161
2025-05-19 11:28:09 -04:00
Robin Malfait
a42251cc29
Improve performance of upgrade tool (#18068)
This PR improves the performance of the upgrade tool due to a regression
introduced by https://github.com/tailwindlabs/tailwindcss/pull/18057

Essentially, we had to make sure that we are not in `<style>…</style>`
tags because we don't want to migrate declarations in there such as
`flex-shrink: 0;`

The issue with this approach is that we checked _before_ the candidate
if a `<style` cold be found and if we found an `</style>` tag after the
candidate.

We would basically do this check for every candidate that matches.

Running this on our Tailwind UI codebase, this resulted in a bit of a
slowdown:

```diff
- Before: ~13s
+  After: ~5m 39s
```

... quite the difference.

This is because we have a snapshot file that contains ~650k lines of
code. Looking for `<style>` and `</style>` tags in a file that large is
expensive, especially if we do it a lot.

I ran some numbers and that file contains ~1.8 million candidates.

Anyway, this PR fixes that by doing a few things:

1. We will compute the `<style>` and `</style>` tag positions only once
per file and cache it. This allows us to re-use this work for every
candidate that needs it.
2. We track the positions, which means that we can simply check if a
candidate's location is within any of 2 start and end tags. If so, we
skip it.

Running the numbers now gets us to:

```diff
- Before: ~5m 39s
+  After: ~9s
```

Much better!

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-05-19 10:41:40 -04:00