postcss / postcss-simple-vars

PostCSS plugin for Sass-like variables
MIT License
415 stars 36 forks source link

Some variables not being replaced in v6 #92

Closed cullylarson closed 3 years ago

cullylarson commented 3 years ago

I just upgraded from postcss-simple-vars v5 to v6. Some variables are no longer being replaced. For example, in the following mixin:

@define-mixin pad-left-gutter {
    padding-left: $page-lr-margin-xs;

    @media (--sm) { padding-left: calc((100vw - $width--sm) / 2); }
    @media (--md) { padding-left: calc((100vw - $width--md) / 2); }
    @media (--lg) { padding-left: calc((100vw - $width--lg) / 2); }
    @media (--xl) { padding-left: calc((100vw - $width--xl) / 2); }
}

The $width-- variables and the $page-lr-margin-xs variable are not being replaced. I tried renaming the $width-- variables, in case the double -- was the issue, but had the same problem.

Here's my postcss.config.js:

const path = require('path')
const createResolver = require('postcss-import-webpack-resolver')

module.exports = {
    plugins: {
        'postcss-import': {
            resolve: createResolver({
                alias: {
                    '@css': path.resolve(__dirname, 'client/style'),
                    '@client': path.resolve(__dirname, 'client'),
                },
            }),
        },
        'postcss-mixins': {},
        'postcss-simple-vars': {},
        'postcss-nested-ancestors': {},
        'postcss-nested': {},
        'postcss-custom-media': {},
        'postcss-calc': {mediaQueries: true},
        'postcss-pxtorem': {
            rootValue: 16,
            unitPrecision: 5,
            propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
        },
        'postcss-preset-env': {
            stage: 0,
            browsers: 'last 2 versions',
        },
    }
}

Let me know if I can provide any other information.

UPDATE: This only seems to be an issue for variables inside mixins.

Could it be related to this: https://github.com/postcss/postcss-simple-vars/commit/a674a56e49a5d4a93db9c09a10ff76da2768a493 ? Just confirmed; it does seem to be related to the new isIgnore function from https://github.com/postcss/postcss-simple-vars/commit/a674a56e49a5d4a93db9c09a10ff76da2768a493. Since all @define-mixin calls are ignored, postcss-simple-vars will not replace variables inside one. I modified IsIgnore to always return false and it fixed my issue. However, I get the issue that the isIgnore function was created to resolve: Undefined variable errors if you have a parameter for a @define-mixin definition. So it doesn't seem like an easy fix.

ai commented 3 years ago

I was burned off with PostCSS open source, so I will not have the resources to fix this issue for you.

Somebody needs to refactor how the plugin works. I will help with PR and releasing it quickly.

cullylarson commented 3 years ago

@ai Sorry to hear you got burned out. Taking a break sounds like a really good decision. Hope you get to spend your time on things that are more life giving :)