We recently fixed an issue
(https://github.com/tailwindlabs/tailwindcss/issues/16664) so that we
could remove the `!important` on CSS variables. The reason we did that
is because Google Chrome is showing a warning in the devtools styles
panel that this is invalid. However, this _is_ valid and the code
actually works as expected.
If we look at the CSS spec for this:
> Note: Custom properties can contain a trailing `!important`, but this
is automatically removed from the property’s value by the CSS parser,
and makes the custom property "important" in the CSS cascade. In other
words, the prohibition on top-level "!" characters does not prevent
`!important` from being used, as the `!important` is removed before
syntax checking happens.
>
> — https://www.w3.org/TR/css-variables-1/#syntax
So given this input:
```css
@import "tailwindcss";
body {
--text-color: var(--color-white) !important;
--bg-color: var(--color-blue-950) !important;
/* Direct usage */
background-color: var(--bg-color);
/* Usage inside other functions as-if the `!important` is in the middle instead of the end */
color: color-mix(in oklab, var(--text-color) 75%, transparent);
}
```
You will notice that everything works as expected, but if you look at
the Styles panel in Chrome for the `<body>` element, you will see an
incorrect warning. (At least that's what you used to see, I updated
Chrome and everything renders fine in devtools).
Play: https://play.tailwindcss.com/BpjAJ6Uxg3?file=css
This change reverts the "fix" for:
https://github.com/tailwindlabs/tailwindcss/issues/16664. @winchesHe you
were the original person that opened the issue so this info might be
useful to you as well. Can you verify that the Play link above does work
as expected for you?
Fixes: #16810
Fixes#16935
This PR fixes an issue where the order of how `@apply` was resolved was
incorrect for nested rules. Consider this example:
```css
.rule {
@apply underline;
.nested-rule {
@apply custom-utility;
}
}
@utility custom-utility {
@apply flex;
}
```
The way we topologically sort these, we end up with a list that looks
roughly like this:
```css
.rule {
@apply underline;
.nested-rule {
@apply custom-utility;
}
}
@utility custom-utility {
@apply flex;
}
.nested-rule {
@apply custom-utility;
}
```
As you can see here the nested rule is now part of the top-level list.
This is correct because we first have to substitute the `@apply` inside
the `@utility custom-utility` before we can apply the `custom-utility`
inside `.nested-rule`. However, because we were using a regular AST walk
and because the initial `.rule` also contains the `.nested-rule` as
child, we would first substitute the `@apply` inside the `.nested-rule`,
causing the design-system to force resolve (and cache) the wrong value
for `custom-utility`.
Because the list is already flattened, we do not need to recursively
look into child declarations when we traverse the sorted list. This PR
changes it to use a regular `for` loop instead of the `walk`.
## Test plan
- Added a regression test
- Rest of tests still green
Part-of #16926
I noticed that `outline-hidden` would not set `--tw-outline-style`
(contrary to `outline-none`), thus stacking it with other outline
classes won't work as expected: https://play.tailwindcss.com/Y0lPGgekYh
Here is everything you need to know about this upgrade. Please take a
good look at what changed and the test results before merging this pull
request.
### What changed?
#### ✳️ prettier-plugin-embed (0.4.15 → 0.5.0) ·
[Repo](https://github.com/Sec-ant/prettier-plugin-embed) ·
[Changelog](https://github.com/Sec-ant/prettier-plugin-embed/blob/main/CHANGELOG.md)
<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/Sec-ant/prettier-plugin-embed/releases/tag/v0.5.0">0.5.0</a></h4>
<blockquote><h3 dir="auto">Minor Changes</h3>
<ul dir="auto">
<li>
<a
href="15dd288ebc"><tt>15dd288</tt></a>:
feat: support shorthand for CallExpression as tag</li>
</ul></blockquote>
<p><em>Does any of this look wrong? <a
href="https://depfu.com/packages/npm/prettier-plugin-embed/feedback">Please
let us know.</a></em></p>
</details>
<details>
<summary>Commits</summary>
<p><a
href="cbbbfde47c...488a11218e">See
the full diff on Github</a>. The new version differs by 28 commits:</p>
<ul>
<li><a
href="488a11218e"><code>chore(release):
v0.5.0 (#140)</code></a></li>
<li><a
href="7ee0ab0046"><code>docs:
add JounQin as a contributor for code (#145)</code></a></li>
<li><a
href="89d8417a21"><code>chore:
renovate ignore chevrotain</code></a></li>
<li><a
href="0935722d21"><code>chore:
use pnpm (#141)</code></a></li>
<li><a
href="0393ef18e2"><code>ci:
remove broken biome-cli-codesandbox</code></a></li>
<li><a
href="15dd288ebc"><code>feat:
support shorthand for CallExpression as tag</code></a></li>
<li><a
href="d8b1faeef5"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 2 updates</code></a></li>
<li><a
href="440316d9a8"><code>chore(deps):
bump the minor-and-patch-updates group with 8 updates</code></a></li>
<li><a
href="92330b8c4e"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 6 updates</code></a></li>
<li><a
href="844ac42831"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 4 updates</code></a></li>
<li><a
href="4d53e3a08f"><code>chore(deps):
bump the minor-and-patch-updates group with 7 updates</code></a></li>
<li><a
href="1c5b658cef"><code>chore(deps):
bump the minor-and-patch-updates group with 7 updates</code></a></li>
<li><a
href="35674aeb28"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 5 updates</code></a></li>
<li><a
href="952153d8dc"><code>chore(deps):
bump the minor-and-patch-updates group with 6 updates</code></a></li>
<li><a
href="62b4f229f4"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 4 updates</code></a></li>
<li><a
href="d7d1f91cce"><code>chore(deps):
bump the minor-and-patch-updates group with 5 updates</code></a></li>
<li><a
href="9258b67dd9"><code>chore(deps):
bump the minor-and-patch-updates group with 8 updates</code></a></li>
<li><a
href="aa02346f3f"><code>chore(deps):
bump the minor-and-patch-updates group with 8 updates</code></a></li>
<li><a
href="201cd80bca"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 2 updates</code></a></li>
<li><a
href="dd39ad0040"><code>chore(deps):
bump the minor-and-patch-updates group with 9 updates</code></a></li>
<li><a
href="d663923f48"><code>chore(deps):
bump the minor-and-patch-updates group with 7 updates</code></a></li>
<li><a
href="f17fc0d0e5"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 7 updates</code></a></li>
<li><a
href="7b4bf7fb04"><code>chore(deps):
bump the minor-and-patch-updates group with 6 updates</code></a></li>
<li><a
href="10846661c3"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 11 updates</code></a></li>
<li><a
href="2a16f76b13"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 1 update</code></a></li>
<li><a
href="6db029d50e"><code>chore:
bump deps</code></a></li>
<li><a
href="ef876ba3f8"><code>chore(deps-dev):
bump the major-updates group with 2 updates</code></a></li>
<li><a
href="e8d629826a"><code>chore(deps-dev):
bump the minor-and-patch-updates group with 2 updates</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>
Resolves#15170.
This PR adds support for bare integer values to the `col-*` and `row-*`
utilities:
```css
.col-5 {
grid-column: 5;
}
.row-6 {
grid-row: 6;
}
```
These properties are shorthands for
`grid-column-start`/`grid-column-end` and
`grid-row-start`/`grid-row-end`, so using a bare integer value ends up
being a shortcut for:
```css
.col-5 {
grid-column-start: 5;
grid-column-end: auto;
}
```
…which makes these basically work like an alternative to `col-start-*`
and `row-start-*`.
These support negative values like `-col-6` as well, which also
technically extends to arbitrary values like `-col-[6/span_2]` now even
though that is a junk value. I've decided not to guard against that
though and just consider it user error to keep the implementation
simple.
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Closes#16829
We were only adding keyframes used in variables starting with
`--animate` (without adding a potential prefix).
## Test plan
- Added a unit test
This adds two variants for the
[`scripting`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting)
media query. `noscript` for when JavaScript is disabled and `scripting`
for when it's enabled.
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Resolves#16821
This PR removes a special case in the `not-*` variant compound that
removed `:is(…)` if it was the only part of the inversed selector list.
While in-theory this makes sense, `:is(…)` accepts a _forgiving_
selector list where as `:not(…)` does not. See the [last point
here](https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description).
This is an issue specifically in combinations with variants that have
selectors that are not supported by all browsers yet, for example
`:open`.
It seems to be the most expected to simply keep the `:is(…)` here in any
case.
## Test plan
- Ensured the repro form #16821 now also works in browsers that do not
support `:open` (Safari and Firefox at the time of writing this):
<img width="484" alt="Screenshot 2025-02-26 at 15 36 22"
src="https://github.com/user-attachments/assets/f3391693-895b-4e44-8566-95e2960ec4e3"
/>
Fixes#16799
This was caused by a wrong condition in the CSS value parser that put
child function arguments into the parent function by accident.
## Test plan
- Added a unit test to guard against regressions
- Validated against the repro:
<img width="914" alt="Screenshot 2025-02-25 at 16 31 14"
src="https://github.com/user-attachments/assets/f5fdf2e7-9c1b-4b04-89a8-1fa78a27f0f5"
/>
This PR ensures we bundle the relevant JS APIs in the Standalone CLI
like `tailwindcss`, `tailwindcss/plugin`, `tailwindcss/colors`, etc…
Before, when loading plugins or configs, imports for those resources
would fail.
Fixes#15235
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Fixes#16725
When using `@reference "tailwindcss";` inside a separate CSS root (e.g.
Svelte `<style>` components, CSS modules, etc.), we have no guarantee
that the CSS variables will be defined in the main stylesheet (or if
there even is one). To work around potential issues with this we decided
in #16676 that we would emit all used CSS variables from the `@theme`
inside the `@reference` block.
However, this is not only a bit surprising but also unexpected in CSS
modules and Next.js that **requires CSS module files to only create
scope-able declarations**. To fix this issue, we decided to not emit CSS
variables but instead ensure all `var(…)` calls we create for theme
values in reference mode will simply have their fallback value added.
This ensures styles work as-expected even if the root Tailwind file does
not pick up the variable as being used or _if you don't add a root at
all_. Furthermore we do not duplicate any variable declarations across
your stylesheets and you still have the ability to change variables at
runtime.
## Test plan
- Updated snapshots everywhere (see diff)
- New Next.js CSS modules integration test
Fixes#16732
If we can not get the mtime from a file, chances are that the resource
is a virtual module. This is perfectly legit and we can fall back to
what we did before the changes in `4.0.8` (which is to rebuild the root
every time a change contains a dependency like that).
## Test plan
Added a test to mimic the setup from the repor in #16732. Also ensured
the repro now passes:
<img width="1278" alt="Screenshot 2025-02-24 at 17 29 38"
src="https://github.com/user-attachments/assets/d111273d-579f-44c2-82f5-aa32d6a1879a"
/>
Note that importing virtual modules directly in CSS does not work as the
resolver we use does not resolve against the Vite runtime it seems. This
is unrelated to the regression added in `4.0.8` though and something to
look into in the future.
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.19.0 → 9.20.1) ·
[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.20.1">9.20.1</a></h4>
<blockquote><h2 dir="auto">Bug Fixes</h2>
<ul dir="auto">
<li>
<a
href="274f054f19"><code
class="notranslate">274f054</code></a> fix: fix <code
class="notranslate">RuleContext</code> type (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19417">#19417</a>)
(Francesco Trotta)</li>
</ul>
<h2 dir="auto">Documentation</h2>
<ul dir="auto">
<li>
<a
href="fe3ccb2ff4"><code
class="notranslate">fe3ccb2</code></a> docs: allow typing in search box
while dropdown is open (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19424">#19424</a>)
(Amaresh S M)</li>
<li>
<a
href="93c78a5c58"><code
class="notranslate">93c78a5</code></a> docs: Add instructions for pnpm
compat (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19422">#19422</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="b476a930bb"><code
class="notranslate">b476a93</code></a> docs: Fix Keyboard Navigation for
Search Results (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19416">#19416</a>)
(Amaresh S M)</li>
<li>
<a
href="ccb60c0b14"><code
class="notranslate">ccb60c0</code></a> docs: Update README (GitHub
Actions Bot)</li>
</ul></blockquote>
<h4><a
href="https://github.com/eslint/eslint/releases/tag/v9.20.0">9.20.0</a></h4>
<blockquote><h2 dir="auto">Features</h2>
<ul dir="auto">
<li>
<a
href="e89a54a309"><code
class="notranslate">e89a54a</code></a> feat: change behavior of inactive
flags (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19386">#19386</a>)
(Milos Djermanovic)</li>
</ul>
<h2 dir="auto">Bug Fixes</h2>
<ul dir="auto">
<li>
<a
href="91d4d9f620"><code
class="notranslate">91d4d9f</code></a> fix: Bring types in sync with
@eslint/core (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19157">#19157</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="fa25c7a79e"><code
class="notranslate">fa25c7a</code></a> fix: Emit warning when empty
config file is used (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19399">#19399</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="31a9fd03d2"><code
class="notranslate">31a9fd0</code></a> fix: Clearer error message for
wrong plugin format (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19380">#19380</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="61d99e38f2"><code
class="notranslate">61d99e3</code></a> fix: Better error message for
unserializable parser (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19384">#19384</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="db1b9a66e3"><code
class="notranslate">db1b9a6</code></a> fix: Ensure module scope is
checked for references in <code
class="notranslate">consistent-this</code> (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19383">#19383</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="8bcd820f37"><code
class="notranslate">8bcd820</code></a> fix: <code
class="notranslate">arrow-body-style</code> crash with single-token body
(<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19379">#19379</a>)
(Milos Djermanovic)</li>
</ul>
<h2 dir="auto">Documentation</h2>
<ul dir="auto">
<li>
<a
href="b7012c85f3"><code
class="notranslate">b7012c8</code></a> docs: rewrite examples with var
using let and const (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19407">#19407</a>)
(Mueez Javaid Hashmi)</li>
<li>
<a
href="64063765af"><code
class="notranslate">6406376</code></a> docs: Update README (GitHub
Actions Bot)</li>
<li>
<a
href="350f2b9349"><code
class="notranslate">350f2b9</code></a> docs: rewrite some examples with
var using let and const (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19404">#19404</a>)
(Mueez Javaid Hashmi)</li>
<li>
<a
href="93c325a7a8"><code
class="notranslate">93c325a</code></a> docs: rewrite examples with var
using let and const (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19398">#19398</a>)
(Mueez Javaid Hashmi)</li>
<li>
<a
href="56ff4048e0"><code
class="notranslate">56ff404</code></a> docs: replace var with let or
const in rules docs (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19396">#19396</a>)
(Daniel Harbrueger)</li>
<li>
<a
href="4053226996"><code
class="notranslate">4053226</code></a> docs: change <code
class="notranslate">sourceType</code> in <code
class="notranslate">no-eval</code> examples (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19393">#19393</a>)
(Milos Djermanovic)</li>
<li>
<a
href="1324af0279"><code
class="notranslate">1324af0</code></a> docs: replace var with let and
const in rules docs (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19392">#19392</a>)
(Daniel Harbrueger)</li>
<li>
<a
href="8b87e007bb"><code
class="notranslate">8b87e00</code></a> docs: replace <code
class="notranslate">var</code> with <code
class="notranslate">const</code> and <code
class="notranslate">let</code> in rules (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19389">#19389</a>)
(Tanuj Kanti)</li>
<li>
<a
href="758c66bc8d"><code
class="notranslate">758c66b</code></a> docs: Explain what frozen rules
mean (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19382">#19382</a>)
(Nicholas C. Zakas)</li>
<li>
<a
href="0ef8bb859c"><code
class="notranslate">0ef8bb8</code></a> docs: additional checks for rule
examples (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19358">#19358</a>)
(Milos Djermanovic)</li>
<li>
<a
href="58ab2f69d2"><code
class="notranslate">58ab2f6</code></a> docs: fix order of installation
steps in getting started (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19326">#19326</a>)
(Tanuj Kanti)</li>
</ul>
<h2 dir="auto">Chores</h2>
<ul dir="auto">
<li>
<a
href="979097a3b4"><code
class="notranslate">979097a</code></a> chore: upgrade @eslint/js@9.20.0
(<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19412">#19412</a>)
(Francesco Trotta)</li>
<li>
<a
href="031734efcb"><code
class="notranslate">031734e</code></a> chore: package.json update for
@eslint/js release (Jenkins)</li>
<li>
<a
href="d4c47c3738"><code
class="notranslate">d4c47c3</code></a> test: avoid empty config warning
in test output (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19408">#19408</a>)
(Milos Djermanovic)</li>
<li>
<a
href="67dd82ab88"><code
class="notranslate">67dd82a</code></a> chore: update dependency
@eslint/json to ^0.10.0 (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19387">#19387</a>)
(renovate[bot])</li>
<li>
<a
href="15ac0e1824"><code
class="notranslate">15ac0e1</code></a> chore: add permissions: read-all
to stale.yml workflow (<a
href="https://bounce.depfu.com/github.com/eslint/eslint/pull/19374">#19374</a>)
(Josh Goldberg ✨)</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="208e0b199f...07b2ffd3c5">See
the full diff on Github</a>. The new version differs by 32 commits:</p>
<ul>
<li><a
href="07b2ffd3c5"><code>9.20.1</code></a></li>
<li><a
href="01ff142d55"><code>Build:
changelog update for 9.20.1</code></a></li>
<li><a
href="fe3ccb2ff4"><code>docs:
allow typing in search box while dropdown is open
(#19424)</code></a></li>
<li><a
href="274f054f19"><code>fix:
fix `RuleContext` type (#19417)</code></a></li>
<li><a
href="93c78a5c58"><code>docs:
Add instructions for pnpm compat (#19422)</code></a></li>
<li><a
href="b476a930bb"><code>docs:
Fix Keyboard Navigation for Search Results (#19416)</code></a></li>
<li><a
href="ccb60c0b14"><code>docs:
Update README</code></a></li>
<li><a
href="7e78b50dac"><code>9.20.0</code></a></li>
<li><a
href="588b664536"><code>Build:
changelog update for 9.20.0</code></a></li>
<li><a
href="979097a3b4"><code>chore:
upgrade @eslint/js@9.20.0 (#19412)</code></a></li>
<li><a
href="031734efcb"><code>chore:
package.json update for @eslint/js release</code></a></li>
<li><a
href="91d4d9f620"><code>fix:
Bring types in sync with @eslint/core (#19157)</code></a></li>
<li><a
href="b7012c85f3"><code>docs:
rewrite examples with var using let and const (#19407)</code></a></li>
<li><a
href="d4c47c3738"><code>test:
avoid empty config warning in test output (#19408)</code></a></li>
<li><a
href="e89a54a309"><code>feat:
change behavior of inactive flags (#19386)</code></a></li>
<li><a
href="fa25c7a79e"><code>fix:
Emit warning when empty config file is used (#19399)</code></a></li>
<li><a
href="64063765af"><code>docs:
Update README</code></a></li>
<li><a
href="350f2b9349"><code>docs:
rewrite some examples with var using let and const
(#19404)</code></a></li>
<li><a
href="93c325a7a8"><code>docs:
rewrite examples with var using let and const (#19398)</code></a></li>
<li><a
href="56ff4048e0"><code>docs:
replace var with let or const in rules docs (#19396)</code></a></li>
<li><a
href="4053226996"><code>docs:
change `sourceType` in `no-eval` examples (#19393)</code></a></li>
<li><a
href="1324af0279"><code>docs:
replace var with let and const in rules docs (#19392)</code></a></li>
<li><a
href="8b87e007bb"><code>docs:
replace `var` with `const` and `let` in rules (#19389)</code></a></li>
<li><a
href="31a9fd03d2"><code>fix:
Clearer error message for wrong plugin format (#19380)</code></a></li>
<li><a
href="61d99e38f2"><code>fix:
Better error message for unserializable parser (#19384)</code></a></li>
<li><a
href="758c66bc8d"><code>docs:
Explain what frozen rules mean (#19382)</code></a></li>
<li><a
href="67dd82ab88"><code>chore:
update dependency @eslint/json to ^0.10.0 (#19387)</code></a></li>
<li><a
href="db1b9a66e3"><code>fix:
Ensure module scope is checked for references in `consistent-this`
(#19383)</code></a></li>
<li><a
href="8bcd820f37"><code>fix:
`arrow-body-style` crash with single-token body (#19379)</code></a></li>
<li><a
href="15ac0e1824"><code>chore:
add permissions: read-all to stale.yml workflow (#19374)</code></a></li>
<li><a
href="0ef8bb859c"><code>docs:
additional checks for rule examples (#19358)</code></a></li>
<li><a
href="58ab2f69d2"><code>docs:
fix order of installation steps in getting started
(#19326)</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>
Add a variant for the
[`inverted-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)
media query.
This has been supported in Safari for a while. I'm also implementing
support in Chrome atm.
I've decided to only add the inverted-colors: inverted variant because
the `none` state isn't really useful.
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Related discussion #12127
```css
.wrap-anywhere {
overflow-wrap: anywhere;
}
```
### Updated 2024-11-30
The new changes remove the original `@supports` because I agree that
developers should decide for themselves whether to maintain backward
compatibility. Also updated in line with the new changes in the `next`
branch.
---------
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
<!--
👋 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 <adam.wathan@gmail.com>
Right now we sort the nodes based on a pre-defined sort order based on
the properties that are being used. The property sort order is defined
in a list we maintain.
We also have to make sure that the property count is taken into account
such that if all the "sorts" are the same, that we fallback to the
property count. Most amount of properties should be first such that we
can override it with more specific utilities that have fewer properties.
However, if a property doesn't exist, then it wouldn't be included in a
list of properties therefore the total count was off.
This PR fixes that by counting all the used properties. If a property
already exists it is counted twice. E.g.:
```css
.foo {
color: red;
&:hover {
color: blue;
}
}
```
In this case, we have 2 properties, not 1 even though it's the same
`color` property.
## Test plan:
1. Updated the tests that are now sorted correctly
2. Added an integration test to make sure that `prose-invert` is defined
after the `prose-stone` classes when using the `@tailwindcss/typography`
plugin where this problem originated from.
Note how in this play (https://play.tailwindcss.com/wt3LYDaljN) the
`prose-invert` comes _before_ the `prose-stone` which means that you
can't apply the `prose-invert` classes to invert `prose-stone`.
Closes#16374
Ensure we don't remove custom properties from within `@keyframe`
declarations.
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This PR re-enables the changes necessary to remove unused theme
variables and keyframes form your CSS.
This change was initially landed as #16211 and then later reverted in
#16403 because 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 no longer seeing their required variables
defined.
This issue is fixed by now ensuring that theme variables that are
defined within an `@reference "…"` boundary will still be emitted in the
generated CSS when used (as this would otherwise not generate a valid
stylesheet).
So given the following input CSS:
```css
@reference "tailwindcss";
.text-red {
@apply text-red-500;
}
```
We will now compile this to:
```css
@layer theme {
:root, :host {
--text-red-500: oklch(0.637 0.237 25.331);
}
}
.text-red {
color: var(--text-red-500);
}
```
This PR also improves the initial implementation to not mark theme
variables as used if they are only used to define other theme variables.
For example:
```css
@theme {
--font-sans:
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
.default-font-family {
font-family: var(--default-font-family);
}
```
This would be reduced to the following now as `--font-mono` is only used
to define another variable and never used outside the theme block:
```css
:root, :host {
--font-sans:
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--default-font-family: var(--font-sans);
}
.default-font-family {
font-family: var(--default-font-family);
}
```
## Test plan
- See updated unit and integration tests
- Validated it works end-to-end by using a SvelteKit example
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.4 → 2.4.2) ·
[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>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
The Nuxt preview server always starts on port 3000 even if that port is
taken. With the added tests in #16631 there is now a higher chance these
ports are already taken since e.g. react router prefers to start at port
3000 and so do other servers.
This PR changes this so that we assign a random port inside the test
instead.
## Test plan
- Ensure Windows CI is green again
This PR improves the developer experience when trying to use `theme(…)`
options on an import.
Today, if you want to use Tailwind CSS, you can import it as:
```css
@import "tailwindcss";
```
But if you want to use any of the `theme(…)` options, like the `static`
theme option, then you had to use this instead:
```css
@layer theme, base, components, utilities;
@import 'tailwindcss/theme' layer(theme) theme(static);
@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/utilities' layer(utilities);
```
In this scenario you have to be careful, because the `layer(…)` _must_
be the first option after an import (according to the spec). So if you
use `@import 'tailwindcss/theme' theme(static) layer(theme);` then
that's not going to work either.
This PR solves that by allowing you to use the `theme(…)` options
directly on the `@import` statement:
```css
@import 'tailwindcss' theme(static);
```
The only edge case is when you want to use `theme(reference)`. A typical
use case is for projects with `<style>` blocks where you want to
_reference_ the CSS variables from the theme.
If you use `@import 'tailwindcss' theme(reference);`, then all `@theme`
blocks will be references and you can reference theme values. This is
good. The bad part is that `@import 'tailwindcss';` also includes
preflight CSS. This means that we will import the preflight CSS for
every `<style>` block. This is probably not what you want.
The solution is to use `@reference 'tailwindcss';` instead which strips
all of that information and only gives you access to CSS variables.
This PR also makes sure that if you use `theme(reference)` on an import
that we still throw an error and suggest you use `@reference` instead.
This is not a breaking change because right now if you use `@import`
with `theme(…)` options it will already throw an error.
### Test plan:
1. Added dedicated tests to make sure we don't throw anymore.
2. Added test to make sure that we _do_ throw when using
`theme(reference)` on an import.
Alternative to #16425Fixes#16585Fixes#16389Fixes#16252Fixes#15794Fixes#16646Fixes#16358
This PR changes the Vite plugin to use the file-system to discover
potential class names instead of relying on the module-graph. This comes
after a lot of testing and various issue reports where builds that span
different Vite instances were missing class names.
Because we now scan for candidates using the file-system, we can also
remove a lot of the bookkeeping necessary to make production builds and
development builds work as we no longer have to change the resulting
stylesheet based on the `transform` callbacks of other files that might
happen later.
This change comes at a small performance penalty that is noticeable
especially on very large projects with many files to scan. However, we
offset that change by fixing an issue that I found in the current Vite
integration that did a needless rebuild of the whole Tailwind root
whenever any source file changed. Because of how impactful this change
is, I expect many normal to medium sized projects to actually see a
performance improvement after these changes. Furthermore we do plan to
continue to use the module-graph to further improve the performance in
dev mode.
## Test plan
- Added new integration tests with cases found across the issues above.
- Manual testing by adding a local version of the Vite plugin to repos
from the issue list above and the [tailwindcss
playgrounds](https://github.com/philipp-spiess/tailwindcss-playgrounds).
This PR fixes an issue where `!important` is added to declarations that
define CSS variables. The `!important` should only be added to the other
declarations.
Before:
```css
.ease-out\! {
--tw-ease: var(--ease-out) !important;
transition-timing-function: var(--ease-out) !important;
}
```
After:
```css
.ease-out\! {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out) !important;
}
```
Fixes: https://github.com/tailwindlabs/tailwindcss/issues/16664
This PR statically links the C runtime on Windows builds so we no longer
require installing Visual Studio redistributables.
## Test plan
Relying on CI here to not break anything for Windows.
This PR fixes an issue where installing a specific version of
`@tailwindcss/postcss` and `tailwindcss` could still result in a version
mismatch. This is because we were relying on `^4.0.6` for example
instead of `4.0.6`.
This PR now pins all these versions to prevent this:
```
❯ pnpm why tailwindcss
devDependencies:
@tailwindcss/postcss 4.0.5
├─┬ @tailwindcss/node 4.0.6
│ └── tailwindcss 4.0.6
└── tailwindcss 4.0.5
```
