Unable to parse color from string "$primary-color"

[martenzander]

I am using postcss-advanced-variables and if i try to put variables into my color values I get the following error:

Unable to parse color from string "$primary-color"

this is my postcss line up:

    'postcss-import': {},
    'postcss-at-rules-variables' : {},
    'postcss-nested-ancestors' : {},
    level4 : {},
    'postcss-for' : {},
    'postcss-each' : {},
    'postcss-sassy-mixins' : {},
    'postcss-advanced-variables' : {},
    'postcss-conditionals' : {},
    'postcss-hexrgba' : {},
    'postcss-object-fit-images' : {},
    'postcss-flexbugs-fixes' : {},
    'postcss-quantity-queries' : {},
    'postcss-size' : {},
    'postcss-will-change' : {},
    'postcss-nested' : {},
    'postcss-easings' : {},
    'postcss-random' : {},
    'postcss-calc' : {
        warnWhenCannotResolve: false,
        mediaQueries: true,
    },
    'postcss-inline-svg' : {
        path: 'src/svg',
        encode: function encode(code) {
            return code
                .replace(/%/g, '%25')
                .replace(/</g, '%3C')
                .replace(/>/g, '%3E')
                .replace(/&/g, '%26')
                .replace(/#/g, '%23');
        },
        removeFill: true,
    },
    'postcss-initial' : {},
    autoprefixer : { browsers },
    'postcss-color-function' : {},
    cssnano : ctx.env === 'production' ? {
        filterPlugins: false,
        safe: true,
        mergeRules: false,
        browsers,
        discardComments: {
            removeAll: true,
        },
    } : false,

[Semigradsky]

@SlimMarten could you remove all plugins except postcss-advanced-variable and postcss-color-function and provide css code when it error reproduced?

[damiangreen]

Was there a resolution to this?

When I try to do this:

 --dark-base: #1b1c20;
 --dark-10: color(var(--dark-base) lightness(10%));

I get this output:

but the color doesnt take.

If I use the color directly instead of the var, i.e. #1b1c20; it works but I'm obviously duplicating..I'm using React Starter Kit.

[marr]

bump

[bkincart]

bump! Edit: Of note, it looks like there was discussion a while back around postcss-custom-properties, but using that plugin is not resolving the issue for me :/ https://github.com/postcss/postcss-color-function/issues/25

[rostik32]

bump

[abelozerov]

As a replacement using postcss-functions plugin with css-color-function npm package (which is used under the hood of postcss-color-function)

Webpack config:

var color = require('css-color-function');

...

{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                [
                    'postcss-functions',
                    {
                        functions: {
                            color: (value) => color.convert(`color(${value})`)
                        }
                    }
                ]
            ]
        }
    }
}