Create migration for replacing v14 text custom properties (#11831)

### WHY are these changes introduced? Related to https://github.com/Shopify/polaris-internal/issues/1554 Fixes https://github.com/Shopify/polaris-internal/issues/1555 We need migrations for semantic tokens associated with the removal of the text token group. ### WHAT is this pull request doing? This PR creates a migration for deprecated `text` custom properties in v14 using the generic codemod [`styles-replace-custom-property`](#8265). #### v14-styles-replace-custom-property-text | Deprecated CSS Custom Property | Replacement Value | | -- | -- | |`--p-text-heading-3xl-font-family`|`--p-font-family-sans`| |`--p-text-heading-3xl-font-size`|`--p-font-size-750`| |`--p-text-heading-3xl-font-weight`|`--p-font-weight-bold`| |`--p-text-heading-3xl-font-letter-spacing`|`--p-font-letter-spacing-denser`| |`--p-text-heading-3xl-font-line-height`|`--p-font-line-height-1000`| |`--p-text-heading-2xl-font-family`|`--p-font-family-sans`| |`--p-text-heading-2xl-font-size`|`--p-font-size-750`| |`--p-text-heading-2xl-font-weight`|`--p-font-weight-bold`| |`--p-text-heading-2xl-font-letter-spacing`|`--p-font-letter-spacing-denser`| |`--p-text-heading-2xl-font-line-height`|`--p-font-line-height-1000`| |`--p-text-heading-xl-font-family`|`--p-font-family-sans`| |`--p-text-heading-xl-font-size`|`--p-font-size-600`| |`--p-text-heading-xl-font-weight`|`--p-font-weight-bold`| |`--p-text-heading-xl-font-letter-spacing`|`--p-font-letter-spacing-dense`| |`--p-text-heading-xl-font-line-height`|`--p-font-line-height-800`| |`--p-text-heading-lg-font-family`|`--p-font-family-sans`| |`--p-text-heading-lg-font-size`|`--p-font-size-500`| |`--p-text-heading-lg-font-weight`|`--p-font-weight-semibold`| |`--p-text-heading-lg-font-letter-spacing`|`--p-font-letter-spacing-dense`| |`--p-text-heading-lg-font-line-height`|`--p-font-line-height-600`| |`--p-text-heading-md-font-family`|`--p-font-family-sans`| |`--p-text-heading-md-font-size`|`--p-font-size-350`| |`--p-text-heading-md-font-weight`|`--p-font-weight-semibold`| |`--p-text-heading-md-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-heading-md-font-line-height`|`--p-font-line-height-500`| |`--p-text-heading-sm-font-family`|`--p-font-family-sans`| |`--p-text-heading-sm-font-size`|`--p-font-size-325`| |`--p-text-heading-sm-font-weight`|`--p-font-weight-semibold`| |`--p-text-heading-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-heading-sm-font-line-height`|`--p-font-line-height-500`| |`--p-text-heading-xs-font-family`|`--p-font-family-sans`| |`--p-text-heading-xs-font-size`|`--p-font-size-300`| |`--p-text-heading-xs-font-weight`|`--p-font-weight-semibold`| |`--p-text-heading-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-heading-xs-font-line-height`|`--p-font-line-height-400`| |`--p-text-body-lg-font-family`|`--p-font-family-sans`| |`--p-text-body-lg-font-size`|`--p-font-size-350`| |`--p-text-body-lg-font-weight`|`--p-font-weight-regular`| |`--p-text-body-lg-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-body-lg-font-line-height`|`--p-font-line-height-500`| |`--p-text-body-md-font-family`|`--p-font-family-sans`| |`--p-text-body-md-font-size`|`--p-font-size-325`| |`--p-text-body-md-font-weight`|`--p-font-weight-regular`| |`--p-text-body-md-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-body-md-font-line-height`|`--p-font-line-height-500`| |`--p-text-body-sm-font-family`|`--p-font-family-sans`| |`--p-text-body-sm-font-size`|`--p-font-size-300`| |`--p-text-body-sm-font-weight`|`--p-font-weight-regular`| |`--p-text-body-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-body-sm-font-line-height`|`--p-font-line-height-400`| |`--p-text-body-xs-font-family`|`--p-font-family-sans`| |`--p-text-body-xs-font-size`|`--p-font-size-275`| |`--p-text-body-xs-font-weight`|`--p-font-weight-regular`| |`--p-text-body-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`| |`--p-text-body-xs-font-line-height`|`--p-font-line-height-300`| It also updates the existing v14-styles-replace-custom-property-font migration to remove any text tokens. #### v14-styles-replace-custom-property-font | Deprecated CSS Custom Property | Replacement Value | | -- | -- | |`--p-font-size-800`|`--p-font-size-750`| |`--p-font-size-900`|`--p-font-size-750`| |`--p-font-size-1000`|`--p-font-size-750`| |`--p-font-letter-spacing-densest`|`--p-font-letter-spacing-denser`| |`--p-font-line-height-1200`|`--p-font-line-height-1000`| >[!NOTE] >Major version upgrade guidance is located [on a separate PR on the v13 branch](#11832).
Shopify · Apr 5, 2024 · 99972a5 · 99972a5
1 parent 8145d73
commit 99972a5
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 17 deletions.
diff --git a/.changeset/few-suits-love.md b/.changeset/few-suits-love.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Created migration to replace deprecated `text` custom properties in polaris-react v14.0.0
diff --git a/...les-replace-custom-property-font/tests/v14-styles-replace-custom-property-font.input.scss b/...les-replace-custom-property-font/tests/v14-styles-replace-custom-property-font.input.scss
@@ -2,11 +2,6 @@
   font-size: var(--p-font-size-800);
   font-size: var(--p-font-size-900);
   font-size: var(--p-font-size-1000);
-  font-size: var(--p-text-heading-3xl-font-size);
   letter-spacing: var(--p-font-letter-spacing-densest);
-  letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
   line-height: var(--p-font-line-height-1200);
-  line-height: var(--p-text-heading-3xl-font-line-height);
-  font-family: var(--p-text-heading-3xl-font-family);
-  font-weight: var(--p-text-heading-3xl-font-weight);
 }
