Canonicalization constant folding and handling zeros #19095

RobinMalfait · 2025-10-09T11:03:21Z

The main goal of this PR was to support canonicalization of zero like values. We essentially want to canonicalize -mt-0 as mt-0, but also mt-[0px], mt-[0rem], and other length-like units to just mt-0.

To do this, we had to handle 2 things:

We introduced some more constant folding, including making 0px and 0rem fold to 0. We only do this for length units. We also normalize -0, +0, -0.0 and so on to 0.
While pre-computing utilities in our lookup table, we make sure that we prefer mt-0 over -mt-0 if both result in the same signature.

Moved some of the constant folding logic into its own function and added a bunch of separate tests for it.

Test plan

Added more unit tests where we normalize different zero-like values to 0.

Running the canonicalization logic:

designSystem.canonicalizeCandidates([
  '-m-0',
  '-m-[-0px]',
  '-m-[-0rem]',
  '-m-[0px]',
  '-m-[0rem]',
  'm-0',
  'm-[-0px]',
  'm-[-0rem]',
  'm-[0px]',
  'm-[0rem]',
  'm-[calc(var(--spacing)*0)]',
  'm-[--spacing(0)]',
  'm-[--spacing(0.0)]',
  'm-[+0]',
  'm-[-0]',
  '-m-[-0]',
  '-m-[+0]',
]) // → ['m-0']

Typically each math operator is parsed as a separate word and that's because it's also typically surrounded by spaces. In case of `/`, this was parsed as a separator instead of a word including the whitespace (if any). The use case we had was to parse `theme(colors.red.500/20%)` where we don't want `colors.red.500/20%` to be a single word, but we want 3 parts instead. This normalizes this a little bit such that all math operators (+, -, *, /) are just the `word` nodes and any surrounding whitespace will be a separator node instead.

This is essentially the same as `walk`, but depth first so we handle leaf nodes first. This helps in situations like constant folding where we can work our way up.

We will use those in the constant folding logic. We could use `ValueParser.parse` but we already know we want `word(…)` values so no need to do the extra work.

This doesn't operate on a declaration, but a declaration value right now. Could extend this in the future by also passing in the declaration property if we want more smart fold logic.

This will rely on 2 things: 1. That we properly constant fold length units into `0` 2. That we prefer the "positive" version (`mt-0`) over its negative version (`-mt-0`)

Given they have the same signature.

packages/@tailwindcss-upgrade/src/codemods/template/migrate.test.ts

RobinMalfait · 2025-10-09T11:15:39Z

packages/tailwindcss/src/constant-fold-declaration.ts

+      //
+      // TODO: Ensure it's safe to do so based on the data types?


I think this is fairly safe, and feels like something we only have to add support for when running into actual issues 🤔

Let me see if I can break this

Probaaaably, but once you do, the questions is: how common / real is the actual issue.

I think normalizing things with units to without could cause problems (like rem, em, etc… should probably normalize to 0px instead) but then how would you know margin-left: 0 normalizes to 0px without encoding data type info and that'd be annoying.

All that to say… I think this is fine for now. We can improve this later if need be.

packages/tailwindcss/src/value-parser.ts

…st.ts

