How to set global variables for PostCSS + webpack?

Question

webpack

Hello. Please tell me, I need to set variables at the project level, which I can access from any style file in the project.
Let's set the base colors, and then just use them anywhere.
I'm trying to do this via postcss-preset-env and its importFrom property by setting customProperties

…
plugins: () => [
            require("postcss-flexbugs-fixes"),
            require("postcss-preset-env")({
              autoprefixer: {
                flexbox: "no-2009",
              },
              stage: 0,
              importFrom: ["./lib/postcss/variables.js"],
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
            require("postcss-nested"),
          ],
…

Here is the file itself with variables and other elements

module.exports = {
  customMedia: {
    "--size-xls": "(width <= 479px)",
    "--size-xs": "(width >= 480px) and (width <= 575px)",
    "--size-s": "(width >= 576px) and (width <= 767px)",
    "--size-m": "(width >= 578px) and (width <= 991px)",
    "--size-l": "(width >= 992px) and (width <= 1199px)",
    "--size-xl": "(width >= 1200px) and (width <= 1919px)",
    "--size-xxl": "(width >= 1920px)",
  },
  customProperties: { "--color": "red", "--font-size": "55px" },
  customSelectors: {
    ":--heading": "h1, h2, h3",
  },
};

Here are the styles:

.article {
  
  font-size: --font-size;
  @media (--size-s) {
    color: red;
  }
}

body {
  :--heading {
    color: blue;
  }
}

Both customSelectors and customMedia work . But customProperties do not work - values ​​are not substituted.
Please tell me what am I doing wrong? And maybe it's better to do it somehow differently?