diff --git a/.changeset/famous-years-destroy.md b/.changeset/famous-years-destroy.md new file mode 100644 index 00000000000..25990d01bde --- /dev/null +++ b/.changeset/famous-years-destroy.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': patch +--- + +Updated `styles-tokenize-font` to ignore `@font-face` at-rules diff --git a/polaris-migrator/src/migrations/styles-tokenize-font/styles-tokenize-font.ts b/polaris-migrator/src/migrations/styles-tokenize-font/styles-tokenize-font.ts index 890594a50ae..bd26a0e4b31 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-font/styles-tokenize-font.ts +++ b/polaris-migrator/src/migrations/styles-tokenize-font/styles-tokenize-font.ts @@ -1,5 +1,5 @@ import type {FileInfo, API, Options} from 'jscodeshift'; -import postcss, {Plugin} from 'postcss'; +import postcss, {Plugin, AtRule} from 'postcss'; import valueParser from 'postcss-value-parser'; import {toPx} from '@shopify/polaris-tokens'; @@ -41,6 +41,14 @@ const plugin = (options: PluginOptions = {}): Plugin => { // @ts-expect-error - Skip if processed so we don't process it again if (decl[processed]) return; + if ( + decl.parent && + decl.parent.type === 'atrule' && + (decl.parent as AtRule).name === 'font-face' + ) { + return; + } + const handlers = { 'font-size': handleFontSize, 'font-weight': handleFontWeight, diff --git a/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.input.scss b/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.input.scss index ab4445c3e34..a5cc0febe3b 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.input.scss +++ b/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.input.scss @@ -1,3 +1,8 @@ +@font-face { + font-family: 'Custom Font'; + font-weight: 400; +} + .font-size { // LENGTHS font-size: 12px; diff --git a/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.output.scss b/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.output.scss index fb71fa6bd60..0d7da2dff8e 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.output.scss +++ b/polaris-migrator/src/migrations/styles-tokenize-font/tests/styles-tokenize-font.output.scss @@ -1,3 +1,8 @@ +@font-face { + font-family: 'Custom Font'; + font-weight: 400; +} + .font-size { // LENGTHS font-size: var(--p-font-size-75);