Color Mod doesn't work with Custom Properties

[james-prado]

I'm using postcss-preset-env and color-mod() doesn't work with custom css properties

I understand resolving custom properties is difficult without importing the :root {...} styles, but even after importing and resolving custom variables I'm still getting errors.

index.css:

body {
  background-color: color-mod(var(--color-primary) h(64));
}

foo.css:

  :root {
    --color-primary: "#0366d6";
  }

webpack.config:

{
    loader: 'postcss-loader',
    options: {
        plugins: () => [
            postcssPresetEnv({
                stage: 3,
                features: {
                    'color-mod-function': {
                        unresolved: 'warn',
                        importFrom: 'src/assets/foo.css',
                    }
                }
            })
        ]
    }
},

Expected behaviour

input.css

background-color: color-mod(var(--color-primary) hue(64));

output.css

background-color: #cad803;

Actual behaviour

input.css

background-color: color-mod(var(--color-primary) hue(64));

output.css

background-color: color-mod(#0366d6 hue(64));

[james-prado]

It kinda looks like color-mod is resolved before var(--color-primary) is. I'll try testing by cherry-picking the a css-custom-properties and color-mod loaders and have custom properties run before color-mod

[marr]

bump

[olegshilov]

Hi. I have almost the same issue here.
When i declare my variables outside the root section, and try to compile my css, i get following error:

➜  postcss test.css --verbose
Processing test.css...

CssSyntaxError: postcss-color-mod-function: /Users/olegshilov/Desktop/postcss-test/test.css:11:33: Expected a color

   9 |
  10 |   &:hover {
> 11 |     background-color: color-mod(var(--button-color) tint(10%));
     |                                 ^
  12 |   }
  13 | }

postcss.config.js:

module.exports = {
  plugins: {
    "postcss-nested": {},
    "postcss-custom-properties": {},
    "postcss-color-mod-function": {}
  }
};

test.css:

:root {
  --button-default-color: #a8abb5;
  --button-primary-color: #9042d6;
}

.container {
  --button-color: var(--button-default-color);
  background-color: var(--button-color);

  &:hover {
    background-color: color-mod(var(--button-color) tint(10%));
  }
}

.primary {
  --button-color: var(--button-primary-color);
}

[olegshilov]

@james-prado why are you close the issue? do you have any thoughts about how to fix this?