custom value for custom property

[Diokuz]

Hi there)

Im trying to upgrade postcss-custom-properties from 7.0.0 to the latest version, and I have a problem.

I have a code:

.defaultTheme {
  --FB-color-error-message: var(--color-red);
}

which transpilled by 7th version to

.defaultTheme {
  --FB-color-error-message: #f00 ;
}

but not by ^8:

.defaultTheme {
  --FB-color-error-message: var(--color-red);
}

PS: I've changed variables: cssVariables, to importFrom: { customProperties: cssVariables },, and it works for properties like color.

[thollander]

Hi,

Facing the same problem here ... However, I saw that it seems to be wanted in transform-properties.js#L43. Not sure why

[NXTaar]

Hi! I have the same problem. Need such functionality for proper theming. my code colors.css

:root {
    --c-primary-bg: hsl(251, 80%, 88%);
    --c-primary: hsl(251, 78%, 40%);
    --c-primary-hover: hsl(251, 70%, 29%);
    --c-primary-pressed: hsl(238, 70%, 24%);

    --c-primary-alt-bg: hsl(0, 0%, 100%);
    --c-primary-alt-bg-hover: hsl(251, 30%, 96%);
    --c-primary-alt-bg-pressed: hsl(251, 27%, 92%);
}

button.css

@import "../colors.css";
@import "../fonts.css";

.control {
    font: var(--font-primary);
    --btn-background:          var(--c-primary);
    --btn-background-hover:    var(--c-primary-hover);
    --btn-background-active:   var(--c-primary-pressed);
}

Import is resolved properly, but the result has same values, not replaced.

.control {
    font: 400 16px/24px 'Helvetica Neue';
    --btn-background:          var(--c-primary);
    --btn-background-hover:    var(--c-primary-hover);
    --btn-background-active:   var(--c-primary-pressed);
}