Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

`Undefined variable` inside function

Open
  • Is something wrong?
#90 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
30/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
css, javascript
Domain
frontend, tooling

Research direction

Reproduce the report using postcss.config.js and the shown main.pcss, colors.pcss, components/flash.pcss, and components/forms.pcss files. Start by checking how imported files are processed and how postcss-simple-vars scopes variables; done means determining whether the reported undefined variable is reproducible and documenting or fixing the behavior.

Written by the indexing model from the issue text.

Description

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 |
Dominant language
JavaScript
Stars
428
Forks
35
Avg merge
1m
Merged PRs (30d)
1

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • No Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss-simple-vars

All issues in postcss/postcss-simple-vars

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.