Using PostCSS with Magento PWA Studio

This guide assumes that you have Magento PWA studio or a standalone Magento PWA setup.

  1. Install PostCSS Loader

With npm:

npm i -D postcss-loader

With yarn:

yarn add -D postcss-loader

  1. Update webpack.config.js

Since there is a rule for CSS that exists we want to append the PostCSS loader to the first rule in pwa-buildpack/lib/Utilities/getClientConfig.js

module.exports = async env => {
  // Existing configuration
  clientConfig.module.rules
    .find(rule => rule.test.toString() === '/\\.css$/')
    .oneOf[0].use.push('postcss-loader');

  return [clientConfig, serviceWorkerConfig];
};

  1. Install PostCSS Preset Env

With npm:

npm i -D postcss-preset-env

With yarn:

yarn add -D postcss-preset-env

  1. Add postcss.config.js
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [postcssPresetEnv(/* pluginOptions */)]
};