[polaris-migrator] Add admin migration from sass media-queries to @custom-media

[jbalsas]

WHY are these changes introduced?

This is a companion PR to Add support for @custom-media for using breakpoints in CSS.

It adds a migration to replace existing usages of polaris scss media queries in admin to the new @custom-media approach.

WHAT is this pull request doing?

Basically, it turns

@use 'global-styles/media-queries';

.Selector {
  max-width: 100px;

  @media #{media-queries.$p-breakpoints-md-down} {
    max-width: 200px;
  }
}

into

@use 'global-styles/media-queries';

.Selector {
  max-width: 100px;

  @media (--p-breakpoints-md-down) {
    max-width: 200px;
  }

Additionally, it removes the jscodeshift preset as per @aaronccasanova and @sam-b-rose comments here

How to 🎩

I think tests should be enough, but here are some things to take into account:

• It converts both @media and @container since that's the only usage we currently have and not everywhere media queries are allowed
• Decided not to remove the @use rule to simplify the migration. This can be don by running the remote-unused-at-rule migration later
• Went with admin- for the rule since it mostly applies to admin codebase, but happy to put under the scss- or syles- umbrellas if we think there's value there
• Adjusted my previous approach following @aaronccasanova's suggestion here
• This in itself does not make the system to work, as it needs a combination of plugins to provide proper build and runtime support.

🎩 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

[kyledurand]

🙌

[jbalsas]

Results of this migration can be seen in action in shopify/web in https://github.com/Shopify/web/pull/105850

[aaronccasanova]

Can we make the namespace (e.g. media-queries.) a CLI flag? For example, see the tokenize-font migration and associated tests.

[jbalsas]

Sure... do we know of other codebases that would want to apply the migration and use a different namespace?

This was the reason that pushed me to just call this admin- and not make it more generic.

I think constructing the regex out of strings is going to get a bit more hairy than this, but definitely makes sense if we think this can be generalized 🤔

[aaronccasanova]

The Polaris migrator is usable by Polaris, Web, 1Ps, and 3Ps. If this migration is admin specific, can you add it to web/tooling/stylelint/rules?

[jbalsas]

That makes sense... do you have examples of some of those 1Ps I could check?

I think this migration is at the moment a bit specific since it relies on the way previous polaris version were managed which might have taken a different path on different codebases.

I'd like to see if this can be applied to other codebases and how to generalize it if that's the case before making a final call on this.

[aaronccasanova]

do you have examples of some of those 1Ps I could check?

https://grokt.shopify.io/results?q=-repo%3AShopify%2Fpolaris+-repo%3AShopify%2Fweb+%5C%24p-breakpoints-

I'd like to see if this can be applied to other codebases and how to generalize it

I think an optional namespace should be sufficient

I think constructing the regex out of strings is going to get a bit more hairy than this

Let me know if you need assistance 👍

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[jbalsas]

Similar to #10749

Going to close here since we ran this once for web and haven't needed it since. We can always come back and bring this back if needed, but probably better to keep the migrator as lean as we can to avoid bloat.