Feature request: disable preserve on a variable

[mdmoreau]

Somewhat related to https://github.com/postcss/postcss-custom-properties/issues/101.

Would it be possible to disable preserve on a single variable? I'm thinking maybe var() could be wrapped in another function that forces it to always write the actual variable value.

My use case is similar to the issue above, where I'm trying to use a var as a fill color in an SVG. Would something like n(var(--color)) or nvar(--color) be within the scope of this plugin?

[homburg]

As a workaround, we're currently using background-color: color-mod(--var-black), this results in the color output as a static value: background-color: rgb(0, 0, 0)

[garygreen]

@homburg that's an interesting concept. Maybe this library can provide a way of specifically hinting a variable should be converted to a static value?

:root {
  --fa-search: "\F00D";
}
.my-icon {
   font-family: FontAwesome;
   content: static(var(--fa-search));
}

Expected output (even when preserve=true)

.my-icon {
   font-family: FontAwesome;
   content: "\F00D";
}

[asos-tomp]

+1 for this feature

I have a situation where I need to modify something in a :before and :after pseudo-element from JS; inaccessible normally, but can be modified if a css variable on its parent is used.

however, this is the only use case for it; we accept that it doesn't work in IE11-, since it's a bell-and-whistle. We would love not to have the overhead of all the other css variables being written out due to the broad preserve: true; and the knock-on effect that postcss-calc can no longer be used.

[kevinwhoffman]

I agree with the approach suggested in https://github.com/postcss/postcss-custom-properties/issues/101#issuecomment-395874705 to disable preserve with a comment.

There are two primary use cases in which we use CSS custom properties:

1. To improve the developer experience by defining reusable properties in one location. In this use case, there is no reason to preserve the custom properties because they are purely to improve DX and serve no legitimate purpose in the production code.
2. To allow certain properties to be easily customized via JavaScript. In this use case, the variables should be preserved so that their values can be defined on the fly in production as the result of user activity or environment.

A comment to preserve some custom properties and not others would be ideal.

[mdmoreau]

Ended up creating https://github.com/mdmoreau/postcss-root-var which works similarly to what @garygreen described.