Use postcss-custom-properties to statically represent CSS3 variables on build-time

Feature request

Is your feature request related to a problem? Please describe. CSS3 variables are great! We can avoid using a preprocessor while still doing enough to avoid hard-coding stuff in a CSS Module system. One problem is that CSS3 variables don’t have the best browser support.

Describe the solution you’d like We can use postcss-css-variables to statically extract variables on build-time! Add the dependency and integrate it within postcss.config.js. Please uncomment env within postcss.config.js and only leverage library when env === 'production' (see here for more on ctx).

/* eslint-disable global-require */
module.exports = ({ file, options, env }) => {
  const ENV = env.toLowerCase();
  const isProd = ENV === 'production';

  return {
    ...options,
    plugins: [
      require('postcss-import')({ root: file.dirname }),
      isProd ? require('postcss-css-variables')() : false,
      require('autoprefixer')()
    ],
  };
};

[kylemh]

I am assigning myself to this issue as a placeholder for your work, @TomerPacific. Thank you, and good luck! 😁

Please note: If no activity is shared within two weeks, I will remove my assignment. At that point, the issue will be open for anybody to take.

[kylemh]

Assigning myself for @juliantrueflynn