Skip to content

Prettier breaks CSS variables ending in a comma #17058

@adamwathan

Description

@adamwathan

Reproduction:

https://prettier.io/playground/#N4Igxg9gdgLgprEAuEA6AZhCACYAdKbbAWmIFsBPYgNwEMAnJbAS0IgGsAbWgIwBoA3AQC+IPiAgAHGM2gBnZKAb0IAdwAKDBApS1Oq2hQXie9WmHZwYAZVpk4AGVZxk6PXLgmzFq9cnnWAHNkGHoAV08QDzJmEPDIuAAPSTh6ZntYPQAVVKgGZjgdN04PcTkgzjgARTCIeFd3SIArOUTrCura+qRi0pAARy64dRVJHRBaOWIoODgAE3mxEFDaZk4ggGEIMjJaZAnOTiXyqEDKgEEYUOYeMPh1VKcZhpLIgAsYMk4AdTfmeDk-jAcGs2n+zGo-wo+zAcmMIGoEQAklAFrBrGA0tJzqjrDAKJUXn1JCoPN8zJJ9iTCqlqC5xKwPPQYCNaIFdkTIv56EyYXCliTWDBvsw5jA3sgABwABnE9Dgg2Y8tZ7L2PUa4hgvBFYolSAATOIwh4srwihqQHAyDx5gs5g5aKcwmy4AAxCD0XZXIL7Wh3CAgYTCIA

Prettier strips trailing commas from CSS variables which changes the actual value of the CSS variable:

/* Input */
.foo {
  --my-var: in oklab,;
}

/* Output */

.foo {
  --my-var: in oklab;
}

This breaks situations like this, where the comma needs to be included when resolving the variable at run-time:

.in-oklab {
  --interpolation-method: in oklab,;
}

.radial-gradient {
  background-image: radial-gradient(var(--interpolation-method,) black, white));
}

In that example the comma is necessary if --interpolation-method is defined, but if it's not defined you need to make sure the comma is not there.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions