5943 Commits

Author SHA1 Message Date
Hugo van Rijswijk
9fef2bde50
Add :host rule to @theme layer (#15975)
Resolves #15799
Resolves #14478
Part-of #15005

Adds a `:host` selector for the `@theme` layer. This is necessary for
the `@theme` layer to work correctly in shadow DOM.

Also updates the snapshots for the tests that were affected by this
change (in a separate commit).

## Test plan

Tested via the Vite playground:

<img width="1121" alt="Screenshot 2025-01-29 at 15 06 49"
src="https://github.com/user-attachments/assets/a7908135-5ff8-472f-a053-d2c6d5c81e1b"
/>

Additionally made sure that `@property` defaults also work across
Firefox, Chrome, and Safari (the `@property` definition from the root is
pulled in) and added a UI spec.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
2025-01-29 17:20:29 +01:00
Robin Malfait
924dd69bdb
Ensure @custom-variant foo () has a non-empty selector list (#16009)
This PR fixes an issue where an empty selector list was valid when
defining a `@custom-variant`.

Given this input:
```css
@custom-variant foo ();
```

If you then use it with a utility such as `foo:flex`, then the following
(incorrect) CSS was generated:

```css
.foo\:flex {
   {
    display: flex;
  }
}
```

Which is invalid CSS. This PR will now validate that that we have at
least _something_ and show an error accordingly.
2025-01-29 16:09:09 +01:00
Robin Malfait
965048c01a
Remove the force variant (#16007)
This PR will remove the `force` variant. This was an experiment that we
accidentally shipped, but there is no documentation nor is there any
intellisense autocompletion for it.
2025-01-29 15:32:37 +01:00
Robin Malfait
3da9d61371
Correctly migrate leading-* classes (#16004)
This PR fixes the upgrade tool by properly migrating the
`leading-[<number>]` classes.

The issue is that `leading-[<number>]` maps to the number directly, but
if you use a bare value, then it's a multiplier for based on the
`--spacing` value.

E.g.:

*leading-[2]*:
```css
.leading-\[2\] {
  --tw-leading: 2;
  line-height: 2;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
```

*leading-2*:
```css
.leading-2 {
  --tw-leading: calc(var(--spacing) * 2);
  line-height: calc(var(--spacing) * 2);
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
```

This PR will now prevent migrating arbitrary values to bare values for
`leading-*` utilities.

That said, this does introduce a small improvement where `leading-[1]`
is migrated to `leading-none`.

Fixes: https://github.com/tailwindlabs/tailwindcss/issues/15924
2025-01-29 15:22:13 +01:00
Robin Malfait
125c0891b1
update changelog 2025-01-29 11:48:01 +01:00
Xetera
9bfeb337e2
Fix resolve_globs crash when at root directory (#15988)
Fixes a crash found in Dockerfiles when a build takes place at the root
directory. It's not a good practice to keep your application logic in
`/`, but it probably shouldn't cause a crash either.

I found this particularly difficult to write tests for because it would
involve either running a glob on my real filesystem starting from `/` or
mocking the calls to `fs` which as far as I can tell isn't supported in
the codebase and would be out of scope to try to do here.

Fixes #15987
2025-01-29 11:45:33 +01:00
Philipp Spiess
f237f59580 Add missing changelog entry for #15978 2025-01-28 17:38:01 +01:00
Robin Malfait
2d3c196591
Rename next to main (#15980)
This PR renames `next` to `main` in GitHub Action Workflows and the
CONTRIBUTING.md file.
2025-01-28 11:31:54 -05:00
Philipp Spiess
b492187c49
Fix Oxide scanner bugs (#15974)
Fixes #15632
Fixes #15740

This PR fixes a number of Oxide scanner bugs reported over various
channels, specifically:

- When using the Svelte class shorthand split over various lines, we
weren't extracting class names properly:
   
   ```svelte
   <div
     class:underline={isUnderline}>
   </div>
   ```
- We now extract classes when using the class shortcut in Angular:
   
   ```html
   <div [class.underline]=\"bool\"></div>
   ```
- We now validate parentheses within arbitrary candidates so that we
don't consume invalid arbitrary candidates anymore which allows us to
parse the following case properly:
   
   ```js
   const classes = [wrapper("bg-red-500")]
   ```


## Test plan

Added unit tests

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2025-01-28 17:19:31 +01:00
Jordan Pittman
e02a29fa94
Don’t look at ignore files outside initialized repos (#15941)
Right now, when Oxide is scanning for files, it considers ignore files
in the "root" directory it is scanning as well as all parent
directories.

We honor .gitignore files even when not in a git repo as an optimization
in case a project has been created, contains a .gitignore, but no repo
has actually been initialized. However, this has an unintended side
effect of including ignore files _ouside of a repo_ when there is one.
This means that if you have a .gitignore file in your home folder it'll
get applied even when you're inside a git repo which is not what you'd
expect.

This PR addresses this by checking to see the folder being scanned is
inside a repo and turns on a flag that ensures .gitignore files from the
repo are the only ones used (global ignore files configured in git still
work tho).

This still needs lots of tests to make sure things work as expected.

Fixes #15876

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-01-28 16:13:16 +00:00
Robin Malfait
86264a9e66
Revert "Update bun 1.1.43 → 1.2.0 (minor) (#15922)"
This reverts commit d66d7aba6f2fe6f73f748bb208ebb9beb03ddab2.
2025-01-28 17:03:17 +01:00
Philipp Spiess
82ddc249c3
Ensure browser package does not pollute global namespace (#15978)
Resolves #15977

Our `@tailwindcss/browser` build is intended to run inside a `<script>`
tag inside browsers. Because of how variable assignment within
`<script>` tags work, all variables that were defined within that script
are currently assigned on the global namespace.

This is especially troublesome as eslint uses `$` as a valid mangling
character so importing the CDN build would now redefine `globalThis.$`
which collides with many very popular JavaScript libraries.

In order to avoid polluting the global namespace, this PR changes the
build step to emit an IIFE (so all vars defined are scroped to the
function closure instead of the global namespace).

## Test plan

- Ensure UI tests still work
- <img width="533" alt="Screenshot 2025-01-28 at 16 49 27"
src="https://github.com/user-attachments/assets/1e027451-f58b-4252-bf97-c016a90eb78b"
/>
2025-01-28 16:58:08 +01:00
depfu[bot]
b009afa4ae
Update @types/react-dom 19.0.2 → 19.0.3 (patch) (#15669)
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/react-dom (19.0.2 → 19.0.3) ·
[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-01-28 16:55:56 +01:00
depfu[bot]
d66d7aba6f
Update bun 1.1.43 → 1.2.0 (minor) (#15922)
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?




#### ✳️ bun (1.1.43 → 1.2.0) · [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-01-28 15:40:09 +00:00
depfu[bot]
e1c084c1b1
Update all of nextjs 15.1.3 → 15.1.4 (patch) (#15630)
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-config-next (15.1.3 → 15.1.4)





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



#### ✳️ next (15.1.3 → 15.1.4) ·
[Repo](https://github.com/vercel/next.js)



<details>
<summary>Release Notes</summary>
<h4><a
href="https://github.com/vercel/next.js/releases/tag/v15.1.4">15.1.4</a></h4>

<blockquote><div class="markdown-alert markdown-alert-note" dir="auto">
<p class="markdown-alert-title" dir="auto"><svg class="octicon
octicon-info mr-2" viewbox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0
8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1
7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1
0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0
2Z"></path></svg>Note</p>
<p dir="auto">This release is backporting bug fixes. It does
<strong>not</strong> include all pending features/changes on canary.</p>
</div>
<h3 dir="auto">Core Changes</h3>
<ul dir="auto">
<li>backport: force module format for virtual client-proxy (<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74608">#74608</a>)</li>
<li>Fix prerender tags when notFound is called (<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74607">#74607</a>)</li>
<li>Use provided waitUntil for pending revalidates (<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74604">#74604</a>)</li>
<li>Feature: next/image: add support for images.qualities in next.config
(<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74588">#74588</a>)</li>
<li>Chore: docs: add missing search: '' on remotePatterns (<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74587">#74587</a>)</li>
<li>Chore: docs: update version history of next/image (<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/73923">#73923</a>)
(<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74570">#74570</a>)</li>
<li>Chore: next/image: improve imgopt api bypass detection for
unsupported images (<a
href="https://bounce.depfu.com/github.com/vercel/next.js/pull/74569">#74569</a>)</li>
</ul>
<h3 dir="auto">Credits</h3>
<p dir="auto">Huge thanks to @ and @ for helping!</p></blockquote>
<p><em>Does any of this look wrong? <a
href="https://depfu.com/packages/npm/next/feedback">Please let us
know.</a></em></p>
</details>

<details>
<summary>Commits</summary>
<p><a
href="4cbaaa118d...48f2588b0f">See
the full diff on Github</a>. The new version differs by 8 commits:</p>
<ul>
<li><a
href="48f2588b0f"><code>v15.1.4</code></a></li>
<li><a
href="dcb208e260"><code>backport:
force module format for virtual client-proxy (#74162)
(#74608)</code></a></li>
<li><a
href="6f6766a255"><code>Fix
prerender tags when notFound is called (#74577) (#74607)</code></a></li>
<li><a
href="a46f27f59a"><code>Use
provided waitUntil for pending revalidates (#74164)
(#74604)</code></a></li>
<li><a
href="bc6acf6217"><code>feat(next/image):
add support for `images.qualities` in next.config
(#74588)</code></a></li>
<li><a
href="d253ac5c57"><code>chore(docs):
add missing `search: &#39;&#39;` on `remotePatterns` (#73925)
(#74587)</code></a></li>
<li><a
href="7b195a82a5"><code>chore(docs):
update version history of `next/image` (#73923) (#74570)</code></a></li>
<li><a
href="5a501d37ca"><code>chore(next/image):
improve imgopt api bypass detection for unsupported images
(#74569)</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>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
2025-01-28 16:37:57 +01:00
Jordan Pittman
1eb2980678
Fix IntelliSense class suggestions (#15857)
This PR fixes a few problems with IntelliSense:
- Default installs suggest font weight utilities twice
- When setting `--font-weight-*: initial;` the default weights are still
suggested
- Setting `--spacing-*: initial;` still shows suggestions for utilities
using the spacing scale assuming it's multiplier-based. Removing the
`--spacing: …` key should make them entirely theme driven instead.
- The default container query variants like `@sm`, `@md`, etc… aren't
suggested. Only the `@min-sm` and `@max-sm` style ones are.

Fixes
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1133
Fixes
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1136
Fixes #15811

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-01-28 10:35:11 -05:00
Robin Malfait
28008f1571
remove unnecessary version step
My bad.
2025-01-28 16:34:01 +01:00
Robin Malfait
35bc28b16b
Ensure we set the version before running build (#15971)
This PR ensures we set the version before running the build. Otherwise
the embedded version number is incorrect.
2025-01-28 10:21:18 -05:00
Robin Malfait
515a9bdc5f
Setup v4 releases (#15961)
Now that Tailwind CSS v4 is released, we can setup a proper release
workflow again. This setup mimics the workflow of how we did it in v3,
but adjusted to make it work on the v4 codebase.

Whenever a PR is merged into the `next` branch, we will publish an
insiders release to npm using the following version number:
`0.0.0-insiders.<commit-hash>`. Note: insiders releases will not have a
GitHub release associated with them, therefore the `standalone-cli`
won't be available as an insiders release.

For the normal release procedure, the following steps are required:

1. Manually version the packages (e.g.: `pnpm run version-packages`)
2. Create a git tag for the version you want to release
3. Push the updated package.json files and the git tag to the repository

Next, a GitHub action will kick in once a `tag` is being pushed.

The GitHub action will run a build, and create a draft release on GitHub
that will contain:

1. The CHANGELOG.md contents for the last version
2. The `standalone-cli` artifacts attached to the drafted release

Once you are happy with the draft, you can publish the draft on GitHub.

This in turn will trigger another GitHub action that will publish the
packages to npm.

Whenever an insiders release or a normal release completes, we will also
trigger Tailwind Play, to update its dependencies to the latest version
of Tailwind CSS.

---

Note: some of the GitHub Action workflows still refer to the `next`
branch instead of the `main` branch. If we later today want to get a new
release out, we can merge `next` into `main` and update the workflows
accordingly.


---

This is hard to test, but I started from the existing release.yml file
and adjusted things accordingly. The biggest change is related to the
insiders version. If you look at this temporary
[commit](572dddfc33),
you can see that the publishing (dry-run) seems to work as expected:
<img width="1508" alt="image"
src="https://github.com/user-attachments/assets/c075e788-dcbc-4200-aa32-2b9a3c54d629"
/>
2025-01-28 12:51:34 +01:00
Philipp Spiess
2c1dea4c1a
Fix handling of absolute config files in upgrade tool (#15927)
Closes #15220

This PR fixes an issue where the upgrade tool would not be able to load
some JavaScript config files across different drive letters on Windows.

The issue in detail is that `path.relative(…)` tries to build a relative
path but if the file is inside the same folder, it won't start the
relative path with a `./` so we manually appended it in case that it
isn't there. The issue on Windows specifically is that
`file.relative(…)` can also return a legit absolute path, e.g. when the
file is on a different drive. In this case we obviously don't want to
prefix a path with `./`.

## Test plan

To reproduce this issue, I checked out a Tailwind v3 project _on a
different drive letter than my Windows installation_. In that case, I
was adding a repo inside `D:` while `npm` was installed in `C:`. I then
run `npx @tailwindcss/upgrade` to reproduce the issue.

The fix was validated with a local `bun` run of the upgrade tool:


![telegram-cloud-photo-size-4-5818901845756725194-y](https://github.com/user-attachments/assets/d32b21e3-a08d-4608-b65a-93dddc04f890)
2025-01-28 12:42:30 +01:00
Robin Malfait
f1221b3fce
Ensure font-size utilities with none modifier works e.g.: text-sm/none (#15921)
This PR fixes an issue where classes such as `text-sm/none` don't work
as expected. The reason for this is that `leading-none` is the only
hardcoded leading utility and is not coming from the `@theme`. This
means that `text-sm/none` tries to do a lookup for `none` but it won't
resolve.

This PR fixes that by allowing `none` as a modifier.

While working on this, I noticed that `text-sm/none` _did_ generate CSS:

```css
.text-sm\/none {
  font-size: var(--text-sm);
}
```

Notice that the `line-height` is missing. This means that any modifier
that can't be resolved doesn't get the `line-height` set, but it _will_
generate CSS. In this case, no CSS should have been generated.

Otherwise, all of these generate CSS which will only bloat your CSS and
won't
work as expected. E.g.: `text-sm/foo`, `text-sm/bar`, and `text-sm/baz`:

```css
.text-sm\/bar {
  font-size: var(--text-sm);
}
.text-sm\/baz {
  font-size: var(--text-sm);
}
.text-sm\/foo {
  font-size: var(--text-sm);
}
```

Fixes: #15911
2025-01-27 14:10:09 +01:00
Luke Warlow
6dd4c334c2
Include :open in the open variant (#15349)
Update the `open` variant to addtionally match the new `:open` pseudo
class.

See spec at https://drafts.csswg.org/selectors-4/#open-state

See Chromium intent to ship:
https://groups.google.com/a/chromium.org/g/blink-dev/c/Pdo4oOXYKcA

`:open` matches open `<details>` and `<dialog>` elements (already
covered by [open]), but also matches select elements with their picker
open and inputs with their picker open.

Thanks to `:is()` taking a forgiving selector list, this is safe to add
even with limited browser support.

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-01-27 12:43:12 +00:00
depfu[bot]
a707fed089
Update eslint 9.17.0 → 9.18.0 (minor) (#15664) 2025-01-27 13:30:56 +01:00
depfu[bot]
14fea72016
Update @types/react 19.0.2 → 19.0.7 (patch) (#15682) 2025-01-27 13:28:43 +01:00
Robin Malfait
193fc60989
Ensure CSS variable shorthand uses valid CSS variables (#15738)
This PR fixes an issue where we didn't always correctly validated
invalid CSS variables when using the CSS variable shorthand syntax.

This PR fixes that by ensuring we start with `--`. We can't validate
that the variable exists at runtime, but we can validate if it looks
like a valid CSS variable.

We can go a step further by validating if the CSS variable is valid
syntax (e.g.: all characters are valid), but we can introduce this if
this is causing actual issues in projects.

```
p-(a-b)
```

Used to compile to:
```css
.p-\(a-b\) {
  padding: var(a-b);
}
```

But not anymore.
2025-01-27 12:55:10 +01:00
Robin Malfait
79541c94d9
Merge changelogs (#15698)
This PR makes sure all v3 and earlier versions are visible in the
changelog as
well as the v4 changelog entries.
2025-01-27 12:54:26 +01:00
Justin Wong
7e20c3b587
Remove min-w/h-none (#15845)
`none` is not a valid value for `min-width` or `min-height` according to
[the CSS spec](https://www.w3.org/TR/css-sizing-3/#min-size-properties):

> | | |
> | --- | --- |
> | [Value](https://www.w3.org/TR/css-values/#value-defs): | auto \|
[&lt;length-percentage>](https://www.w3.org/TR/css-values-4/#typedef-length-percentage)
\| min-content \| max-content \|
fit-content([&lt;length-percentage>](https://www.w3.org/TR/css-values-4/#typedef-length-percentage))
|

I believe we should be able to remove the `min-w-none` and `min-h-none`
class candidates since they wouldn't have done anything anyway and thus
should not affect backwards compatibility. Indeed, these did not exist
in v3 either:


4f9f603e12/stubs/config.full.js (L674-L684)


4f9f603e12/stubs/config.full.js (L685-L691)

---

Credit to `@i` on Discord for spotting this[^1], fixes #15846

[^1]:
https://discord.com/channels/486935104384532500/486935104384532502/1332680061144403968

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2025-01-25 17:04:55 +00:00
Jordan Pittman
a8c54acaba
Prepare v4.0.0 release (#15693) v4.0.0 2025-01-21 20:58:59 +00:00
Robin Malfait
8a97a6a8d9
v4.0.0-beta.10 (#15691)
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
v4.0.0-beta.10
2025-01-21 16:19:28 +00:00
Robin Malfait
4820f6bff8
Transition outline-color (#15690)
This PR adds `outline-color` to the transition-property again, and
updates the implementation for `outline-hidden`.

The `outline-hidden` will behave exactly the same as `outline-none`
_except_ in forced colors mode. In forced colors mode, `outline-hidden`
will force a 2px solid border.

Closes: #15591
2025-01-21 11:02:57 -05:00
Robin Malfait
d65bb68d16
update changelog 2025-01-21 10:40:22 -05:00
Jordan Pittman
79f21a8f45
Prevent not-* from being used with variants with multiple sibling rules (#15689)
Variants like this can't be easily negated by our current system:

```css
@custom-variant dark {
  &.is-dark {
    @slot;
  }
  @media (prefers-color-scheme: dark) {
    @slot;
  }
}
```

Right now it produces the following CSS which is logically incorrect:

```css
.utility-name {
  &:not(.is-dark) {
    /* ... */
  }

  @media not (prefers-color-scheme: dark) {
    /* ... */
  }
}
```

The correct CSS is this which requires moving things around:
```css
.utility-name {
  @media not (prefers-color-scheme: dark) {
    &:not(.is-dark) {
      /* ... */
    }
  }
}
```

We're opting to disable this instead of generating incorrect CSS for
now. I'd like to bring this back in the future for simpler cases in the
future.
2025-01-21 10:38:32 -05:00
Robin Malfait
4035ab0b76
Implement @variant (#15663)
This PR replaces `@variant` with `@custom-variant` for registering
custom variants via your CSS.

In addition, this PR introduces `@variant` that can be used in your CSS
to use a variant while writing custom CSS.

E.g.:

```css
.btn {
  background: white;

  @variant dark {
    background: black;
  }
}
```

Compiles to:

```css
.btn {
  background: white;
}

@media (prefers-color-scheme: dark) {
  .btn {
    background: black;
  }
}
```

For backwards compatibility, the `@variant` rules that don't have a body
and are
defined inline:

```css
@variant hocus (&:hover, &:focus);
```

And `@variant` rules that are defined with a body and a `@slot`:

```css
@variant hocus {
  &:hover, &:focus {
    @slot;
  }
}
```

Will automatically be upgraded to `@custom-variant` internally, so no
breaking changes are introduced with this PR.

---

TODO:
- [x] ~~Decide whether we want to allow multiple variants and if so,
what syntax should be used. If not, nesting `@variant <variant> {}` will
be the way to go.~~ Only a single `@variant <variant>` can be used, if
you want to use multiple, nesting should be used:

```css
.foo {
  @variant hover {
    @variant focus {
      color: red;
    }
  }
}
```
2025-01-21 10:20:35 -05:00
depfu[bot]
67237e22a1
Update postcss 8.4.49 → 8.5.1 (minor) (#15675) 2025-01-20 21:50:29 +01:00
depfu[bot]
03afd43f28
Update h3 1.13.0 → 1.13.1 (patch) (#15661) 2025-01-20 15:39:26 +01:00
Robin Malfait
a51b214c13
Use more modern --alpha(color / 50%) syntax (#15665)
This PR changes the syntax for the `--alpha(…)` function to look like
more modern CSS.

The arguments to apply an alpha to a color is using the `/` syntax
instead of the comma syntax.

```diff
- --alpha(color, 50%)
+ --alpha(color / 50%)
```

This syntax is now similar to modern `rgb(0 0 0 / 50%)` syntax in CSS.
2025-01-17 18:48:18 -05:00
Robin Malfait
f93c42fcfc
Write to stdout when --output is omitted (#15656) 2025-01-17 15:23:34 +00:00
Jordan Pittman
2f8c51774e
Ensure -outline-offset-* utilities are suggested in IntelliSense (#15646)
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2025-01-16 12:09:56 -05:00
Philipp Spiess
fe758af73d
Upgrade lightningcss to 1.29.1 in standalone package (#15641)
Closes #15636
Closes #15638
Closes #15637

I noticed that I forgot to update the bundled `lightningcss`
dependencies in the `standalone` project. This makes sure we have the
same version everywhere.
2025-01-16 16:06:08 +01:00
Jordan Pittman
528c848575
Discard invalid variants such as data-checked-[selected=1]:* (#15629) 2025-01-15 09:55:39 -05:00
depfu[bot]
e62991abf9 Update @tailwindcss/typography to version 0.5.16 2025-01-15 09:58:48 +00:00
depfu[bot]
79b471500a
Update @tailwindcss/forms 0.5.9 → 0.5.10 (minor) (#15627) 2025-01-15 10:50:29 +01:00
Philipp Spiess
2de644b20e
Remove @property fallbacks for Firefox (#15622)
This PR removes the `@property` fallbacks added in #13655. This is
possible because we're targeting a minimum Firefox version of 128 which
[includes support for \`@property\`
rules](https://developer.mozilla.org/de/docs/Web/CSS/@property).

<img width="1284" alt="Screenshot 2025-01-14 at 11 36 44"
src="https://github.com/user-attachments/assets/ae070781-35c1-4165-be51-baa63f28db5b"
/>
2025-01-14 15:51:44 +01:00
Robin Malfait
da2da51284
Resolve values in functional utilities based on @theme options (#15623)
This PR fixes an issue where functional utilities configured via CSS
don't resolve the values correctly.

We always fully resolved the values as-if a `@theme inline` was used.

We used to compile the following code:
```css
@theme {
  --tab-size-github: 8;
}

@utility tab-* {
  tab-size: --value(--tab-size);
}
```

Into:
```css
:root {
  --tab-size-github: 8;
}

.tab-github {
  tab-size: 8;
}
```

But it should be referencing the variable instead:
```css
:root {
  --tab-size-github: 8;
}

.tab-github {
  tab-size: var(--tab-size-github);
}
```

However, if you used `@theme inline reference`, it should inline the
value:
```css
@theme inline reference {
  --tab-size-github: 8;
}

@utility tab-* {
  tab-size: --value(--tab-size);
}
```

This will now correctly compile to:
```css
.tab-github {
  tab-size: 8;
}
```
2025-01-14 12:35:04 +01:00
depfu[bot]
d2fbdf505f
Update @types/bun 1.1.14 → 1.1.16 (patch) (#15618) 2025-01-14 11:25:18 +01:00
Robin Malfait
3b033957c5
Ensure namespace reset with escaped * works (#15603)
This PR fixes an issue if you want to reset a namespace like:

```css
@theme {
  --color-*: initial;
}
```

That some formatters such as Biome won't allow this syntax. To solve
that, this PR allows you to use an escaped `*` character.

```css
@theme {
  --color-\*: initial;
}
```

Fixes: #15602
2025-01-13 10:43:22 +00:00
depfu[bot]
ae8fb146a7
Update fast-glob 3.3.2 → 3.3.3 (patch) (#15607) 2025-01-13 11:11:35 +01:00
depfu[bot]
fcee63d997
Update @types/braces 3.0.4 → 3.0.5 (patch) (#15612) 2025-01-13 10:53:47 +01:00
Robin Malfait
b4a20af4d0
Improve upgrade tool to pretty print --spacing(2) (#15596)
This PR improves the upgrade tool to make sure that newly upgraded
`--spacing(2)` CSS functions is pretty printed to prevent unambiguous
looking classes (even though it compiles correctly).

If you have a class such as `m-[calc(100dvh-theme(spacing.2))]`, then we
used to convert it to `m-[calc(100dvh-calc(var(--spacing)*2))]`. But
recently we introduced the `--spacing(2)` CSS function which means that
the output now looks like this instead: `m-[calc(100dvh---spacing(2))]`.

The triple `-` is valid because the first `-` is the minus sign, the
next two `-` characters are from the function.

One solution is to introduce spaces via underscores:

```
m-[calc(100dvh_-_--spacing(2))]
```

But a simpler solution, is to wrap the `--spacing(2)` in parens to
remove the underscores and improve the readability of the `---`
characters.

```
m-[calc(100dvh-(--spacing(2)))]
```
2025-01-10 09:07:23 -05:00
depfu[bot]
27f8bab7ab
Update @types/react 18.3.12 → 19.0.2 (major) (#15588)
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?




#### ✳️ @​types/react (18.3.12 → 19.0.2) ·
[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-01-10 13:14:27 +00:00