Undefined variable defined in stylesheet imported from dependency

[kestred]

When using variables from a stylesheet imported from a dependency, postcss-css-variables doesn't find variables defined in an imported stylesheet, even though the variables are present in the output.

WARNING in ./index.css
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(2:3) variable --ui-color-divider is undefined and used without a fallback
 @ ./index.js 2:0-21

I apologize in advanced if you tell me some simple change to my webpack config fixes this 😅 .

Minimal Example

package.json

{
  "devDependencies": {
    "css-loader": "^1.0.0",
    "postcss": "^7.0.2",
    "postcss-css-variables": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "my-dependency": "git+ssh://git@git.example.com:example/my-dependency.git"
  }
}

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {filename: 'dist.js'},
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {loader: 'postcss-loader', options: {
            ident: 'postcss',
            plugins: [
              require('postcss-css-variables')({preserve: true}),
            ],
          }},
        ],
      },
    ],
  },
};

index.js

import 'my-dependency/dist/my-dependency.css';
import './index.css';

index.css

.within-stylesheet {
  border: 1px solid var(--my-dependency-variable);
}

[MadLittleMods]

@kestred This isn't a problem with postcss-css-variables. It looks like postcss-loader for webpack processes each file individually. So when it goes over index.css, none of the variables are defined from my-dependency/dist/my-dependency.css.

You may want to use postcss-import before postcss-css-variables and use some @import statements within index.css instead.