Add postcss-pxtorem dependency

.storybook/main.js

@@ -1,9 +1,7 @@
 const path = require('path');
 const spawn = require('child_process').spawn;
 const CreateFileWebpack = require('create-file-webpack');
-
-const postcssShopify = require('@shopify/postcss-plugin');
-
+const postcssPlugins = require('../config/postcss-plugins');
 // Enabling docs means the preview panel takes an extra 2ish seconds to load
 // This usually isn't a big deal, except when we're running all of our stories
 // through our a11y tests, and a 2s delay over several hundred stories adds up.
@@ -58,7 +56,7 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
-                plugins: [postcssShopify()],
+                plugins: postcssPlugins,
               },
             },
           },

UNRELEASED.md

@@ -34,6 +34,11 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 
 ### Dependency upgrades
 
+- Bumped `postcss` to `v8.3.1` ([#4701](https://github.com/Shopify/polaris-react/pull/4701))
+- Bumped `@shopify/postcss-plugin` to `v5.0.1` ([#4701](https://github.com/Shopify/polaris-react/pull/4701))
+- Bumped `postcss-loader` to `v4.2.0` ([#4701](https://github.com/Shopify/polaris-react/pull/4701))
+- Bumped `postcss-modules` to `v4.2.2` ([#4701](https://github.com/Shopify/polaris-react/pull/4701))
+
 ### Code quality
 
 - Clean up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))

config/postcss-plugins.js

@@ -0,0 +1,11 @@
+const postcssShopify = require('@shopify/postcss-plugin');
+const pxtorem = require('postcss-pxtorem');
+
+module.exports = [
+  postcssShopify,
+  pxtorem({
+    rootValue: 10,
+    replace: true,
+    propList: ['*'],
+  }),
+];

loom.config.ts

@@ -14,11 +14,11 @@ import {stylelint} from '@shopify/loom-plugin-stylelint';
 import {prettier} from '@shopify/loom-plugin-prettier';
 import replace from '@rollup/plugin-replace';
 import image from '@rollup/plugin-image';
-import postcssShopify from '@shopify/postcss-plugin';
 
 import packageJSON from './package.json';
 import {styles} from './config/rollup/plugin-styles';
 import {generateScopedName} from './config/rollup/namespaced-classname';
+import postcssPlugins from './config/postcss-plugins';
 
 // Needed so TS realises what configuration hooks are provided by Jest
 import type {} from '@shopify/loom-plugin-jest';
@@ -140,15 +140,15 @@ function rollupAdjustPluginsPlugin() {
           modules: {
             generateScopedName: generateScopedName({includeHash: true}),
           },
-          plugins: [postcssShopify],
+          plugins: postcssPlugins,
         }
       : {
           mode: 'standalone',
           output: 'styles.css',
           modules: {
             generateScopedName: generateScopedName({includeHash: false}),
           },
-          plugins: [postcssShopify],
+          plugins: postcssPlugins,
         };
 
     return [

package.json

@@ -104,7 +104,7 @@
     "@shopify/loom-plugin-eslint": "^1.0.0",
     "@shopify/loom-plugin-prettier": "^1.0.0",
     "@shopify/loom-plugin-stylelint": "^1.0.0",
-    "@shopify/postcss-plugin": "^3.1.1",
+    "@shopify/postcss-plugin": "^5.0.1",
     "@shopify/prettier-config": "^1.1.2",
     "@shopify/react-testing": "^3.2.4",
     "@shopify/storybook-a11y-test": "^0.0.1",
@@ -137,8 +137,10 @@
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "object-hash": "^1.3.1",
-    "postcss": "^7.0.18",
-    "postcss-modules": "^3.1.0",
+    "postcss": "^8.3.1",
+    "postcss-loader": "^4.2.0",
+    "postcss-modules": "^4.2.2",
+    "postcss-pxtorem": "^5.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",

scripts/build-validate.js

@@ -43,8 +43,8 @@ function validateStandardBuild() {
 
   // Standard build css contains namespaced classes
   const cssContent = fs.readFileSync('./build/esm/styles.css', 'utf-8');
-  assert.ok(cssContent.includes('.Polaris-Avatar{'));
-  assert.ok(cssContent.includes('.Polaris-BulkActions__BulkActionButton{'));
+  assert.ok(cssContent.includes('.Polaris-Avatar {'));
+  assert.ok(cssContent.includes('.Polaris-BulkActions__BulkActionButton {'));
 }
 
 function validateEsNextBuild() {
@@ -58,7 +58,7 @@ function validateEsNextBuild() {
     './build/esnext/components/Avatar/Avatar.css',
     'utf-8',
   );
-  assert.ok(cssContent.includes('.Polaris-Avatar_z763p{'));
+  assert.ok(cssContent.includes('.Polaris-Avatar_z763p {'));
 
   const jsContent = fs.readFileSync(
     './build/esnext/components/Avatar/Avatar.scss.esnext',