[BUG] Expected 'e', 'pi', 'infinity', '-infinity' or 'NaN', ident tokens

[HQ92]

Describe the bug

I'm getting an error of

Expected 'e', 'pi', 'infinity', '-infinity' or 'NaN', ident tokens, css rule: * { backgroundImage: radial-gradient( circle at 0% 0%, oklch(from var(--colors-tile-background) calc(l + 0.1) calc(c + 0.2) h) 0, transparent 15% ), radial-gradient( circle at 80% 100%, oklch(from var(--colors-tile-background) calc(l - 0.25) calc(c + 0.01) h) 0, transparent 30% ), linear-gradient( 45deg, var(--colors-tile-background) 0%, oklch(from var(--colors-tile-background) calc(l - 0.1) calc(c + 0.3) h) 100% ) } Location: crates\stylex-shared\src\shared\utils\css\common.rs:505

The original stylex is: `js import { grid, textColor, type GreaterThanIncSmallDesktop } from '@styles/global-tokens.stylex';

const greaterThanIncSmallDesktop: GreaterThanIncSmallDesktop = @media (min-width: 1024px); const s=stylex.create({
content: { backgroundClip: 'text', backgroundImage: radial-gradient(circle at 10% 40%, oklch(42.2% 0.118 297.54) 0, transparent 15%), radial-gradient(circle at 40% 70%, oklch(58.09% 0.19 284.78) 0, transparent 22%), radial-gradient(circle at 80% 50%, oklch(58.09% 0.19 284.78) 10%, transparent 30%), radial-gradient(circle at 55% 0%, oklch(62.53% 0.2 298.1) 0%, transparent 22%), linear-gradient(45deg, oklch(73.76% 0.152 299.81) 0%, oklch(73.78% 0.167 306.41) 100%), fontSize: { default: calc(${grid.a} * 6.4), // eslint-disable-next-line @stylexjs/valid-styles [greaterThanIncSmallDesktop]: calc(${grid.a} * 4), }, lineHeight: '2em', margin: -0.5em 0, width: '100%', // eslint-disable-next-line @stylexjs/valid-styles ':has(.forwardSlash) .forwardSlash': { fontFamily: font.special, fontVariationSettings: 'STYL' 100, }, // eslint-disable-next-line @stylexjs/valid-styles ':has(> span) > span': { display: 'block', color: 'transparent', }, }, }); `

Using latest version of this plugin at 0.4.3 as well as latest stylex at 0.9.3

Error stack

Expected 'e', 'pi', 'infinity', '-infinity' or 'NaN', ident tokens, css rule: * { backgroundImage: radial-gradient(
circle at 0% 0%, oklch(from var(--colors-tile-background) calc(l + 0.1) calc(c + 0.2) h) 0, transparent 15% ), radial-gradient( circle at 80% 100%, oklch(from var(--colors-tile-background) calc(l - 0.25) calc(c + 0.01) h) 0, transparent 30% ), linear-gradient( 45deg, var(--colors-tile-background) 0%, oklch(from var(--colors-tile-background) calc(l - 0.1) calc(c + 0.3) h) 100% ) } Location: crates\stylex-shared\src\shared\utils\css\common.rs:505

OS

No response

Browser

No response

Compiler version

0.4.3

Bundler plugin(s) version

0.4.3

To Reproduce

The original stylex is: `js import { grid, textColor, type GreaterThanIncSmallDesktop } from '@styles/global-tokens.stylex';

const greaterThanIncSmallDesktop: GreaterThanIncSmallDesktop = @media (min-width: 1024px); const s=stylex.create({
content: { backgroundClip: 'text', backgroundImage: radial-gradient(circle at 10% 40%, oklch(42.2% 0.118 297.54) 0, transparent 15%), radial-gradient(circle at 40% 70%, oklch(58.09% 0.19 284.78) 0, transparent 22%), radial-gradient(circle at 80% 50%, oklch(58.09% 0.19 284.78) 10%, transparent 30%), radial-gradient(circle at 55% 0%, oklch(62.53% 0.2 298.1) 0%, transparent 22%), linear-gradient(45deg, oklch(73.76% 0.152 299.81) 0%, oklch(73.78% 0.167 306.41) 100%), fontSize: { default: calc(${grid.a} * 6.4), // eslint-disable-next-line @stylexjs/valid-styles [greaterThanIncSmallDesktop]: calc(${grid.a} * 4), }, lineHeight: '2em', margin: -0.5em 0, width: '100%', // eslint-disable-next-line @stylexjs/valid-styles ':has(.forwardSlash) .forwardSlash': { fontFamily: font.special, fontVariationSettings: 'STYL' 100, }, // eslint-disable-next-line @stylexjs/valid-styles ':has(> span) > span': { display: 'block', color: 'transparent', }, }, }); `

Provide link to a repository with a minimal reproduction case.

No response

Additional information

• [x] I have checked with the latest version

[Dwlad90]

Hi @HQ92, thanks for finding the bug.

The fix is ​​available in version 0.4.4-rc.2

[HQ92]

Hi @Dwlad90,

I've found another issue along similar lines, I think the rc version fixed the above specific error, but I've got a few more:

Expected 'e', 'pi', 'infinity', '-infinity' or 'NaN', ident tokens, css rule: * { background: linear-gradient(to right, oklch(from #000 calc(l + 0.1) c h / 0.1) 10%, oklch(from #000 calc(l + 0.2) c h) 18%, oklch(from #000 calc(l + 0.1) c h / 0.1) 33%) } frontend:dev: Location: crates\stylex-shared\src\shared\utils\css\common.rs:505

Expected 'none' value of an ident token, css rule: * { backgroundImage: linear-gradient(0deg, oklch(from #021310 l c h / 0.9) 50%, transparent 100%) } frontend:dev: [2] Location: crates\stylex-shared\src\shared\utils\css\common.rs:505

Panic occurred during transformation: Expected 'e', 'pi', 'infinity', '-infinity' or 'NaN', ident tokens, css rule: * { color: clamp(0, (var(--l-threshold, 0.623) / l - 1) * infinity, 1) }

Expected 'e', 'pi', 'infinity', '-infinity' or 'NaN', ident tokens, css rule: * { boxShadow: 0 0 0 calc(var(--xk1gm38) / 2) #000, 0 0 0 calc(var(--xk1gm38) + 1px) oklch(from var(--x10sqrwu) calc(l - 0.3) calc(c - 0.1) h / 0.7) } frontend:dev: [2] Location: crates\stylex-shared\src\shared\utils\css\common.rs:505

frontend:dev: [2] Message: Expected 'none' value of an ident token, css rule: * { boxShadow: 0 0 calc(var(--x1gppajd) * 10) 0 oklch(from var(--colors-tile-background) l c h / 0.15) }

Thanks for the quick fixes, pumped for when it gets to fully working so we can shift from babel to swc in next :D

[Dwlad90]

Thanks for finding the problem.

Actually, it's a bug in the crate swc_css_parser, which is used to parse CSS code.

Temporarily, I excluded the color functions oklch and oklab from the parsing process and opened an issue to fix the issue in the crate.

The fix is ​​available in version 0.4.4-rc.5 of the plugin.

Can you check if both found problems have been fixed?