Skip to content

% doesn't properly get added to the CSS variable causing broken css #1451

@yannickgloster

Description

@yannickgloster

Environment

  • Linaria version: 6.3.0
  • Bundler (+ version): RSPack 1.3.15
  • Node.js version: v22.17.0
  • OS: MacOS

Description

Using the % directly after an interpolation doesn't seem to get passed to the helper as mentioned in this doc. px doesn't have this issue.

If we encounter a valid unit directly after the interpolation, it'll be passed to the helper so that the correct unit is used when setting the property.

Reproducible Demo

const Title = styled.h1<{ width: number }>`
  width: ${(p) => p.width}%;
`;

Turns into

--c1y54dea-1: 83.33333333333334;
width: var(--c1y54dea-1)%;

which is invalid css. This should turn into

--c1y54dea-1: 83.33333333333334%;
width: var(--c1y54dea-1);

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions