Is it possible to use CSS Custom Properties in val

Question

Example:

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

When this is rendered, the computed CSS is literally that value.

content: var(--PrimaryThemeColor);

Even if I'm using a post-processor that injects the computed value as a fallback, the value itself isn't a string, so it's invalid for content.

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}

Answer 1

The value of the custom property has to be a string (either a string literal, an attr() expression, or in the case of content any combination of any number of said tokens) in order for the corresponding var() expression to work correctly anywhere that a string is expected.

It is not possible to convert a non-string value to a string or between any two data types through the var() function, if that's what you're asking. The value is always parsed, stored and substituted as-is, and the value can comprise any number of any kind of token, so converting between data types would be... pretty difficult.