[WIP] Replace node-sass with sass-embedded

[aaronccasanova]

WHAT is this pull request doing?

This PR replaces node-sass with sass-embedded to align with the recent web upgrade. This was accomplished by updating plugin-styles to use the sass-embedded compileAsync API, running the sass-migrator, and addressing a few minor build errors.

While in draft, I plan to leave the migrated files uncommitted so reviewers have the opportunity to easily see the minimum required updates and run the sass-migrator themselves.

Tophatting

1. Run the sass-migrator

npx sass-migrator division './src/**/*.scss' --migrate-deps && \                                                                                                                                          
npx sass-migrator media-logic './src/**/*.scss' --migrate-deps && \
npx sass-migrator module './src/**/*.scss' --migrate-deps && \
npx sass-migrator namespace './src/**/*.scss' --migrate-deps && \
npx sass-migrator strict-unary './src/**/*.scss' --migrate-deps

2. Format the migrated files

yarn prettier './polaris-react/**/*.scss' --write

Note: There is a bug with the sass-migrator incorrectly transforming background shorthand values to math.div(...). After running the above migrations, navigate to the ColorPicker.scss file and change math.div(50%, var(--p-space-4)) back to 50% / var(--p-space-4)

3. Validate the upgraded files look as expected
4. Run a build in polaris-react and validate there are no build failures

cd polaris-react && yarn build:js

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

[BPScott]

We currently use the expanded style (i.e. https://unpkg.com/browse/@shopify/[email protected]/build/esm/styles.css)

I reckon we should stick to that.

[aaronccasanova]

Good call! I assumed the equivalent of compact was compressed. Updated: 3467ae2

[BPScott]

oh duh, I'm wrong and skim-reading sorry.

In node-sass there were 4 output styles, in dart-sass there's only two. compressed and expanded continue to exist, while compact and and nested were removed (ooold context on what those look like).

I'd lean towards the more human-readable output when we publish to npm so it is easier to identify build output differences over time, so I'd prefer expanded over compressed.