title: How to Compile CSS variables with PostCss
body: <p>I'm using React with CRA &amp; react-app-rewired, I want to compile CSS custom properties (--*) to plain css :</p>
  
  <p>From :</p>
  
  <pre><code>.section {
      --gap-horizontal: 10px;
  }
  
  .section .item {
      margin: 0 var(--gap-horizontal);
  }
  </code></pre>
  
  <p>To something like :</p>
  
  <pre><code>.section .item {
      margin: 0 10px;
  }
  </code></pre>
  
  <p>Here's my
  <strong>postcss.config.js</strong></p>
  
  <pre><code>module.exports = {
      plugins: [
          require('postcss-import'),
          require('postcss-preset-env')({
              stage: 1,
          }),
          require('postcss-nested'),
          require('autoprefixer'),
      ],
  };
  </code></pre>
  
  <p>My build cmd :</p>
  
  <pre><code>postcss src/**/*.css --dir build
  </code></pre>