diff --git a/.changeset/spicy-dryers-nail.md b/.changeset/spicy-dryers-nail.md new file mode 100644 index 00000000000..34a4115437d --- /dev/null +++ b/.changeset/spicy-dryers-nail.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris-migrator': minor +'polaris.shopify.com': minor +--- + +Created migration to replace deprecated `font` custom properties in polaris-react v13.0.0 diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts new file mode 100644 index 00000000000..0011d1ab654 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/transform.test.ts @@ -0,0 +1,12 @@ +import {check} from '../../../utilities/check'; + +const transform = 'v13-styles-replace-custom-property-font'; +const fixtures = ['v13-styles-replace-custom-property-font']; + +for (const fixture of fixtures) { + check(__dirname, { + fixture, + transform, + extension: 'scss', + }); +} diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss new file mode 100644 index 00000000000..1831c4c25b4 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.input.scss @@ -0,0 +1,19 @@ +.font { + font-size: var(--p-font-size-750); + font-size: var(--p-font-size-900); + font-size: var(--p-font-size-1000); + font-size: var(--p-text-heading-2xl-font-size); + font-size: var(--p-text-heading-3xl-font-size); + letter-spacing: var(--p-font-letter-spacing-denser); + letter-spacing: var(--p-font-letter-spacing-densest); + letter-spacing: var(--p-text-heading-2xl-font-letter-spacing); + letter-spacing: var(--p-text-heading-3xl-font-letter-spacing); + line-height: var(--p-font-line-height-1000); + line-height: var(--p-font-line-height-1200); + line-height: var(--p-text-heading-2xl-font-line-height); + line-height: var(--p-text-heading-3xl-font-line-height); + font-family: var(--p-text-heading-2xl-font-family); + font-family: var(--p-text-heading-3xl-font-family); + font-weight: var(--p-text-heading-2xl-font-weight); + font-weight: var(--p-text-heading-3xl-font-weight); +} diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss new file mode 100644 index 00000000000..56a297448d6 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/tests/v13-styles-replace-custom-property-font.output.scss @@ -0,0 +1,19 @@ +.font { + font-size: var(--p-font-size-600); + font-size: var(--p-font-size-600); + font-size: var(--p-font-size-600); + font-size: var(--p-text-heading-xl-font-size); + font-size: var(--p-text-heading-xl-font-size); + letter-spacing: var(--p-font-letter-spacing-dense); + letter-spacing: var(--p-font-letter-spacing-dense); + letter-spacing: var(--p-text-heading-xl-font-letter-spacing); + letter-spacing: var(--p-text-heading-xl-font-letter-spacing); + line-height: var(--p-font-line-height-800); + line-height: var(--p-font-line-height-800); + line-height: var(--p-text-heading-xl-font-line-height); + line-height: var(--p-text-heading-xl-font-line-height); + font-family: var(--p-text-heading-xl-font-family); + font-family: var(--p-text-heading-xl-font-family); + font-weight: var(--p-text-heading-xl-font-weight); + font-weight: var(--p-text-heading-xl-font-weight); +} diff --git a/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts new file mode 100644 index 00000000000..a8f492c2424 --- /dev/null +++ b/polaris-migrator/src/migrations/v13-styles-replace-custom-property-font/transform.ts @@ -0,0 +1,33 @@ +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-font-size-750': '--p-font-size-600', + '--p-font-size-900': '--p-font-size-600', + '--p-font-size-1000': '--p-font-size-600', + '--p-font-letter-spacing-denser': '--p-font-letter-spacing-dense', + '--p-font-letter-spacing-densest': '--p-font-letter-spacing-dense', + '--p-font-line-height-1000': '--p-font-line-height-800', + '--p-font-line-height-1200': '--p-font-line-height-800', + '--p-text-heading-3xl-font-family': '--p-text-heading-xl-font-family', + '--p-text-heading-3xl-font-size': '--p-text-heading-xl-font-size', + '--p-text-heading-3xl-font-weight': '--p-text-heading-xl-font-weight', + '--p-text-heading-3xl-font-letter-spacing': + '--p-text-heading-xl-font-letter-spacing', + '--p-text-heading-3xl-font-line-height': + '--p-text-heading-xl-font-line-height', + '--p-text-heading-2xl-font-family': '--p-text-heading-xl-font-family', + '--p-text-heading-2xl-font-size': '--p-text-heading-xl-font-size', + '--p-text-heading-2xl-font-weight': '--p-text-heading-xl-font-weight', + '--p-text-heading-2xl-font-letter-spacing': + '--p-text-heading-xl-font-letter-spacing', + '--p-text-heading-2xl-font-line-height': + '--p-text-heading-xl-font-line-height', + }, +}; diff --git a/polaris.shopify.com/content/tools/polaris-migrator.mdx b/polaris.shopify.com/content/tools/polaris-migrator.mdx index 72dca3558ab..3e91218e9c0 100644 --- a/polaris.shopify.com/content/tools/polaris-migrator.mdx +++ b/polaris.shopify.com/content/tools/polaris-migrator.mdx @@ -37,6 +37,35 @@ npx @shopify/polaris-migrator ## Migrations +### @shopify/polaris-react v13.0.0 + +If you are upgrading Polaris from v12 to v13 please follow our [migration guide](/version-guides/migrating-from-v12-to-v13). + +#### `v13-styles-replace-custom-property-font` + +Replace deprecated font CSS custom properties with corresponding Polaris custom property replacement values. + +```diff +- font-size: var(--p-font-size-750); ++ font-size: var(--p-font-size-600); +``` + +```diff +- letter-spacing: var(--p-font-letter-spacing-denser); ++ letter-spacing: var(--p-font-letter-spacing-dense); +``` + +```diff +- line-height: var(--p-font-line-height-1000); ++ line-height: var(--p-font-line-height-800); +``` + +
+ +```sh +npx @shopify/polaris-migrator v13-styles-replace-custom-property-font +``` + ### @shopify/polaris-icons v8.0.0 #### `icons-v8-update-names`