`variables: require(...)` doesn't work after 1.2.2 -> 2.2.0 upgrade about postcss-advanced-variables HOT 8 CLOSED

Changing it to:

    "postcss-advanced-variables": {
      importPaths: ['./src/assets/stylesheets/variables.json']
    },

doesn't help.

from postcss-advanced-variables.

@pjg, could you give a sample of what your variables.json file looks like? Otherwise, I may have a lot of trouble debugging this.

I am already testing for this kind of variables support here: https://github.com/jonathantneal/postcss-advanced-variables/blob/master/.tape.js#L6-L13 which defines $default as custom-fn-value.

That test then uses this file: https://github.com/jonathantneal/postcss-advanced-variables/blob/master/test/default.css#L4

Which produces this correct result: https://github.com/jonathantneal/postcss-advanced-variables/blob/master/test/default.var-func.expect.css#L2

from postcss-advanced-variables.

My variables.json file looks like this:

{
  "primary-border-radius": "3px",

  "blue": "#2ABCDC",
  "green": "#53D6AE",
  "red": "#E8562A",
  ...
}

from postcss-advanced-variables.

@pjg, does it have a gray-bg key? As in, "gray-bg": "YOUR_HEX_VALUE"? The error says that variable could not be resolved:

Could not resolve the variable "$gray-bg" within "$gray-bg"

from postcss-advanced-variables.

Yes, it has it:

"gray-bg": "#F2F7FA",

from postcss-advanced-variables.

Here’s what I’ve done. I setup a test like this:

https://github.com/jonathantneal/postcss-tests/blob/master/postcss-advanced-variables-test-00/test.js#L15-L17

postcssVariables({
  variables: require('./variables.json')
})

Where variables.json is:

https://github.com/jonathantneal/postcss-tests/blob/master/postcss-advanced-variables-test-00/variables.json

{
  "primary-border-radius": "3px",
  "blue": "#2ABCDC",
  "green": "#53D6AE",
  "red": "#E8562A",
  "gray-bg": "#F2F7FA"
}

And then I’ve tested it against this css file:

https://github.com/jonathantneal/postcss-tests/blob/master/postcss-advanced-variables-test-00/test.css#L2

.test {
  color: $gray-bg;
}

And the result is successfully:

https://github.com/jonathantneal/postcss-tests/blob/master/postcss-advanced-variables-test-00/test.expect.css#L2

.test {
  color: #F2F7FA;
}

Because this test is passing, I’m not sure where your issue is coming from. Have you tried to log the require statement to see if it is taking in the right variables?

console.log(require('./src/assets/stylesheets/variables.json'))

The next step would be to get a reduced snippet of your CSS that will cause the error.

from postcss-advanced-variables.

I guess the issue is with running it through webpack in Vue. I'll experiment with different importing options.

from postcss-advanced-variables.

Figured it out.

Turns out, now advanced-variables is more restrictive towards invalid variables being used in CSS files. I had a couple of incorrect references and an @import url("http://...") statement which didn't work after upgrading to 2.2. I've corrected all of them and things work again. Closing.

Thanks for your support!

from postcss-advanced-variables.