Как задать глобальные переменные для PostCSS + webpack?

Question

[mr-scrpt]

Здравствуйте. Подскажите пожалуйста, мне нужно на уровне проекта задать переменные, к которым я смогу обращаться из любого файла стилей в проекте.
Допустим задать базовые цвета, а потом просто использовать их где угодно.
Я пробую это сделать через postcss-preset-env и его свойство importFrom, задав 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"),
          ],
…

Вот сам файл с переменными и другими элементами

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",
  },
};

Вот стили:

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

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

Работают и customSelectors, и customMedia. Но не работают customProperties – значения не подставляются.
Подскажите пожалуйста, что я делаю не так? И возможно это лучше делать как-то по-другому?