From fe1410b0da80f01e61b86723303a82ea9a1f76ca Mon Sep 17 00:00:00 2001 From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Date: Mon, 17 Oct 2022 10:37:25 -0700 Subject: [PATCH] Update the replace-typography-declarations migration comment strategy --- .changeset/loud-sheep-drive.md | 5 + .../replace-typography-declarations.ts | 9 +- ...replace-typography-declarations.input.scss | 36 ++-- ...eplace-typography-declarations.output.scss | 164 +++++++++--------- .../tests/with-namespace.input.scss | 30 ++-- .../tests/with-namespace.output.scss | 122 ++++++------- 6 files changed, 186 insertions(+), 180 deletions(-) create mode 100644 .changeset/loud-sheep-drive.md diff --git a/.changeset/loud-sheep-drive.md b/.changeset/loud-sheep-drive.md new file mode 100644 index 00000000000..5d199ed707c --- /dev/null +++ b/.changeset/loud-sheep-drive.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': patch +--- + +Update `replace-typography-declarations` comment strategy diff --git a/polaris-migrator/src/migrations/replace-typography-declarations/replace-typography-declarations.ts b/polaris-migrator/src/migrations/replace-typography-declarations/replace-typography-declarations.ts index 925e48add75..c8e6de298b1 100644 --- a/polaris-migrator/src/migrations/replace-typography-declarations/replace-typography-declarations.ts +++ b/polaris-migrator/src/migrations/replace-typography-declarations/replace-typography-declarations.ts @@ -7,6 +7,7 @@ import {toPx} from '@shopify/polaris-tokens'; import {POLARIS_MIGRATOR_COMMENT} from '../../constants'; import { + createInlineComment, getFunctionArgs, isNumericOperator, isSassFunction, @@ -67,11 +68,11 @@ const plugin = (options: PluginOptions = {}): Plugin => { handlers[decl.prop](); if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { - decl.before(postcss.comment({text: POLARIS_MIGRATOR_COMMENT})); decl.before( - postcss.comment({ - text: `${decl.prop}: ${parsedValue.toString()};`, - }), + createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), + ); + decl.before( + createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); } else { decl.value = parsedValue.toString(); diff --git a/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.input.scss b/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.input.scss index 819eec5a6cd..c2607285db7 100644 --- a/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.input.scss +++ b/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.input.scss @@ -6,30 +6,30 @@ } .font-size { - /* LENGTHS */ + // LENGTHS font-size: 12px; font-size: 1rem; - /* Ignore */ + // Ignore font-size: 1em; font-size: #{1px}; - /* Comment */ + // Comment font-size: 10px; font-size: 12px + 1px; - /* FONT-SIZE FUNCTION */ + // FONT-SIZE FUNCTION font-size: font-size(caption); font-size: font-size(caption, base); font-size: font-size(caption, large-screen); - /* Comment */ + // Comment font-size: font-size($invalid); font-size: font-size(caption, $invalid); font-size: font-size(); font-size: font-size(caption, base, $too-many-args); - /* REM FUNCTION */ + // REM FUNCTION font-size: rem(12px); font-size: rem(1rem); - /* Comment */ + // Comment font-size: rem(1em); font-size: rem(10px); font-size: rem($invalid); @@ -42,44 +42,44 @@ } .font-weight { - /* LENGTHS */ + // LENGTHS font-weight: 400; font-weight: 700; - /* Comment */ + // Comment font-weight: 300; font-weight: 400 + 300; - /* ALIAS */ + // ALIAS font-weight: normal; font-weight: bold; - /* Ignore */ + // Ignore font-weight: inherit; - /* Comment */ + // Comment font-weight: bolder; } .font-line-height { - /* LENGTHS */ + // LENGTHS line-height: 16px; line-height: 1rem; - /* Comment */ + // Comment line-height: 10px; - /* LINE-HEIGHT FUNCTION */ + // LINE-HEIGHT FUNCTION line-height: line-height(caption); line-height: line-height(caption, base); line-height: line-height(caption, large-screen); line-height: line-height(display-x-large, base); - /* Comment */ + // Comment line-height: line-height($invalid); line-height: line-height(caption, $invalid); line-height: line-height(); line-height: line-height(caption, base, $too-many-args); - /* REM FUNCTION */ + // REM FUNCTION line-height: rem(16px); line-height: rem(1rem); - /* Comment */ + // Comment line-height: rem(1em); line-height: rem(10px); line-height: rem($invalid); diff --git a/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.output.scss b/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.output.scss index 67441c08f9d..dcf4ccd14da 100644 --- a/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.output.scss +++ b/polaris-migrator/src/migrations/replace-typography-declarations/tests/replace-typography-declarations.output.scss @@ -6,151 +6,151 @@ } .font-size { - /* LENGTHS */ + // LENGTHS font-size: var(--p-font-size-75); font-size: var(--p-font-size-200); - /* Ignore */ + // Ignore font-size: 1em; font-size: #{1px}; - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: 10px; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: 10px; font-size: 10px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: var(--p-font-size-75) + 1px; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: var(--p-font-size-75) + 1px; font-size: 12px + 1px; - /* FONT-SIZE FUNCTION */ + // FONT-SIZE FUNCTION font-size: 0.8125rem; font-size: 0.8125rem; font-size: var(--p-font-size-75); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: font-size($invalid); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: font-size($invalid); font-size: font-size($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: font-size(caption, $invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: font-size(caption, $invalid); font-size: font-size(caption, $invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: font-size(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: font-size(); font-size: font-size(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: font-size(caption, base, $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: font-size(caption, base, $too-many-args); font-size: font-size(caption, base, $too-many-args); - /* REM FUNCTION */ + // REM FUNCTION font-size: var(--p-font-size-75); font-size: var(--p-font-size-200); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem(1em); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem(1em); font-size: rem(1em); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem(10px); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem(10px); font-size: rem(10px); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem($invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem($invalid); font-size: rem($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem(); font-size: rem(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem(var(--p-font-size-75), $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem(var(--p-font-size-75), $too-many-args); font-size: rem(12px, $too-many-args); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: var(--p-font-size-75) 1px; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: var(--p-font-size-75) 1px; font-size: rem(12px) 1px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem(1px) var(--p-font-size-75); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem(1px) var(--p-font-size-75); font-size: rem(1px) 12px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: rem(#{10px + 2px}) var(--p-font-size-75); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: rem(#{10px + 2px}) var(--p-font-size-75); font-size: rem(#{10px + 2px}) 12px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: var(--p-font-size-75) + #{10px + 2px}; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: var(--p-font-size-75) + #{10px + 2px}; font-size: rem(12px) + #{10px + 2px}; } .font-weight { - /* LENGTHS */ + // LENGTHS font-weight: var(--p-font-weight-regular); font-weight: var(--p-font-weight-bold); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-weight: 300; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-weight: 300; font-weight: 300; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-weight: var(--p-font-weight-regular) + 300; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-weight: var(--p-font-weight-regular) + 300; font-weight: 400 + 300; - /* ALIAS */ + // ALIAS font-weight: var(--p-font-weight-regular); font-weight: var(--p-font-weight-bold); - /* Ignore */ + // Ignore font-weight: inherit; - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-weight: bolder; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-weight: bolder; font-weight: bolder; } .font-line-height { - /* LENGTHS */ + // LENGTHS line-height: var(--p-font-line-height-1); line-height: var(--p-font-line-height-1); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: 10px; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: 10px; line-height: 10px; - /* LINE-HEIGHT FUNCTION */ + // LINE-HEIGHT FUNCTION line-height: var(--p-font-line-height-2); line-height: var(--p-font-line-height-2); line-height: var(--p-font-line-height-1); line-height: 2.25rem; - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: line-height($invalid); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: line-height($invalid); line-height: line-height($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: line-height(caption, $invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: line-height(caption, $invalid); line-height: line-height(caption, $invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: line-height(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: line-height(); line-height: line-height(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: line-height(caption, base, $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: line-height(caption, base, $too-many-args); line-height: line-height(caption, base, $too-many-args); - /* REM FUNCTION */ + // REM FUNCTION line-height: var(--p-font-line-height-1); line-height: var(--p-font-line-height-1); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem(1em); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem(1em); line-height: rem(1em); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem(10px); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem(10px); line-height: rem(10px); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem($invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem($invalid); line-height: rem($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem(); line-height: rem(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem(var(--p-font-line-height-1), $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem(var(--p-font-line-height-1), $too-many-args); line-height: rem(16px, $too-many-args); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: var(--p-font-line-height-1) 1px; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: var(--p-font-line-height-1) 1px; line-height: rem(16px) 1px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem(1px) var(--p-font-line-height-1); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem(1px) var(--p-font-line-height-1); line-height: rem(1px) 16px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: rem(#{10px + 6px}) var(--p-font-line-height-1); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: rem(#{10px + 6px}) var(--p-font-line-height-1); line-height: rem(#{10px + 6px}) 16px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: var(--p-font-line-height-1) + #{10px + 6px}; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: var(--p-font-line-height-1) + #{10px + 6px}; line-height: rem(16px) + #{10px + 6px}; } diff --git a/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.input.scss b/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.input.scss index adb5a7e6c9e..c802ae29dd3 100644 --- a/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.input.scss +++ b/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.input.scss @@ -8,30 +8,30 @@ } .font-size { - /* LENGTHS */ + // LENGTHS font-size: 12px; font-size: 1rem; - /* Ignore */ + // Ignore font-size: 1em; font-size: #{1px}; - /* Comment */ + // Comment font-size: 10px; font-size: 12px + 1px; - /* FONT-SIZE FUNCTION */ + // FONT-SIZE FUNCTION font-size: legacy-polaris-v8.font-size(caption); font-size: legacy-polaris-v8.font-size(caption, base); font-size: legacy-polaris-v8.font-size(caption, large-screen); - /* Comment */ + // Comment font-size: legacy-polaris-v8.font-size($invalid); font-size: legacy-polaris-v8.font-size(caption, $invalid); font-size: legacy-polaris-v8.font-size(); font-size: legacy-polaris-v8.font-size(caption, base, $too-many-args); - /* REM FUNCTION */ + // REM FUNCTION font-size: legacy-polaris-v8.rem(12px); font-size: legacy-polaris-v8.rem(1rem); - /* Comment */ + // Comment font-size: legacy-polaris-v8.rem(1em); font-size: legacy-polaris-v8.rem(10px); font-size: legacy-polaris-v8.rem($invalid); @@ -44,33 +44,33 @@ } .font-weight { - /* LENGTHS */ + // LENGTHS font-weight: 400; font-weight: 700; - /* Comment */ + // Comment font-weight: 300; font-weight: 400 + 300; - /* ALIAS */ + // ALIAS font-weight: normal; font-weight: bold; - /* Comment */ + // Comment font-weight: bolder; } .font-line-height { - /* LENGTHS */ + // LENGTHS line-height: 16px; line-height: 1rem; - /* Comment */ + // Comment line-height: 10px; - /* LINE-HEIGHT FUNCTION */ + // LINE-HEIGHT FUNCTION line-height: legacy-polaris-v8.line-height(caption); line-height: legacy-polaris-v8.line-height(caption, base); line-height: legacy-polaris-v8.line-height(caption, large-screen); line-height: legacy-polaris-v8.line-height(display-x-large, base); - /* Comment */ + // Comment line-height: legacy-polaris-v8.line-height($invalid); line-height: legacy-polaris-v8.line-height(caption, $invalid); line-height: legacy-polaris-v8.line-height(); diff --git a/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.output.scss b/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.output.scss index d1b24ea68ca..dee669d496b 100644 --- a/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.output.scss +++ b/polaris-migrator/src/migrations/replace-typography-declarations/tests/with-namespace.output.scss @@ -8,117 +8,117 @@ } .font-size { - /* LENGTHS */ + // LENGTHS font-size: var(--p-font-size-75); font-size: var(--p-font-size-200); - /* Ignore */ + // Ignore font-size: 1em; font-size: #{1px}; - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: 10px; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: 10px; font-size: 10px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: var(--p-font-size-75) + 1px; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: var(--p-font-size-75) + 1px; font-size: 12px + 1px; - /* FONT-SIZE FUNCTION */ + // FONT-SIZE FUNCTION font-size: 0.8125rem; font-size: 0.8125rem; font-size: var(--p-font-size-75); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.font-size($invalid); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.font-size($invalid); font-size: legacy-polaris-v8.font-size($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.font-size(caption, $invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.font-size(caption, $invalid); font-size: legacy-polaris-v8.font-size(caption, $invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.font-size(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.font-size(); font-size: legacy-polaris-v8.font-size(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.font-size(caption, base, $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.font-size(caption, base, $too-many-args); font-size: legacy-polaris-v8.font-size(caption, base, $too-many-args); - /* REM FUNCTION */ + // REM FUNCTION font-size: var(--p-font-size-75); font-size: var(--p-font-size-200); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem(1em); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem(1em); font-size: legacy-polaris-v8.rem(1em); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem(10px); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem(10px); font-size: legacy-polaris-v8.rem(10px); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem($invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem($invalid); font-size: legacy-polaris-v8.rem($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem(); font-size: legacy-polaris-v8.rem(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem(var(--p-font-size-75), $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem(var(--p-font-size-75), $too-many-args); font-size: legacy-polaris-v8.rem(12px, $too-many-args); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: var(--p-font-size-75) 1px; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: var(--p-font-size-75) 1px; font-size: legacy-polaris-v8.rem(12px) 1px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem(1px) var(--p-font-size-75); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem(1px) var(--p-font-size-75); font-size: legacy-polaris-v8.rem(1px) 12px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: legacy-polaris-v8.rem(#{10px + 2px}) var(--p-font-size-75); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: legacy-polaris-v8.rem(#{10px + 2px}) var(--p-font-size-75); font-size: legacy-polaris-v8.rem(#{10px + 2px}) 12px; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-size: var(--p-font-size-75) + #{10px + 2px}; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-size: var(--p-font-size-75) + #{10px + 2px}; font-size: legacy-polaris-v8.rem(12px) + #{10px + 2px}; } .font-weight { - /* LENGTHS */ + // LENGTHS font-weight: var(--p-font-weight-regular); font-weight: var(--p-font-weight-bold); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-weight: 300; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-weight: 300; font-weight: 300; - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-weight: var(--p-font-weight-regular) + 300; */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-weight: var(--p-font-weight-regular) + 300; font-weight: 400 + 300; - /* ALIAS */ + // ALIAS font-weight: var(--p-font-weight-regular); font-weight: var(--p-font-weight-bold); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* font-weight: bolder; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // font-weight: bolder; font-weight: bolder; } .font-line-height { - /* LENGTHS */ + // LENGTHS line-height: var(--p-font-line-height-1); line-height: var(--p-font-line-height-1); - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: 10px; */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: 10px; line-height: 10px; - /* LINE-HEIGHT FUNCTION */ + // LINE-HEIGHT FUNCTION line-height: var(--p-font-line-height-2); line-height: var(--p-font-line-height-2); line-height: var(--p-font-line-height-1); line-height: 2.25rem; - /* Comment */ - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: legacy-polaris-v8.line-height($invalid); */ + // Comment + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: legacy-polaris-v8.line-height($invalid); line-height: legacy-polaris-v8.line-height($invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: legacy-polaris-v8.line-height(caption, $invalid); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: legacy-polaris-v8.line-height(caption, $invalid); line-height: legacy-polaris-v8.line-height(caption, $invalid); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: legacy-polaris-v8.line-height(); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: legacy-polaris-v8.line-height(); line-height: legacy-polaris-v8.line-height(); - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* line-height: legacy-polaris-v8.line-height(caption, base, $too-many-args); */ + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // line-height: legacy-polaris-v8.line-height(caption, base, $too-many-args); line-height: legacy-polaris-v8.line-height(caption, base, $too-many-args); }