diff --git a/...es-replace-custom-property-font/tests/v14-styles-replace-custom-property-font.output.scss b/...es-replace-custom-property-font/tests/v14-styles-replace-custom-property-font.output.scss
@@ -2,11 +2,6 @@
   font-size: var(--p-font-size-750);
   font-size: var(--p-font-size-750);
   font-size: var(--p-font-size-750);
-  font-size: var(--p-text-heading-2xl-font-size);
   letter-spacing: var(--p-font-letter-spacing-denser);
-  letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
   line-height: var(--p-font-line-height-1000);
-  line-height: var(--p-text-heading-2xl-font-line-height);
-  font-family: var(--p-text-heading-2xl-font-family);
-  font-weight: var(--p-text-heading-2xl-font-weight);
 }
diff --git a/polaris-migrator/src/migrations/v14-styles-replace-custom-property-font/transform.ts b/polaris-migrator/src/migrations/v14-styles-replace-custom-property-font/transform.ts
@@ -13,12 +13,5 @@ const replacementMaps = {
     '--p-font-size-1000': '--p-font-size-750',
     '--p-font-letter-spacing-densest': '--p-font-letter-spacing-denser',
     '--p-font-line-height-1200': '--p-font-line-height-1000',
-    '--p-text-heading-3xl-font-family': '--p-text-heading-2xl-font-family',
-    '--p-text-heading-3xl-font-size': '--p-text-heading-2xl-font-size',
-    '--p-text-heading-3xl-font-weight': '--p-text-heading-2xl-font-weight',
-    '--p-text-heading-3xl-font-letter-spacing':
-      '--p-text-heading-2xl-font-letter-spacing',
-    '--p-text-heading-3xl-font-line-height':
-      '--p-text-heading-2xl-font-line-height',
   },
 };
