Add postcss-pxtorem dependency

[kyledurand]

WHY are these changes introduced?

First part of #4605

Diff check between previous css build (spacing changes are expected)

This will introduce pxtorem to main. Then we can remove rem() from our public api in v8

WHAT is this pull request doing?

Adds pxtorem to our postcss config

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	166.15 KB (0%)
esm	96.71 KB (0%)
esnext	143.41 KB (+0.21% 🔺)
css	34.35 KB (+0.53% 🔺)

[caution-tape-bot]

👋 It looks like you're updating JavaScript packages that are known
to cause problems when duplicated.

You can deduplicate them with the yarn-deduplicate utility:

npx yarn-deduplicate --packages graphql react react-dom webpack
npx yarn-deduplicate --scopes @shopify @apollo

A duplicate React version may cause an invalid hook call warning.

React context providers usually use module-scoped globals as their
default context values. Multiple versions of such packages will yield
multiple global instances, resulting in oblique runtime errors.

[kyledurand]

Here's a diff of the changes to our build file: https://www.diffchecker.com/SUs9t8LC

The spaces between {} are expected it looks like going from the link @BPScott posted for updating loom

[alex-page]

Nice!

[alex-page]

Nice clean up + functionality

[aveline]

Will this convert all px to rem? There are valid cases when we would want to keep px values. What does it look like if we want to specify certain values remain px?

eta

Currently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.

I guess that works, but feels a bit "magic"

[alex-page]

@aveline it definitely is magic.

I hope this feels like autoprefixer. People understand that the output changes but they do not have to write the repetitive code. We also don't need to support a public function. If we can be more opinionated by whitelisting the properties I would be happy to do that.

[BPScott]

Haven't validated the diff output on account of all the whitespace changing but code changes seem reasonable.

It miiiiight be worth splitting out the postcss updates into a separate PR so then it's easier to see "what has changed by adding pxtorem" rather than 100% of the diff being those whitespace differences from the postcss update drowning out any changes as a result of pxtorem. But if you're confident in output then whatever

[kyledurand]

As per Ben's suggestion here's the diff that omits the spacing change https://www.diffchecker.com/GT3piigi

I've looked through it and it's mostly changes to borders, border radii, outlines, visually hidden and a few spacing tokens. I've tophatted things that had potential to look different and all seems good