lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

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

Open Llldmiao opened this issue 4 months ago • 1 comments

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

Llldmiao avatar Dec 11 '25 07:12 Llldmiao

PS: reproduced on lightningcss-cli@^1.30.2

Llldmiao avatar Dec 11 '25 08:12 Llldmiao