How to Compile CSS variables with PostCss

Question

I'm using React with CRA & react-app-rewired, I want to compile CSS custom properties (--*) to plain css :

From :

.section {
    --gap-horizontal: 10px;
}

.section .item {
    margin: 0 var(--gap-horizontal);
}

To something like :

.section .item {
    margin: 0 10px;
}

Here's my postcss.config.js

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-preset-env')({
            stage: 1,
        }),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};

My build cmd :

postcss src/**/*.css --dir build

Answer 1

As @Grzegorz T mentioned in the comment, i had to add postcss-css-variables plugin.

Install:

yarn add -D postcss-css-variables

Add require('postcss-css-variables') to postcss.config.js :

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-css-variables'),
        require('postcss-preset-env')({
            stage: 1,
        }),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};