Parenthesis pair mangled when variables declared within a CSS function

[cmauduit]

Hello,

I try to transform a css file (material-components-web.css) that contains variables declared in differents ways. Some of them are not replaced by the plugin. For example : background-color: color(var(--mdc-theme-text-primary-on-primary, white)); gives : background-color: color(white; So it miss a ')' before ';'

I had a look to the code of the plugin and I think that I found a solution. In the file resolve-value.js, I modified the regex variable : RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*(.+))?\)/)
to RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*([^\)\(]+|(.+)))?\)/);

It seems to work. If it is ok for you, can you implement it in your future versions? Thx

[MadLittleMods]

Hey @cmauduit,

I just tested this out and I am not getting the same results. Could another plugin be interfering here?

I also added a test to the codebase to make sure this test case is covered, https://github.com/MadLittleMods/postcss-css-variables/commit/dfb5ec10543cbd9e201280f176483ca018145f49

Input:

.box-foo {
	background-color: color(var(--some-color, white));
}

Output:

.box-foo {
	background-color: color(white);
}

[kenbellows]

@MadLittleMods I see this as well in the PostCSS Playground. I'm running Chrome 62 on Windows 7, in case that makes any difference. Screenshot attached.

[MadLittleMods]

Thanks @kenbellows, it looks like the key is to actually have the variable defined which I assumed wasn't because OP had the output value as the fallback value.

Input,

:root {
	--some-color: #f00;
}

.box-foo {
	background-color: color(var(--some-color, white));
}

Output:

.box-foo {
	background-color: color(#f00;
}

[equinusocio]

Any update?

[MadLittleMods]

@equinusocio No update, PR welcome