Adds migration for polaris media queries to @Custom-Media

.changeset/clean-knives-matter.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added `admin-legacy-media-queries` migration

polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.input.scss

@@ -0,0 +1,29 @@
+@use 'global-styles/media-queries';
+
+.Selector {
+  max-width: 100px;
+
+  @media #{media-queries.$p-breakpoints-md-down} {
+    max-width: 200px;
+  }
+
+  @media only screen and #{media-queries.$p-breakpoints-md-only} {
+    max-width: 300px;
+  }
+
+  @media #{media-queries.$p-breakpoints-md-up} and #{media-queries.$p-breakpoints-lg-down} {
+    max-width: 400px;
+  }
+
+  @container app-card #{media-queries.$p-breakpoints-sm-down} {
+    max-width: 500px;
+  }
+
+  @media #{media-queries.$p-breakpoints-md-up} and #{legacy-polaris-v8.breakpoints-down(variables.$home-scroll-greeting-sidebar-hidden)} {
+    max-width: 600px;
+  }
+
+  @media #{legacy-polaris-v8.breakpoints-down(variables.$home-scroll-greeting-sidebar-hidden)} and #{media-queries.$p-breakpoints-md-up} {
+    max-width: 700px;
+  }
+}

polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.output.scss

@@ -0,0 +1,29 @@
+@use 'global-styles/media-queries';
+
+.Selector {
+  max-width: 100px;
+
+  @media (--p-breakpoints-md-down) {
+    max-width: 200px;
+  }
+
+  @media only screen and (--p-breakpoints-md-only) {
+    max-width: 300px;
+  }
+
+  @media (--p-breakpoints-md-up) and (--p-breakpoints-lg-down) {
+    max-width: 400px;
+  }
+
+  @container app-card (--p-breakpoints-sm-down) {
+    max-width: 500px;
+  }
+
+  @media (--p-breakpoints-md-up) and #{legacy-polaris-v8.breakpoints-down(variables.$home-scroll-greeting-sidebar-hidden)} {
+    max-width: 600px;
+  }
+
+  @media #{legacy-polaris-v8.breakpoints-down(variables.$home-scroll-greeting-sidebar-hidden)} and (--p-breakpoints-md-up) {
+    max-width: 700px;
+  }
+}

polaris-migrator/src/migrations/admin-legacy-media-queries/tests/transform.test.ts

@@ -0,0 +1,17 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'admin-legacy-media-queries';
+const fixtures = ['admin-legacy-media-queries'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    extension: 'scss',
+    options: {
+      customSyntax: 'postcss-scss',
+      reportDescriptionlessDisables: true,
+      rules: {},
+    },
+  });
+}

polaris-migrator/src/migrations/admin-legacy-media-queries/transform.ts

@@ -0,0 +1,23 @@
+import type {API, FileInfo} from 'jscodeshift';
+import type {Plugin} from 'postcss';
+import postcss from 'postcss';
+
+export default async function transformer(file: FileInfo, _: API) {
+  return postcss(plugin()).process(file.source, {
+    syntax: require('postcss-scss'),
+  }).css;
+}
+
+const plugin = (): Plugin => {
+  return {
+    postcssPlugin: 'admin-legacy-media-queries',
+    AtRule(atRule) {
+      if (atRule.name === 'media' || atRule.name === 'container') {
+        atRule.params = atRule.params.replace(
+          /#\{media-queries\.\$(?<breakpoint>[^}]*)}/g,
+          '(--$1)',
+        );
+      }
+    },
+  };
+};