`Undefined variable` inside function

[AlexWayfer]

Hello.

I have such files:

// postcss.config.js
module.exports = {
	plugins: [
		require('postcss-import')({
			root: `${__dirname}/assets/styles`
		}),
		require('postcss-simple-vars'),
		require('postcss-conditionals'),
		require('postcss-nested'),
		require('postcss-flexbugs-fixes'),
		// require('postcss-color-mod-function'),
		require('autoprefixer')
	]
}

/* main.pcss */
@import 'colors.pcss';

@import 'components/flash.pcss';
@import 'components/forms.pcss';

/* ... */

/* colors.pcss */
$danger-text-color: red;
$error-color: $danger-text-color;

/* components/flash.pcss */
.flash {
	&.error {
		color: $error-color;
	}
}

/* components/forms.pcss */
form {
	p.error {
		color: color-mod($error-color whiteness(15%));
	}
}

And I'm getting such error:

CssSyntaxError: postcss-simple-vars: /home/alex/Projects/ruby/test/foo_bar/assets/styles/components/forms.pcss:22:3: Undefined variable $error-color

  20 | 		margin: 0;
  21 | 		padding-left: 0.4em;
> 22 | 		color: color-mod($error-color whiteness(15%));
     | 		^
  23 | 	}
  24 | 

[ai]

Can you send a PR? I spend all my time on PostCSS 8 release preparation.

It should be related with this code https://github.com/postcss/postcss-simple-vars/blob/8537852b564363a2a23f5adced9af5e7389f23c8/index.js#L38-L42

The plugin code is very simple and small.

[firasdib]

@ai Maybe you're looking for a regex more along the lines of this

/\B\$([\w\d\-_]+)/g

See: https://regex101.com/r/18W8P6/1

[sampullman]

I can't reproduce this, I don't have time to set up an example repo to include imports but the problem could be related to plugin order. Or, unless I misunderstand how scoping is supposed to work, should components/forms.pcss have @import 'colors.pcss'; in order to resolve the variable?

Replacement in functions seems to work fine, I tested the specific case above and added a unit test for this kind of thing.