diff --git a/...s-migrator/src/migrations/v14-styles-replace-custom-property-text/tests/transform.test.ts b/...s-migrator/src/migrations/v14-styles-replace-custom-property-text/tests/transform.test.ts
@@ -0,0 +1,12 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v14-styles-replace-custom-property-text';
+const fixtures = ['v14-styles-replace-custom-property-text'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    extension: 'scss',
+  });
+}
diff --git a/...les-replace-custom-property-text/tests/v14-styles-replace-custom-property-text.input.scss b/...les-replace-custom-property-text/tests/v14-styles-replace-custom-property-text.input.scss
@@ -0,0 +1,57 @@
+.text {
+  font-size: var(--p-text-heading-3xl-font-size);
+  font-size: var(--p-text-heading-2xl-font-size);
+  font-size: var(--p-text-heading-xl-font-size);
+  font-size: var(--p-text-heading-lg-font-size);
+  font-size: var(--p-text-heading-md-font-size);
+  font-size: var(--p-text-heading-sm-font-size);
+  font-size: var(--p-text-heading-xs-font-size);
+  font-size: var(--p-text-body-lg-font-size);
+  font-size: var(--p-text-body-md-font-size);
+  font-size: var(--p-text-body-sm-font-size);
+  font-size: var(--p-text-body-xs-font-size);
+  letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
+  letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
+  letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
+  letter-spacing: var(--p-text-heading-lg-font-letter-spacing);
+  letter-spacing: var(--p-text-heading-md-font-letter-spacing);
+  letter-spacing: var(--p-text-heading-sm-font-letter-spacing);
+  letter-spacing: var(--p-text-heading-xs-font-letter-spacing);
+  letter-spacing: var(--p-text-body-lg-font-letter-spacing);
+  letter-spacing: var(--p-text-body-md-font-letter-spacing);
+  letter-spacing: var(--p-text-body-sm-font-letter-spacing);
+  letter-spacing: var(--p-text-body-xs-font-letter-spacing);
+  line-height: var(--p-text-heading-3xl-font-line-height);
+  line-height: var(--p-text-heading-2xl-font-line-height);
+  line-height: var(--p-text-heading-xl-font-line-height);
+  line-height: var(--p-text-heading-lg-font-line-height);
+  line-height: var(--p-text-heading-md-font-line-height);
+  line-height: var(--p-text-heading-sm-font-line-height);
+  line-height: var(--p-text-heading-xs-font-line-height);
+  line-height: var(--p-text-body-lg-font-line-height);
+  line-height: var(--p-text-body-md-font-line-height);
+  line-height: var(--p-text-body-sm-font-line-height);
+  line-height: var(--p-text-body-xs-font-line-height);
+  font-family: var(--p-text-heading-3xl-font-family);
+  font-family: var(--p-text-heading-2xl-font-family);
+  font-family: var(--p-text-heading-xl-font-family);
+  font-family: var(--p-text-heading-lg-font-family);
+  font-family: var(--p-text-heading-md-font-family);
+  font-family: var(--p-text-heading-sm-font-family);
+  font-family: var(--p-text-heading-xs-font-family);
+  font-family: var(--p-text-body-lg-font-family);
+  font-family: var(--p-text-body-md-font-family);
+  font-family: var(--p-text-body-sm-font-family);
+  font-family: var(--p-text-body-xs-font-family);
+  font-weight: var(--p-text-heading-3xl-font-weight);
+  font-weight: var(--p-text-heading-2xl-font-weight);
+  font-weight: var(--p-text-heading-xl-font-weight);
+  font-weight: var(--p-text-heading-lg-font-weight);
+  font-weight: var(--p-text-heading-md-font-weight);
+  font-weight: var(--p-text-heading-sm-font-weight);
+  font-weight: var(--p-text-heading-xs-font-weight);
+  font-weight: var(--p-text-body-lg-font-weight);
+  font-weight: var(--p-text-body-md-font-weight);
+  font-weight: var(--p-text-body-sm-font-weight);
+  font-weight: var(--p-text-body-xs-font-weight);
+}
diff --git a/...es-replace-custom-property-text/tests/v14-styles-replace-custom-property-text.output.scss b/...es-replace-custom-property-text/tests/v14-styles-replace-custom-property-text.output.scss
@@ -0,0 +1,57 @@
+.text {
+  font-size: var(--p-font-size-750);
+  font-size: var(--p-font-size-750);
+  font-size: var(--p-font-size-600);
+  font-size: var(--p-font-size-500);
+  font-size: var(--p-font-size-350);
+  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-300);
+  font-size: var(--p-font-size-350);
+  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-300);
+  font-size: var(--p-font-size-275);
+  letter-spacing: var(--p-font-letter-spacing-denser);
+  letter-spacing: var(--p-font-letter-spacing-denser);
+  letter-spacing: var(--p-font-letter-spacing-dense);
+  letter-spacing: var(--p-font-letter-spacing-dense);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-1000);
+  line-height: var(--p-font-line-height-1000);
+  line-height: var(--p-font-line-height-800);
+  line-height: var(--p-font-line-height-600);
+  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-400);
+  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-400);
+  line-height: var(--p-font-line-height-300);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-family: var(--p-font-family-sans);
+  font-weight: var(--p-font-weight-bold);
+  font-weight: var(--p-font-weight-bold);
+  font-weight: var(--p-font-weight-bold);
+  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-regular);
+  font-weight: var(--p-font-weight-regular);
+  font-weight: var(--p-font-weight-regular);
+  font-weight: var(--p-font-weight-regular);
+}
diff --git a/polaris-migrator/src/migrations/v14-styles-replace-custom-property-text/transform.ts b/polaris-migrator/src/migrations/v14-styles-replace-custom-property-text/transform.ts
@@ -0,0 +1,69 @@
+import type {FileInfo, API} from 'jscodeshift';
+
+import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
+
+export default function transformer(fileInfo: FileInfo, _: API) {
+  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
+}
+
+const replacementMaps = {
+  '/.+/': {
+    '--p-text-heading-3xl-font-family': '--p-font-family-sans',
+    '--p-text-heading-3xl-font-size': '--p-font-size-750',
+    '--p-text-heading-3xl-font-weight': '--p-font-weight-bold',
+    '--p-text-heading-3xl-font-letter-spacing':
+      '--p-font-letter-spacing-denser',
+    '--p-text-heading-3xl-font-line-height': '--p-font-line-height-1000',
+    '--p-text-heading-2xl-font-family': '--p-font-family-sans',
+    '--p-text-heading-2xl-font-size': '--p-font-size-750',
+    '--p-text-heading-2xl-font-weight': '--p-font-weight-bold',
+    '--p-text-heading-2xl-font-letter-spacing':
+      '--p-font-letter-spacing-denser',
+    '--p-text-heading-2xl-font-line-height': '--p-font-line-height-1000',
+    '--p-text-heading-xl-font-family': '--p-font-family-sans',
+    '--p-text-heading-xl-font-size': '--p-font-size-600',
+    '--p-text-heading-xl-font-weight': '--p-font-weight-bold',
+    '--p-text-heading-xl-font-letter-spacing': '--p-font-letter-spacing-dense',
+    '--p-text-heading-xl-font-line-height': '--p-font-line-height-800',
+    '--p-text-heading-lg-font-family': '--p-font-family-sans',
+    '--p-text-heading-lg-font-size': '--p-font-size-500',
+    '--p-text-heading-lg-font-weight': '--p-font-weight-semibold',
+    '--p-text-heading-lg-font-letter-spacing': '--p-font-letter-spacing-dense',
+    '--p-text-heading-lg-font-line-height': '--p-font-line-height-600',
+    '--p-text-heading-md-font-family': '--p-font-family-sans',
+    '--p-text-heading-md-font-size': '--p-font-size-350',
+    '--p-text-heading-md-font-weight': '--p-font-weight-semibold',
+    '--p-text-heading-md-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-heading-md-font-line-height': '--p-font-line-height-500',
+    '--p-text-heading-sm-font-family': '--p-font-family-sans',
+    '--p-text-heading-sm-font-size': '--p-font-size-325',
+    '--p-text-heading-sm-font-weight': '--p-font-weight-semibold',
+    '--p-text-heading-sm-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-heading-sm-font-line-height': '--p-font-line-height-500',
+    '--p-text-heading-xs-font-family': '--p-font-family-sans',
+    '--p-text-heading-xs-font-size': '--p-font-size-300',
+    '--p-text-heading-xs-font-weight': '--p-font-weight-semibold',
+    '--p-text-heading-xs-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-heading-xs-font-line-height': '--p-font-line-height-400',
+    '--p-text-body-lg-font-family': '--p-font-family-sans',
+    '--p-text-body-lg-font-size': '--p-font-size-350',
+    '--p-text-body-lg-font-weight': '--p-font-weight-regular',
+    '--p-text-body-lg-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-body-lg-font-line-height': '--p-font-line-height-500',
+    '--p-text-body-md-font-family': '--p-font-family-sans',
+    '--p-text-body-md-font-size': '--p-font-size-325',
+    '--p-text-body-md-font-weight': '--p-font-weight-regular',
+    '--p-text-body-md-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-body-md-font-line-height': '--p-font-line-height-500',
+    '--p-text-body-sm-font-family': '--p-font-family-sans',
+    '--p-text-body-sm-font-size': '--p-font-size-300',
+    '--p-text-body-sm-font-weight': '--p-font-weight-regular',
+    '--p-text-body-sm-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-body-sm-font-line-height': '--p-font-line-height-400',
+    '--p-text-body-xs-font-family': '--p-font-family-sans',
+    '--p-text-body-xs-font-size': '--p-font-size-275',
+    '--p-text-body-xs-font-weight': '--p-font-weight-regular',
+    '--p-text-body-xs-font-letter-spacing': '--p-font-letter-spacing-normal',
+    '--p-text-body-xs-font-line-height': '--p-font-line-height-300',
+  },
+};