packages/tailwindcss/src/constant-fold-declaration.test.ts

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.1.12` -> `4.1.17`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@tailwindcss%2fpostcss/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>tailwindlabs/tailwindcss (@tailwindcss/postcss)</summary> ### [`v4.1.17`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4117---2025-11-06) [Compare Source](tailwindlabs/tailwindcss@v4.1.16...v4.1.17) ##### Fixed - Substitute `@variant` inside legacy JS APIs ([#19263](tailwindlabs/tailwindcss#19263)) - Prevent occasional crash on Windows when loaded into a worker thread ([#19242](tailwindlabs/tailwindcss#19242)) ### [`v4.1.16`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4116---2025-10-23) [Compare Source](tailwindlabs/tailwindcss@v4.1.15...v4.1.16) ##### Fixed - Discard candidates with an empty data type ([#19172](tailwindlabs/tailwindcss#19172)) - Fix canonicalization of arbitrary variants with attribute selectors ([#19176](tailwindlabs/tailwindcss#19176)) - Fix invalid colors due to nested `&` ([#19184](tailwindlabs/tailwindcss#19184)) - Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](tailwindlabs/tailwindcss#19178)) ### [`v4.1.15`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4115---2025-10-20) [Compare Source](tailwindlabs/tailwindcss@v4.1.14...v4.1.15) ##### Fixed - Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](tailwindlabs/tailwindcss#19069)) - Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#19094](tailwindlabs/tailwindcss#19094)) - Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#19097](tailwindlabs/tailwindcss#19097)) - Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#19100](tailwindlabs/tailwindcss#19100)) - Prevent important utilities from affecting other utilities ([#19110](tailwindlabs/tailwindcss#19110)) - Don’t index into strings with the `theme(…)` function ([#19111](tailwindlabs/tailwindcss#19111)) - Fix parsing issue when `\t` is used in at-rules ([#19130](tailwindlabs/tailwindcss#19130)) - Upgrade: Canonicalize utilities containing `0` values ([#19095](tailwindlabs/tailwindcss#19095)) - Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#19157](tailwindlabs/tailwindcss#19157)) ##### Changed - Remove the `postinstall` script from oxide (\[[#19149](https://github.com/tailwindlabs/tailwindcss/issues/19149)])([#19149](https://github.com/tailwindlabs/tailwindcss/pull/19149)) ### [`v4.1.14`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4114---2025-10-01) [Compare Source](tailwindlabs/tailwindcss@v4.1.13...v4.1.14) ##### Fixed - Handle `'` syntax in ClojureScript when extracting classes ([#18888](tailwindlabs/tailwindcss#18888)) - Handle `@variant` inside `@custom-variant` ([#18885](tailwindlabs/tailwindcss#18885)) - Merge suggestions when using `@utility` ([#18900](tailwindlabs/tailwindcss#18900)) - Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](tailwindlabs/tailwindcss#18905)) - Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](tailwindlabs/tailwindcss#18907)) - Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](tailwindlabs/tailwindcss#18907)) - Prevent duplicate CSS when overwriting a static utility with a theme key ([#18056](tailwindlabs/tailwindcss#18056)) - Show Lightning CSS warnings (if any) when optimizing/minifying ([#18918](tailwindlabs/tailwindcss#18918)) - Use `default` export condition for `@tailwindcss/vite` ([#18948](tailwindlabs/tailwindcss#18948)) - Re-throw errors from PostCSS nodes ([#18373](tailwindlabs/tailwindcss#18373)) - Detect classes in markdown inline directives ([#18967](tailwindlabs/tailwindcss#18967)) - Ensure files with only `@theme` produce no output when built ([#18979](tailwindlabs/tailwindcss#18979)) - Support Maud templates when extracting classes ([#18988](tailwindlabs/tailwindcss#18988)) - Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#18922](tailwindlabs/tailwindcss#18922)) - Upgrade: Show version mismatch (if any) when running upgrade tool ([#19028](tailwindlabs/tailwindcss#19028)) - Upgrade: Ensure first class inside `className` is migrated ([#19031](tailwindlabs/tailwindcss#19031)) - Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#19031](tailwindlabs/tailwindcss#19031)) ### [`v4.1.13`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4113---2025-09-03) [Compare Source](tailwindlabs/tailwindcss@v4.1.12...v4.1.13) ##### Changed - Drop warning from browser build ([#18731](tailwindlabs/tailwindcss#18731)) - Drop exact duplicate declarations when emitting CSS ([#18809](tailwindlabs/tailwindcss#18809)) ##### Fixed - Don't transition `visibility` when using `transition` ([#18795](tailwindlabs/tailwindcss#18795)) - Discard matched variants with unknown named values ([#18799](tailwindlabs/tailwindcss#18799)) - Discard matched variants with non-string values ([#18799](tailwindlabs/tailwindcss#18799)) - Show suggestions for known `matchVariant` values ([#18798](tailwindlabs/tailwindcss#18798)) - Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](tailwindlabs/tailwindcss#18769)) - Hide internal fields from completions in `matchUtilities` ([#18820](tailwindlabs/tailwindcss#18820)) - Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#18855](tailwindlabs/tailwindcss#18855)) - Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#18869](tailwindlabs/tailwindcss#18869)) - Do not allow custom variants to start or end with a `-` or `_` ([#18867](tailwindlabs/tailwindcss#18867), [#18872](tailwindlabs/tailwindcss#18872)) - Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#18815](tailwindlabs/tailwindcss#18815)) - Upgrade: Migrate `data` theme keys to `@custom-variant` ([#18816](tailwindlabs/tailwindcss#18816)) - Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#18817](tailwindlabs/tailwindcss#18817)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://git.in.csmpro.ru/csmpro/csm-mapban/pulls/28 Co-authored-by: Renovate Bot <renovate@csmpro.ru> Co-committed-by: Renovate Bot <renovate@csmpro.ru>

RobinMalfait added 11 commits October 9, 2025 11:59

add walkDepth to the ValueParser

026c4db

This is essentially the same as `walk`, but depth first so we handle leaf nodes first. This helps in situations like constant folding where we can work our way up.

export word and isLength functions

9060d34

We will use those in the constant folding logic. We could use `ValueParser.parse` but we already know we want `word(…)` values so no need to do the extra work.

add constant fold declaration functionality

4388ef0

This doesn't operate on a declaration, but a declaration value right now. Could extend this in the future by also passing in the declaration property if we want more smart fold logic.

handle + and - values, and make the unit optional

a92cd9d

set unit to null in case there is no unit

ff49719

swap constant folding in the signature with new logic

895c5af

add canonicalize utilities with 0 test

f12a879

This will rely on 2 things: 1. That we properly constant fold length units into `0` 2. That we prefer the "positive" version (`mt-0`) over its negative version (`-mt-0`)

prefer mt-0 over -mt-0

3d97eb5

Given they have the same signature.

add a few more tests

cdd9e9a

update changelog

aadb54c

RobinMalfait marked this pull request as ready for review October 9, 2025 11:12

RobinMalfait requested a review from a team as a code owner October 9, 2025 11:12

RobinMalfait commented Oct 9, 2025

View reviewed changes

packages/@tailwindcss-upgrade/src/codemods/template/migrate.test.ts Outdated Show resolved Hide resolved

RobinMalfait commented Oct 9, 2025

View reviewed changes

packages/tailwindcss/src/value-parser.ts Outdated Show resolved Hide resolved

RobinMalfait added 2 commits October 9, 2025 13:18

Update packages/@tailwindcss-upgrade/src/codemods/template/migrate.te…

0715b7e

…st.ts

Update packages/tailwindcss/src/value-parser.ts

d8d8a61

thecrypticace reviewed Oct 9, 2025

View reviewed changes

packages/tailwindcss/src/constant-fold-declaration.test.ts Show resolved Hide resolved

Update packages/tailwindcss/src/constant-fold-declaration.test.ts

549f9a8

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

thecrypticace approved these changes Oct 9, 2025

View reviewed changes

Merge branch 'main' into feat/canonicalization-constant-folding

a71c765

RobinMalfait enabled auto-merge (squash) October 9, 2025 17:59

RobinMalfait merged commit 01d1e98 into main Oct 9, 2025
7 checks passed

RobinMalfait deleted the feat/canonicalization-constant-folding branch October 9, 2025 18:09

This was referenced Oct 21, 2025

build(deps-dev): Bump tailwindcss from 4.1.13 to 4.1.15 blinklabs-io/utxorpc-example#240

Merged

chore(deps-dev): bump tailwindcss from 3.4.18 to 4.1.16 WhizUs-Labs/kcd-showcase-trw-demo-app#28

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Canonicalization constant folding and handling zeros #19095

Canonicalization constant folding and handling zeros #19095

Uh oh!

RobinMalfait commented Oct 9, 2025 •

edited

Loading

Uh oh!

RobinMalfait Oct 9, 2025

thecrypticace Oct 9, 2025

RobinMalfait Oct 9, 2025

thecrypticace Oct 9, 2025

Uh oh!

Uh oh!

Uh oh!

Labels

3 participants

		//
		// TODO: Ensure it's safe to do so based on the data types?

Uh oh!

Canonicalization constant folding and handling zeros #19095

Canonicalization constant folding and handling zeros #19095

Uh oh!

Conversation

RobinMalfait commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Uh oh!

RobinMalfait Oct 9, 2025

Choose a reason for hiding this comment

thecrypticace Oct 9, 2025

Choose a reason for hiding this comment

RobinMalfait Oct 9, 2025

Choose a reason for hiding this comment

thecrypticace Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Labels

3 participants

RobinMalfait commented Oct 9, 2025 •

edited

Loading