postcss/postcss-simple-vars

intermittent Undefined variable

Opened this issue · 2 comments

I use Webpack with post-css-simple-vars and am running into an issue where I am getting some intermittent CSS var errors:

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1!./~/postcss-loader?parser=postcss-comment!./src/theme/global/index.css
postcss-simple-vars: /Users/tarikansari/Workspace/sane-web/src/theme/global/base.css:17:3: Undefined variable $sansReg
body {
  font-family: $sansReg;
  ^
  height: 100%;

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1!./~/postcss-loader?parser=postcss-comment!./src/theme/global/index.css
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (/Users/tarikansari/Workspace/sane-web/node_modules/postcss/lib/input.js:31:23)
    at parse (/Users/tarikansari/Workspace/sane-web/node_modules/postcss/lib/parse.js:22:17)
    at new LazyResult (/Users/tarikansari/Workspace/sane-web/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/Users/tarikansari/Workspace/sane-web/node_modules/postcss/lib/processor.js:34:16)
    at processCss (/Users/tarikansari/Workspace/sane-web/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/tarikansari/Workspace/sane-web/node_modules/css-loader/lib/loader.js:24:2)
 @ ./src/theme/global/index.css 4:14-187 13:2-17:4 14:20-193

Now if I rm -rf node_modules && npm install and run again the errors is gone, but on the second run it is back again, sometime I get an error about an undefined mixin instead.

This is my postcss config:

    postcss: function (webpack) {
        return [
            require('postcss-import')({ path: includePath, addDependencyTo: webpack }),

            require('autoprefixer'),
            require('postcss-mixins'),
            require('postcss-nested'),
            require('postcss-simple-vars'),
            require('postcss-custom-media'),
            require('postcss-property-lookup'),

            require('postcss-color-function')
        ];
    },

Any idea what could be causing this?

Interestingly, I juste made a test and got this: on first run, mixin error, on second run, vars error, on third run build successful/. I made a couple more run and the errors just don't happen in a specific order or anything, sometimes I will get two different var errors and then it builds.

Update: I am suspecting this is related to a postcss-import issue: postcss/postcss-import#168