Skip to content

Bug: Incorrect conversion of legacy -webkit-linear-gradient direction keywords #1107

@Llldmiao

Description

@Llldmiao

Description

LightningCSS incorrectly converts the legacy -webkit-linear-gradient(left, ...) syntax to -webkit-linear-gradient(270deg, ...), which produces the opposite gradient direction.

Input CSS

background: -webkit-linear-gradient(left, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 16.66%, rgb(0, 255, 0) 33.33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 66.66%, rgb(255, 0, 255) 83.33%, rgb(255, 0, 0) 100%);

Actual Output

background: -webkit-linear-gradient(270deg, red 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, red 100%);

Expected Behavior

The legacy -webkit-linear-gradient(left, ...) should be converted to -webkit-linear-gradient(90deg, ...) or left unchanged, since:

  • left means "gradient from left to right" = 90deg
  • 270deg means "gradient from right to left" = opposite direction

Visual Comparison

You can verify the issue with this HTML:

<div style="width: 200px; height: 100px; background: -webkit-linear-gradient(left, red, blue);"></div>
<div style="width: 200px; height: 100px; background: -webkit-linear-gradient(270deg, red, blue);"></div>

These produce opposite gradients.

Environment

  • LightningCSS version: (used via Rspack's LightningCssMinimizerRspackPlugin)
  • Rspack version: 1.5.0

Additional Notes

While the legacy -webkit-linear-gradient(left, ...) syntax is deprecated and modern code should use linear-gradient(to right, ...), LightningCSS should either:

  1. Convert it correctly to 90deg, or
  2. Leave the legacy syntax unchanged to avoid breaking existing styles

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