Use faster object syntax for postcss-mixins

[jesstelford]

There was a performance regression introduced by our non-sass mixins:

Some debugging the performance flamegraph from 0x shows it's the usage of postcss within those mixins trying to generate source maps that's taking a significant amount of time:

It was possible to convert the mixins to the simpler object syntax which doesn't suffer from this issue.

Performance

tl;dr: Building @shopify/polaris is now 4.4s faster 🎉

I ran perf benchmarks using this hyperfine command:

hyperfine --parameter-list branch main,fix-postcss-mixins-perf --setup='git checkout {branch} && . ~/.nvm/nvm.sh && nvm use && yarn --prefer-offline && yarn build --filter="@shopify/polaris"' --prepare="rm -rf polaris-react/build" --runs 5 --warmup 1 '. ~/.nvm/nvm.sh && nvm use && yarn workspace @shopify/polaris build:js'

Results

Benchmark 1: (branch = main)
  Time (mean ± σ):     15.852 s ±  0.110 s    [User: 19.668 s, System: 4.021 s]
  Range (min … max):   15.743 s … 16.030 s    5 runs

Benchmark 2: (branch = fix-postcss-mixins-perf)
  Time (mean ± σ):     11.419 s ±  0.115 s    [User: 15.215 s, System: 2.943 s]
  Range (min … max):   11.285 s … 11.592 s    5 runs

Summary
  (branch = fix-postcss-mixins-perf) ran 1.39 ± 0.02 times faster than (branch = main)

Validation

I confirmed the generated .css file is identical with this script:

# go.sh
if [ -z "$1" ]; then echo "A filename is required:\n> $0 ./no-sass.css"; exit 1; fi;

# Write a temporary postcss config for cssnano to work
cat <<EOF > postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'lite',
    }),
  ],
};
EOF

yarn workspace @shopify/polaris add cssnano-preset-lite
yarn
yarn build --filter="@shopify/polaris"

cp polaris-react/build/esm/styles.css "$1" # Move out of ignored directories
yarn prettier -w "$1" # Pre-format to normalize whitespace
npx postcss-cli --yes postcss-cli -r --no-map --config="`pwd`" "$1" # cssnano removes more whitespace prettier doesn't
yarn prettier -w "$1" # Format again to get back into un-minified version
rm postcss.config.js # Clean up temporary files
yarn workspace @shopify/polaris remove cssnano-preset-lite

run like this:

git checkout main
./go.sh old.css
git checkout fix-postcss-mixins-perf
./go.sh new.css
git diff --histogram --no-index old.css new.css

And the result was: no change 🎉

[gwyneplaine]

Heck yeah lgtm, nice one!