mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Upgrade: Migrate JS theme configuration keys with dot and slash in the property name (#14736)
This PR fixes an issue where JS configuration theme properties with dots
or slashes in them would not migrate correctly. E.g.:
```ts
import { type Config } from 'tailwindcss'
module.exports = {
theme: {
width: {
1.5: '0.375rem',
'1/2': '50%',
}
}
}
```
This should convert to:
```css
@theme {
--width-1_5: 0.375rem;
--width-1\/2: 50%;
}
```
_Note: We will likely change the `--width-1_5` key to `--width-1\.5` in
a follow-up PR._
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Philipp Spiess
parent
a06245b3fe
commit
41decce8de
@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- _Upgrade (experimental)_: Ensure legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724))
|
||||
- _Upgrade (experimental)_: Migrate arbitrary values to bare values for the `from-*`, `via-*`, and `to-*` utilities ([#14725](https://github.com/tailwindlabs/tailwindcss/pull/14725))
|
||||
- _Upgrade (experimental)_: Ensure `layer(utilities)` is removed from `@import` to keep `@utility` top-level ([#14738](https://github.com/tailwindlabs/tailwindcss/pull/14738))
|
||||
- _Upgrade (experimental)_: Ensure JS theme keys with special characters are escaped when migrated to CSS variables ([#14736](https://github.com/tailwindlabs/tailwindcss/pull/14736))
|
||||
- _Upgrade (experimental)_: Don't migrate important modifiers that are actually logical negations (e.g. `let foo = !border` to `let foo = border!`) ([#14737](https://github.com/tailwindlabs/tailwindcss/pull/14737))
|
||||
|
||||
### Changed
|
||||
|
||||
@ -34,6 +34,57 @@ test(
|
||||
sm: ['0.875rem', { lineHeight: '1.5rem' }],
|
||||
base: ['1rem', { lineHeight: '2rem' }],
|
||||
},
|
||||
width: {
|
||||
px: '1px',
|
||||
auto: 'auto',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
8: '2rem',
|
||||
10: '2.5rem',
|
||||
11: '2.75rem',
|
||||
12: '3rem',
|
||||
16: '4rem',
|
||||
24: '6rem',
|
||||
32: '8rem',
|
||||
40: '10rem',
|
||||
48: '12rem',
|
||||
64: '16rem',
|
||||
80: '20rem',
|
||||
96: '24rem',
|
||||
128: '32rem',
|
||||
|
||||
full: '100%',
|
||||
0: '0%',
|
||||
'1/2': '50%',
|
||||
'1/3': 'calc(100% / 3)',
|
||||
'2/3': 'calc(100% / 3 * 2)',
|
||||
'1/4': '25%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': 'calc(100% / 6)',
|
||||
'5/6': 'calc(100% / 6 * 5)',
|
||||
'1/7': 'calc(100% / 7)',
|
||||
'1/10': 'calc(100% / 10)',
|
||||
'3/10': 'calc(100% / 10 * 3)',
|
||||
'7/10': 'calc(100% / 10 * 7)',
|
||||
'9/10': 'calc(100% / 10 * 9)',
|
||||
screen: '100vw',
|
||||
|
||||
'full-minus-80': 'calc(100% - 20rem)',
|
||||
'full-minus-96': 'calc(100% - 24rem)',
|
||||
|
||||
'225px': '225px',
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
red: {
|
||||
@ -147,6 +198,54 @@ test(
|
||||
--font-size-base: 1rem;
|
||||
--font-size-base--line-height: 2rem;
|
||||
|
||||
--width-*: initial;
|
||||
--width-0: 0%;
|
||||
--width-1: 0.25rem;
|
||||
--width-2: 0.5rem;
|
||||
--width-3: 0.75rem;
|
||||
--width-4: 1rem;
|
||||
--width-5: 1.25rem;
|
||||
--width-6: 1.5rem;
|
||||
--width-8: 2rem;
|
||||
--width-10: 2.5rem;
|
||||
--width-11: 2.75rem;
|
||||
--width-12: 3rem;
|
||||
--width-16: 4rem;
|
||||
--width-24: 6rem;
|
||||
--width-32: 8rem;
|
||||
--width-40: 10rem;
|
||||
--width-48: 12rem;
|
||||
--width-64: 16rem;
|
||||
--width-80: 20rem;
|
||||
--width-96: 24rem;
|
||||
--width-128: 32rem;
|
||||
--width-px: 1px;
|
||||
--width-auto: auto;
|
||||
--width-1_5: 0.375rem;
|
||||
--width-2_5: 0.625rem;
|
||||
--width-3_5: 0.875rem;
|
||||
--width-full: 100%;
|
||||
--width-1\\/2: 50%;
|
||||
--width-1\\/3: calc(100% / 3);
|
||||
--width-2\\/3: calc(100% / 3 * 2);
|
||||
--width-1\\/4: 25%;
|
||||
--width-3\\/4: 75%;
|
||||
--width-1\\/5: 20%;
|
||||
--width-2\\/5: 40%;
|
||||
--width-3\\/5: 60%;
|
||||
--width-4\\/5: 80%;
|
||||
--width-1\\/6: calc(100% / 6);
|
||||
--width-5\\/6: calc(100% / 6 * 5);
|
||||
--width-1\\/7: calc(100% / 7);
|
||||
--width-1\\/10: calc(100% / 10);
|
||||
--width-3\\/10: calc(100% / 10 * 3);
|
||||
--width-7\\/10: calc(100% / 10 * 7);
|
||||
--width-9\\/10: calc(100% / 10 * 9);
|
||||
--width-screen: 100vw;
|
||||
--width-full-minus-80: calc(100% - 20rem);
|
||||
--width-full-minus-96: calc(100% - 24rem);
|
||||
--width-225px: 225px;
|
||||
|
||||
--font-family-sans: Inter, system-ui, sans-serif;
|
||||
--font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
@ -15,6 +15,7 @@ import { resolveConfig, type ConfigFile } from '../../tailwindcss/src/compat/con
|
||||
import type { ThemeConfig } from '../../tailwindcss/src/compat/config/types'
|
||||
import { darkModePlugin } from '../../tailwindcss/src/compat/dark-mode'
|
||||
import type { DesignSystem } from '../../tailwindcss/src/design-system'
|
||||
import { escape } from '../../tailwindcss/src/utils/escape'
|
||||
import { findStaticPlugins, type StaticPluginOptions } from './utils/extract-static-plugins'
|
||||
import { info } from './utils/renderer'
|
||||
|
||||
@ -121,10 +122,16 @@ async function migrateTheme(
|
||||
|
||||
if (resetNamespaces.has(key[0]) && resetNamespaces.get(key[0]) === false) {
|
||||
resetNamespaces.set(key[0], true)
|
||||
css += ` --${keyPathToCssProperty([key[0]])}-*: initial;\n`
|
||||
let property = keyPathToCssProperty([key[0]])
|
||||
if (property !== null) {
|
||||
css += ` ${escape(`--${property}`)}-*: initial;\n`
|
||||
}
|
||||
}
|
||||
|
||||
css += ` --${keyPathToCssProperty(key)}: ${value};\n`
|
||||
let property = keyPathToCssProperty(key)
|
||||
if (property !== null) {
|
||||
css += ` ${escape(`--${property}`)}: ${value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
if ('keyframes' in resolvedConfig.theme) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { expect, test } from 'vitest'
|
||||
import { describe, expect, test } from 'vitest'
|
||||
import { buildDesignSystem } from '../design-system'
|
||||
import { Theme, ThemeOptions } from '../theme'
|
||||
import { applyConfigToTheme } from './apply-config-to-theme'
|
||||
import { applyConfigToTheme, keyPathToCssProperty } from './apply-config-to-theme'
|
||||
import { resolveConfig } from './config/resolve-config'
|
||||
|
||||
test('config values can be merged into the theme', () => {
|
||||
@ -157,3 +157,12 @@ test('invalid keys are not merged into the theme', () => {
|
||||
|
||||
expect(entries.length).toEqual(0)
|
||||
})
|
||||
|
||||
describe('keyPathToCssProperty', () => {
|
||||
test.each([
|
||||
[['width', '40', '2/5'], '--width-40-2/5'],
|
||||
[['spacing', '0.5'], '--spacing-0_5'],
|
||||
])('converts %s to %s', (keyPath, expected) => {
|
||||
expect(`--${keyPathToCssProperty(keyPath)}`).toEqual(expected)
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user