Add logical sizing utilities (inline-size, block-size)#19612
Add logical sizing utilities (inline-size, block-size)#19612RobinMalfait merged 3 commits intomainfrom
Conversation
WalkthroughThe changes introduce new utility classes for CSS 🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Tip 🧪 Unit Test Generation v2 is now available!We have significantly improved our unit test generation capabilities. To enable: Add this to your reviews:
finishing_touches:
unit_tests:
enabled: trueTry it out by using the Have feedback? Share your thoughts on our Discord thread! Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/tailwindcss/src/utilities.test.ts`:
- Around line 3725-3740: The test block using run(...) contains a duplicated
entry 'max-inline-max/foo' and is missing viewport-unit variants; remove the
duplicate 'max-inline-max/foo' (only keep one) and add tests for the
viewport-unit forms analogous to the existing ones, e.g. include
'max-inline-screen/...', 'max-inline-svw/...', 'max-inline-lvw/...', and
'max-inline-dvw/...' in the array passed to run() so viewport unit behavior for
max-inline is covered; keep the surrounding expect(await run(...)).toEqual('')
assertion and the existing items unchanged other than these additions/removal.
| expect( | ||
| await run([ | ||
| 'max-inline', | ||
| 'max-inline-auto', | ||
| '-max-inline-4', | ||
| '-max-inline-[4px]', | ||
| 'max-inline-none/foo', | ||
| 'max-inline-full/foo', | ||
| 'max-inline-max/foo', | ||
| 'max-inline-max/foo', | ||
| 'max-inline-fit/foo', | ||
| 'max-inline-4/foo', | ||
| 'max-inline-xl/foo', | ||
| 'max-inline-[4px]/foo', | ||
| ]), | ||
| ).toEqual('') |
There was a problem hiding this comment.
Duplicate test case and missing viewport unit tests.
'max-inline-max/foo'is duplicated on lines 3733-3734.- Similar to
min-inline-size, this test is missing coverage for viewport units (max-inline-screen,max-inline-svw,max-inline-lvw,max-inline-dvw) if they are implemented.
🛠️ Proposed fix for duplicate
'max-inline-full/foo',
'max-inline-max/foo',
- 'max-inline-max/foo',
+ 'max-inline-min/foo',
'max-inline-fit/foo',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect( | |
| await run([ | |
| 'max-inline', | |
| 'max-inline-auto', | |
| '-max-inline-4', | |
| '-max-inline-[4px]', | |
| 'max-inline-none/foo', | |
| 'max-inline-full/foo', | |
| 'max-inline-max/foo', | |
| 'max-inline-max/foo', | |
| 'max-inline-fit/foo', | |
| 'max-inline-4/foo', | |
| 'max-inline-xl/foo', | |
| 'max-inline-[4px]/foo', | |
| ]), | |
| ).toEqual('') | |
| expect( | |
| await run([ | |
| 'max-inline', | |
| 'max-inline-auto', | |
| '-max-inline-4', | |
| '-max-inline-[4px]', | |
| 'max-inline-none/foo', | |
| 'max-inline-full/foo', | |
| 'max-inline-max/foo', | |
| 'max-inline-min/foo', | |
| 'max-inline-fit/foo', | |
| 'max-inline-4/foo', | |
| 'max-inline-xl/foo', | |
| 'max-inline-[4px]/foo', | |
| ]), | |
| ).toEqual('') |
🤖 Prompt for AI Agents
In `@packages/tailwindcss/src/utilities.test.ts` around lines 3725 - 3740, The
test block using run(...) contains a duplicated entry 'max-inline-max/foo' and
is missing viewport-unit variants; remove the duplicate 'max-inline-max/foo'
(only keep one) and add tests for the viewport-unit forms analogous to the
existing ones, e.g. include 'max-inline-screen/...', 'max-inline-svw/...',
'max-inline-lvw/...', and 'max-inline-dvw/...' in the array passed to run() so
viewport unit behavior for max-inline is covered; keep the surrounding
expect(await run(...)).toEqual('') assertion and the existing items unchanged
other than these additions/removal.
Add new utilities for CSS logical properties: - inline-* for inline-size (like width) - min-inline-* for min-inline-size (like min-width) - max-inline-* for max-inline-size (like max-width) - block-* for block-size (like height) - min-block-* for min-block-size (like min-height) - max-block-* for max-block-size (like max-height) These utilities support the same values as their width/height counterparts, including spacing values, fractions, viewport units, and container namespace. https://claude.ai/code/session_01WhrjmutxsLP753VUtFy24S
RobinMalfait
force-pushed
the
claude/add-size-utilities-vm9dl
branch
from
b0ed72d to
5589db1
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@packages/tailwindcss/src/utilities.test.ts`:
- Around line 3785-3794: The test for min-inline-size is missing assertions for
viewport-unit variants; update the test array in utilities.test.ts for the
'min-inline-size' case to include the viewport-unit utilities analogous to
min-block-size (e.g., add 'min-inline-screen', 'min-inline-svw',
'min-inline-lvw', 'min-inline-dvw'); these utilities are implemented in
utilities.ts (see the minInlineSize handling around the code paths at lines
~1101 and ~1126) so just append those four entries to the expected list in the
existing test case.
- Line 3861: The max-inline-size test is missing coverage for min-content and
inline-axis viewport units; update the array of expected utilities (the list
that currently includes 'max-inline-none', 'max-inline-full', etc.) to also
include 'max-inline-min' (for min-content), 'max-inline-screen', and the inline
viewport unit variants 'max-inline-svw', 'max-inline-lvw', and 'max-inline-dvw'
so the max-inline-size test matches the parity of max-block-size's equivalents.
| [ | ||
| 'min-inline-full', | ||
| 'min-inline-auto', | ||
| 'min-inline-min', | ||
| 'min-inline-max', | ||
| 'min-inline-fit', | ||
| 'min-inline-4', | ||
| 'min-inline-xl', | ||
| 'min-inline-[4px]', | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's check the utilities.ts file for min-inline and min-block implementations
echo "=== Checking min-inline and min-block viewport utilities in utilities.ts ==="
rg -n 'min-inline.*(screen|svw|lvw|dvw)' packages/tailwindcss/src/utilities.ts
echo -e "\n=== Pattern differences between min-inline and min-block implementations ==="
rg -nA 10 "'min-inline-size'" packages/tailwindcss/src/utilities.ts
echo -e "\n=== Pattern for min-block-size ==="
rg -nA 10 "'min-block-size'" packages/tailwindcss/src/utilities.tsRepository: tailwindlabs/tailwindcss
Length of output: 5388
🏁 Script executed:
#!/bin/bash
# Check the test file at the specified lines for min-inline-size test
echo "=== Test for min-inline-size around line 3775-3849 ==="
sed -n '3775,3849p' packages/tailwindcss/src/utilities.test.ts
echo -e "\n=== Test for min-block-size around line 4035-4038 ==="
sed -n '4030,4050p' packages/tailwindcss/src/utilities.test.tsRepository: tailwindlabs/tailwindcss
Length of output: 2041
Add missing viewport unit tests for min-inline-size.
The min-inline-size test lacks coverage for viewport units (min-inline-screen, min-inline-svw, min-inline-lvw, min-inline-dvw), while min-block-size (lines ~4035-4048) includes equivalent tests (min-block-screen, min-block-svh, min-block-lvh, min-block-dvh). These utilities are implemented in utilities.ts (lines 1101, 1126) and supported; only the test coverage is missing.
Add these viewport unit utilities to the test case for consistency with min-block-size.
🤖 Prompt for AI Agents
In `@packages/tailwindcss/src/utilities.test.ts` around lines 3785 - 3794, The
test for min-inline-size is missing assertions for viewport-unit variants;
update the test array in utilities.test.ts for the 'min-inline-size' case to
include the viewport-unit utilities analogous to min-block-size (e.g., add
'min-inline-screen', 'min-inline-svw', 'min-inline-lvw', 'min-inline-dvw');
these utilities are implemented in utilities.ts (see the minInlineSize handling
around the code paths at lines ~1101 and ~1126) so just append those four
entries to the expected list in the existing test case.
| } | ||
| @tailwind utilities; | ||
| `, | ||
| ['max-inline-none', 'max-inline-full', 'max-inline-max', 'max-inline-fit', 'max-inline-4', 'max-inline-xl', 'max-inline-[4px]'], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if max-inline viewport utilities are implemented
rg -n 'max-inline.*(screen|svw|lvw|dvw|min)' packages/tailwindcss/src/utilities.ts
echo "---"
# Also check what max-inline utilities exist
rg -n '"max-inline' packages/tailwindcss/src/utilities.ts | head -20Repository: tailwindlabs/tailwindcss
Length of output: 145
🏁 Script executed:
#!/bin/bash
# Check the test file at the line in question
cat -n packages/tailwindcss/src/utilities.test.ts | sed -n '3850,3875p'Repository: tailwindlabs/tailwindcss
Length of output: 839
🏁 Script executed:
#!/bin/bash
# Check the max-block test to see what it includes
cat -n packages/tailwindcss/src/utilities.test.ts | sed -n '4130,4145p'Repository: tailwindlabs/tailwindcss
Length of output: 535
🏁 Script executed:
#!/bin/bash
# Search for max-inline implementations in utilities.ts
rg -n 'max-inline' packages/tailwindcss/src/utilities.ts | head -30Repository: tailwindlabs/tailwindcss
Length of output: 482
🏁 Script executed:
#!/bin/bash
# Search for all max-inline viewport unit variants
rg -n 'max-inline-(screen|svw|lvw|dvw|min)' packages/tailwindcss/src/utilities.tsRepository: tailwindlabs/tailwindcss
Length of output: 141
🏁 Script executed:
#!/bin/bash
# Look at the full max-inline implementation section in utilities.ts
cat -n packages/tailwindcss/src/utilities.ts | sed -n '1070,1145p'Repository: tailwindlabs/tailwindcss
Length of output: 3614
🏁 Script executed:
#!/bin/bash
# Check if there's any mention of svw/lvw/dvw at all (these might be width-based variants)
rg -n '(svw|lvw|dvw)' packages/tailwindcss/src/utilities.ts | head -20Repository: tailwindlabs/tailwindcss
Length of output: 235
Add missing viewport units and min-content coverage to max-inline-size test.
The max-inline-size test is missing coverage for utilities that are implemented in the codebase:
max-inline-min(formin-content)max-inline-screenmax-inline-svw,max-inline-lvw,max-inline-dvw(inline-axis viewport units)
The max-block-size test (lines 4130-4143) includes these equivalents (max-block-min, max-block-screen, max-block-svh/lvh/dvh), so max-inline-size should have parity.
🤖 Prompt for AI Agents
In `@packages/tailwindcss/src/utilities.test.ts` at line 3861, The max-inline-size
test is missing coverage for min-content and inline-axis viewport units; update
the array of expected utilities (the list that currently includes
'max-inline-none', 'max-inline-full', etc.) to also include 'max-inline-min'
(for min-content), 'max-inline-screen', and the inline viewport unit variants
'max-inline-svw', 'max-inline-lvw', and 'max-inline-dvw' so the max-inline-size
test matches the parity of max-block-size's equivalents.
3 participants
Summary
Adds new utilities for CSS logical properties that provide writing-direction-aware alternatives to width and height:
inline-*forinline-size(logical equivalent of width)min-inline-*formin-inline-size(logical equivalent of min-width)max-inline-*formax-inline-size(logical equivalent of max-width)block-*forblock-size(logical equivalent of height)min-block-*formin-block-size(logical equivalent of min-height)max-block-*formax-block-size(logical equivalent of max-height)New Utilities
inline-size utilities
inline-autoinline-size: autoinline-fullinline-size: 100%inline-mininline-size: min-contentinline-maxinline-size: max-contentinline-fitinline-size: fit-contentinline-screeninline-size: 100vwinline-svwinline-size: 100svwinline-lvwinline-size: 100lvwinline-dvwinline-size: 100dvwinline-{spacing}inline-size: {value}(e.g.,inline-4,inline-px)inline-{fraction}inline-size: {percent}(e.g.,inline-1/2,inline-3/4)inline-[{value}]inline-size: {value}(arbitrary values)min-inline-size utilities
min-inline-automin-inline-size: automin-inline-fullmin-inline-size: 100%min-inline-minmin-inline-size: min-contentmin-inline-maxmin-inline-size: max-contentmin-inline-fitmin-inline-size: fit-contentmin-inline-screenmin-inline-size: 100vwmin-inline-svwmin-inline-size: 100svwmin-inline-lvwmin-inline-size: 100lvwmin-inline-dvwmin-inline-size: 100dvwmin-inline-{spacing}min-inline-size: {value}min-inline-[{value}]min-inline-size: {value}(arbitrary values)max-inline-size utilities
max-inline-nonemax-inline-size: nonemax-inline-fullmax-inline-size: 100%max-inline-minmax-inline-size: min-contentmax-inline-maxmax-inline-size: max-contentmax-inline-fitmax-inline-size: fit-contentmax-inline-screenmax-inline-size: 100vwmax-inline-svwmax-inline-size: 100svwmax-inline-lvwmax-inline-size: 100lvwmax-inline-dvwmax-inline-size: 100dvwmax-inline-{spacing}max-inline-size: {value}max-inline-[{value}]max-inline-size: {value}(arbitrary values)block-size utilities
block-autoblock-size: autoblock-fullblock-size: 100%block-minblock-size: min-contentblock-maxblock-size: max-contentblock-fitblock-size: fit-contentblock-screenblock-size: 100vhblock-lhblock-size: 1lhblock-svhblock-size: 100svhblock-lvhblock-size: 100lvhblock-dvhblock-size: 100dvhblock-{spacing}block-size: {value}(e.g.,block-4,block-px)block-{fraction}block-size: {percent}(e.g.,block-1/2,block-3/4)block-[{value}]block-size: {value}(arbitrary values)min-block-size utilities
min-block-automin-block-size: automin-block-fullmin-block-size: 100%min-block-minmin-block-size: min-contentmin-block-maxmin-block-size: max-contentmin-block-fitmin-block-size: fit-contentmin-block-screenmin-block-size: 100vhmin-block-lhmin-block-size: 1lhmin-block-svhmin-block-size: 100svhmin-block-lvhmin-block-size: 100lvhmin-block-dvhmin-block-size: 100dvhmin-block-{spacing}min-block-size: {value}min-block-[{value}]min-block-size: {value}(arbitrary values)max-block-size utilities
max-block-nonemax-block-size: nonemax-block-fullmax-block-size: 100%max-block-minmax-block-size: min-contentmax-block-maxmax-block-size: max-contentmax-block-fitmax-block-size: fit-contentmax-block-screenmax-block-size: 100vhmax-block-lhmax-block-size: 1lhmax-block-svhmax-block-size: 100svhmax-block-lvhmax-block-size: 100lvhmax-block-dvhmax-block-size: 100dvhmax-block-{spacing}max-block-size: {value}max-block-[{value}]max-block-size: {value}(arbitrary values)Test plan