Variables not being replaced / plugin not being used

[Christopher Dignam]

Hello,
I'm not sure what's going on, but I believe I have configured this package correctly so that the variables should be replaced.

Here's my config. Is there anything obviously incorrect?

// webpack
....
      {
        test: /\.css$/,
        use:  [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader',
            options: {
              plugins: [
                require("postcss-import")(),
                require("postcss-simple-vars")({
                  variables: require("./client/variables.json")
                }),
                require("postcss-modules-values")(),
                require("postcss-nested")(),
                require("postcss-modules-local-by-default")(),
                require("postcss-modules-extract-imports")(),
                require("postcss-modules-scope")(),
                require("postcss-hexrgba")()
              ]
...

// packages
"postcss": "^7.0.5",
"postcss-cssnext": "^3.1.0",
"postcss-hexrgba": "^1.0.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-modules": "^1.4.1",
"postcss-modules-extract-imports": "^1.1.0",
"postcss-modules-local-by-default": "^1.2.0",
"postcss-modules-scope": "^1.1.0",
"postcss-nested": "^4.1.0",
"postcss-plugins": "^1.12.3",
"postcss-simple-vars": "^5.0.1",

The require for variables.json is correctly loading the JSON file, but I'm getting the the following error (I've cleaned it up a bit) at compilation.

Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(18:3) Undefined variable $blue-grey-600

  16 |   line-height: 1.5rem;
  17 |   letter-spacing: normal;
> 18 |   color: $blue-grey-600;
     |   ^
  19 | }
  20 | 

Any suggestion on how to debug this would be greatly appreciated.

[Andrey Sitnik]

Show your ./client/variables.json

[Christopher Dignam]

{
  "variables": {
    "blue-grey-400": "#77909d",
    "blue-grey-500": "#5f7d8c",
    "blue-grey-600": "#536e7b",
    "blue-grey-700": "#445a65",
    "blue-grey-800": "#37474f",
    "blue-grey-900": "#253238",
  }
}

Thanks so much, that was it! The format was wrong. I made it all flat and it works!

{
    "blue-grey-400": "#77909d",
    "blue-grey-500": "#5f7d8c",
    "blue-grey-600": "#536e7b",
    "blue-grey-700": "#445a65",
    "blue-grey-800": "#37474f",
    "blue-grey-900": "#253238",
}

To provide some background, I was porting/updating postcss to use plain JS instead of a Meteor package, so I guess this format must have changed somewhere along the way.