Simplify logical sizing utility theme namespaces (#19625)
Update inline-size and block-size utilities to only read from --spacing and --container theme keys, removing backwards-compat references to --width, --height, --min-width, --min-height, --max-width, and --max-height. Since these are new utilities with no backwards compatibility concerns, the simpler approach is preferred: - inline/min-inline/max-inline: --spacing, --container - block/min-block/max-block: --spacing only https://claude.ai/code/session_01WhrjmutxsLP753VUtFy24S <!-- 👋 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 a discussion to first discuss any significant new features. For more info, check out the contributing guide: https://github.com/tailwindcss/tailwindcss/blob/main/.github/CONTRIBUTING.md --> ## Summary <!-- Provide a summary of the issue and the changes you're making. How does your change solve the problem? --> ## Test plan <!-- Explain how you tested your changes. Include the exact commands that you used to verify the change works and include screenshots/screen recordings of the update behavior in the browser if applicable. --> Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d8b00d1114
commit
d52c94ff5f
2 changed files with 9 additions and 9 deletions
|
|
@ -3842,7 +3842,7 @@ test('inline-size', async () => {
|
|||
css`
|
||||
@theme {
|
||||
--spacing-4: 1rem;
|
||||
--width-xl: 36rem;
|
||||
--container-xl: 36rem;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
|
|
@ -3865,7 +3865,7 @@ test('inline-size', async () => {
|
|||
).toMatchInlineSnapshot(`
|
||||
":root, :host {
|
||||
--spacing-4: 1rem;
|
||||
--width-xl: 36rem;
|
||||
--container-xl: 36rem;
|
||||
}
|
||||
|
||||
.inline-1\\/2 {
|
||||
|
|
@ -3917,7 +3917,7 @@ test('inline-size', async () => {
|
|||
}
|
||||
|
||||
.inline-xl {
|
||||
inline-size: var(--width-xl);
|
||||
inline-size: var(--container-xl);
|
||||
}"
|
||||
`)
|
||||
expect(
|
||||
|
|
|
|||
|
|
@ -1135,12 +1135,12 @@ export function createUtilities(theme: Theme) {
|
|||
staticUtility(`max-block-none`, [['max-block-size', 'none']])
|
||||
|
||||
for (let [name, namespaces, property] of [
|
||||
['inline', ['--width', '--spacing', '--container'], 'inline-size'],
|
||||
['min-inline', ['--min-width', '--spacing', '--container'], 'min-inline-size'],
|
||||
['max-inline', ['--max-width', '--spacing', '--container'], 'max-inline-size'],
|
||||
['block', ['--height', '--spacing'], 'block-size'],
|
||||
['min-block', ['--min-height', '--height', '--spacing'], 'min-block-size'],
|
||||
['max-block', ['--max-height', '--height', '--spacing'], 'max-block-size'],
|
||||
['inline', ['--spacing', '--container'], 'inline-size'],
|
||||
['min-inline', ['--spacing', '--container'], 'min-inline-size'],
|
||||
['max-inline', ['--spacing', '--container'], 'max-inline-size'],
|
||||
['block', ['--spacing'], 'block-size'],
|
||||
['min-block', ['--spacing'], 'min-block-size'],
|
||||
['max-block', ['--spacing'], 'max-block-size'],
|
||||
] as [string, ThemeKey[], string][]) {
|
||||
spacingUtility(name, namespaces, (value) => [decl(property, value)], {
|
||||
supportsFractions: true,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue