Use faster object syntax for postcss-mixins

.changeset/grumpy-chicken-applaud.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fix build performance regression from using postcss-mixins.

polaris-react/postcss-mixins/items-to-stagger.js

@@ -1,16 +1,11 @@
-const postcss = require('postcss');
+const staggerInterval = 50;
 
-module.exports = (mixin) => {
-  const rules = [];
+module.exports = () => {
+  const rules = {};
   for (let i = 1; i <= 12; i++) {
-    const rule = postcss.rule({
-      selector: `&:nth-child(${i})`,
-    });
-    rule.append({
-      prop: 'animation-delay',
-      value: `calc((${i} - 1) * 50ms)`,
-    });
-    rules.push(rule);
+    rules[`&:nth-child(${i})`] = {
+      animationDelay: `${(i - 1) * staggerInterval}ms`,
+    };
   }
-  mixin.replaceWith(rules);
+  return rules;
 };

polaris-react/postcss-mixins/responsive-grid-cells.js

@@ -1,35 +1,27 @@
-const postcss = require('postcss');
-
-const breakpoints = ['sm', 'md', 'lg', 'xl'];
-module.exports = (mixin) => {
-  const rules = [];
-  const atRules = [];
-  for (let i = 1; i <= 6; i++) {
-    const rule = postcss.rule({
-      selector: `.Cell-${i}-column-xs`,
-    });
-    rule.append({
-      prop: 'grid-column-end',
-      value: `span ${i}`,
-    });
-    rules.push(rule);
+function cellColumnEndRules(columns, breakpoint) {
+  const rules = {};
+  for (let column = 1; column <= columns; column++) {
+    rules[`.Cell-${column}-column-${breakpoint}`] = {
+      gridColumnEnd: `span ${column}`,
+    };
   }
-  for (const i of breakpoints) {
-    const atRule = postcss.atRule({
-      name: 'media',
-      params: `(--p-breakpoints-${i}-up)`,
-    });
-    for (let j = 1; j <= (i === 'lg' || i === 'xl' ? 12 : 6); j++) {
-      const rule = postcss.rule({
-        selector: `.Cell-${j}-column-${i}`,
-      });
-      rule.append({
-        prop: 'grid-column-end',
-        value: `span ${j}`,
-      });
-      atRule.append(rule);
-    }
-    atRules.push(atRule);
+  return rules;
+}
+
+function wrapInBreakpoint(breakpoints, getRules) {
+  const rules = {};
+  for (const breakpoint of breakpoints) {
+    rules[`@media (--p-breakpoints-${breakpoint}-up)`] = getRules(breakpoint);
   }
-  mixin.replaceWith([].concat(rules, atRules));
-};
+  return rules;
+}
+
+module.exports = () => ({
+  ...cellColumnEndRules(6, 'xs'),
+  ...wrapInBreakpoint(['sm', 'md'], (breakpoint) =>
+    cellColumnEndRules(6, breakpoint),
+  ),
+  ...wrapInBreakpoint(['lg', 'xl'], (breakpoint) =>
+    cellColumnEndRules(12, breakpoint),
+  ),
+});

polaris-react/postcss-mixins/safe-area-for.js

@@ -1,5 +1,3 @@
-const postcss = require('postcss');
-
 const {nullish} = require('./utils');
 
 /* Returns a safe-area-inset for iPhone X screen obtrusions.
@@ -10,27 +8,14 @@ const {nullish} = require('./utils');
   If overriding an existing padding / margin that value should be used as
   $spacing
 */
-module.exports = (mixin, property, spacing, area) => {
+module.exports = (_, property, spacing, area) => {
   const spacingValue =
     nullish(spacing) || spacing === 0 || spacing === '0' ? '0px' : spacing;
-  const varDecl = postcss.decl({
-    prop: property,
-    value: spacingValue,
-  });
-  const constantDecl = postcss.decl({
-    prop: property,
-    value: `calc(
-      ${spacingValue} + constant(safe-area-inset-${area})
-    )`,
-  });
-  const envDecl = postcss.decl({
-    prop: property,
-    value: `calc(
-      ${spacingValue} + env(safe-area-inset-${area})
-    )`,
-  });
-
-  // We have to do a manual replace here
-  // Because if we returned an object, declarations with the same property would be deduped.
-  mixin.replaceWith([varDecl, constantDecl, envDecl]);
+  return {
+    [property]: [
+      spacingValue,
+      `calc(${spacingValue} + constant(safe-area-inset-${area}))`,
+      `calc(${spacingValue} + env(safe-area-inset-${area}))`,
+    ],
+  };
 };