I have encountered an issue with Lightning CSS where LogicalProperties are not converted when a CSS variable is used within a calc() expression. In the provided minimal reproducible example, the conversion for inset: calc(var(--test)) is skipped, even though the result of the calc() (with var(--test) defined as a concrete value) should be processed and converted accordingly.
Minimal Reproducible Example:
Playground Example
Steps to Reproduce:
- Open the above playground link.
- Observe the CSS source, which includes:
.foo {
--test: 10px;
inset: 0;
inset: 10px;
inset: calc(var(--test));
}
- Process the CSS using Lightning CSS with a target configuration that should trigger conversion of LogicalProperties.
- Notice that while the plain inset values are converted, the calc(var(--test)) is not converted.
Expected Behavior:
Even when using calc(var(--test)), since --test is defined with a concrete value, the result of the calc() should be a computable value. Therefore, it should be eligible for conversion to its corresponding physical properties (e.g., converting logical properties to physical ones based on target browser support).
Actual Behavior:
The conversion step for inset: calc(var(--test)) appears to be skipped, and the property remains unchanged.
Additional Context:
Since calc() expressions with CSS variables should yield a definite value, I believe that the current behavior might be an unintended bug in the conversion logic of Lightning CSS. Any guidance or fix on this issue would be highly appreciated.
I have encountered an issue with Lightning CSS where LogicalProperties are not converted when a CSS variable is used within a calc() expression. In the provided minimal reproducible example, the conversion for inset: calc(var(--test)) is skipped, even though the result of the calc() (with var(--test) defined as a concrete value) should be processed and converted accordingly.
Minimal Reproducible Example:
Playground Example
Steps to Reproduce:
Expected Behavior:
Even when using calc(var(--test)), since --test is defined with a concrete value, the result of the calc() should be a computable value. Therefore, it should be eligible for conversion to its corresponding physical properties (e.g., converting logical properties to physical ones based on target browser support).
Actual Behavior:
The conversion step for inset: calc(var(--test)) appears to be skipped, and the property remains unchanged.
Additional Context:
Since calc() expressions with CSS variables should yield a definite value, I believe that the current behavior might be an unintended bug in the conversion logic of Lightning CSS. Any guidance or fix on this issue would be highly appreciated.