From b864c100e51ecd0691b408d52389c1a23fda5858 Mon Sep 17 00:00:00 2001
From: Chema Balsas <chema.balsas@shopify.com>
Date: Wed, 4 Oct 2023 12:49:59 +0000
Subject: [PATCH] Adds migration for polaris media queries to @custom-media

---
 .changeset/clean-knives-matter.md             |  5 ++++
 .../admin-legacy-media-queries.input.scss     | 29 +++++++++++++++++++
 .../admin-legacy-media-queries.output.scss    | 29 +++++++++++++++++++
 .../tests/transform.test.ts                   | 17 +++++++++++
 .../admin-legacy-media-queries/transform.ts   | 23 +++++++++++++++
 5 files changed, 103 insertions(+)
 create mode 100644 .changeset/clean-knives-matter.md
 create mode 100644 polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.input.scss
 create mode 100644 polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.output.scss
 create mode 100644 polaris-migrator/src/migrations/admin-legacy-media-queries/tests/transform.test.ts
 create mode 100644 polaris-migrator/src/migrations/admin-legacy-media-queries/transform.ts

diff --git a/.changeset/clean-knives-matter.md b/.changeset/clean-knives-matter.md
new file mode 100644
index 00000000000..fc140cfbc33
--- /dev/null
+++ b/.changeset/clean-knives-matter.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added `admin-legacy-media-queries` migration
diff --git a/polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.input.scss b/polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.input.scss
new file mode 100644
index 00000000000..2d38cce7005
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.output.scss b/polaris-migrator/src/migrations/admin-legacy-media-queries/tests/admin-legacy-media-queries.output.scss
new file mode 100644
index 00000000000..da0b18ff158
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/polaris-migrator/src/migrations/admin-legacy-media-queries/tests/transform.test.ts b/polaris-migrator/src/migrations/admin-legacy-media-queries/tests/transform.test.ts
new file mode 100644
index 00000000000..d0cf238c1f5
--- /dev/null
+++ b/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: {},
+    },
+  });
+}
diff --git a/polaris-migrator/src/migrations/admin-legacy-media-queries/transform.ts b/polaris-migrator/src/migrations/admin-legacy-media-queries/transform.ts
new file mode 100644
index 00000000000..2f179d42eda
--- /dev/null
+++ b/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)',
+        );
+      }
+    },
+  };
+};