Skip to content

LogicalProperties Conversion Skipped with CSS Variable in calc() #927

@DarknessChaser

Description

@DarknessChaser

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:

  1. Open the above playground link.
  2. Observe the CSS source, which includes:
.foo {
  --test: 10px;
  inset: 0;
  inset: 10px;
  inset: calc(var(--test));
}
  1. Process the CSS using Lightning CSS with a target configuration that should trigger conversion of LogicalProperties.
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions