-
Notifications
You must be signed in to change notification settings - Fork 238
Open
Description
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:
leftmeans "gradient from left to right" =90deg270degmeans "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:
- Convert it correctly to
90deg, or - Leave the legacy syntax unchanged to avoid breaking existing styles
Metadata
Metadata
Assignees
Labels
No labels