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})`)
                        }
                    }
                ]
            ]
        }
    }
}