`Undefined variable` inside function

AlexWayfer commented 4 years ago

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 commented 4 years ago

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

The plugin code is very simple and small.

firasdib commented 3 years ago

@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 commented 3 years ago

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.

postcss / postcss-simple-vars

`Undefined variable` inside function #90