7a836d8495
## Problem Using a negative modifier with `theme()` inside an arbitrary value produces no CSS output. - ✅ `ms-[theme(margin.1)]` — works - ✅ `-ms-[10px]` — works - ❌ `-ms-[theme(margin.1)]` — no output ## Cause `negateValue()` in `src/util/negateValue.js` doesn't recognize `theme()` as a negatable function. It falls through all conditions and returns `undefined`, causing the utility to be silently dropped. ## Fix Added `'theme'` to the `numericFunctions` list so `theme()` values get wrapped in `calc(... * -1)`, which the PostCSS `theme()` resolver then processes downstream. ## Tests - **Unit test** (`negateValue.test.js`): `negateValue('theme(margin.1)')` returns `calc(theme(margin.1) * -1)` - **Integration test** (`arbitrary-values.test.js`): `-mt-[theme(spacing.1)]` produces `margin-top: -0.25rem` --------- Co-authored-by: Casey Corcoran <casecorc@amazon.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
18 lines
618 B
JavaScript
18 lines
618 B
JavaScript
import negateValue from '../src/util/negateValue'
|
|
|
|
test('it negates numeric CSS values', () => {
|
|
expect(negateValue('5')).toEqual('-5')
|
|
expect(negateValue('10px')).toEqual('-10px')
|
|
expect(negateValue('18rem')).toEqual('-18rem')
|
|
expect(negateValue('-10')).toEqual('10')
|
|
expect(negateValue('-7ch')).toEqual('7ch')
|
|
})
|
|
|
|
test('values that cannot be negated become undefined', () => {
|
|
expect(negateValue('auto')).toBeUndefined()
|
|
expect(negateValue('cover')).toBeUndefined()
|
|
})
|
|
|
|
test('it negates theme() function calls', () => {
|
|
expect(negateValue('theme(margin.1)')).toEqual('calc(theme(margin.1) * -1)')
|
|
})
|