From 31d6b0be9bc99dcf4ae728b98e8e4383ad886250 Mon Sep 17 00:00:00 2001 From: Sam Rose Date: Thu, 3 Nov 2022 16:15:33 -0600 Subject: [PATCH] Update `createInlineComment` to format text with RegExp --- .changeset/fluffy-owls-breathe.md | 5 +++++ polaris-migrator/package.json | 4 ++-- .../scss-replace-border-radius.ts | 4 +--- .../scss-replace-border-width.ts | 4 +--- .../scss-replace-border.ts | 4 +--- .../scss-replace-font-family.ts | 4 +--- .../scss-replace-font-size.ts | 4 +--- .../scss-replace-line-height.ts | 4 +--- .../scss-replace-spacing.ts | 4 +--- .../tests/with-namespace.output.scss | 2 +- .../styles-tokenize-font.ts | 4 +--- .../styles-tokenize-shape.ts | 4 +--- .../tests/styles-tokenize-space.output.scss | 2 +- .../tests/with-namespace.output.scss | 2 +- polaris-migrator/src/utilities/sass.ts | 22 +++++-------------- 15 files changed, 24 insertions(+), 49 deletions(-) create mode 100644 .changeset/fluffy-owls-breathe.md diff --git a/.changeset/fluffy-owls-breathe.md b/.changeset/fluffy-owls-breathe.md new file mode 100644 index 00000000000..44580dcfe39 --- /dev/null +++ b/.changeset/fluffy-owls-breathe.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': patch +--- + +Update `createInlineComment` to format text with RegExp diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json index ba45387ee61..897b3226392 100644 --- a/polaris-migrator/package.json +++ b/polaris-migrator/package.json @@ -41,8 +41,7 @@ "meow": "^9.0.0", "postcss": "^8.4.14", "postcss-scss": "^4.0.4", - "postcss-value-parser": "^4.2.0", - "prettier": "^2.7.1" + "postcss-value-parser": "^4.2.0" }, "devDependencies": { "@types/is-git-clean": "^1.1.0", @@ -54,6 +53,7 @@ "@shopify/polaris": "^10.10.1", "plop": "^3.1.1", "plop-dir": "^0.0.5", + "prettier": "^2.7.1", "type-fest": "^2.19.0" } } diff --git a/polaris-migrator/src/migrations/scss-replace-border-radius/scss-replace-border-radius.ts b/polaris-migrator/src/migrations/scss-replace-border-radius/scss-replace-border-radius.ts index 185488284b4..706aa437298 100644 --- a/polaris-migrator/src/migrations/scss-replace-border-radius/scss-replace-border-radius.ts +++ b/polaris-migrator/src/migrations/scss-replace-border-radius/scss-replace-border-radius.ts @@ -53,9 +53,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { // Insert comment if the declaration value contains calculations - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-border-width/scss-replace-border-width.ts b/polaris-migrator/src/migrations/scss-replace-border-width/scss-replace-border-width.ts index 48a17342a2c..9ee7fa63975 100644 --- a/polaris-migrator/src/migrations/scss-replace-border-width/scss-replace-border-width.ts +++ b/polaris-migrator/src/migrations/scss-replace-border-width/scss-replace-border-width.ts @@ -53,9 +53,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { // Insert comment if the declaration value contains calculations - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-border/scss-replace-border.ts b/polaris-migrator/src/migrations/scss-replace-border/scss-replace-border.ts index 6171bceecee..4417d25a114 100644 --- a/polaris-migrator/src/migrations/scss-replace-border/scss-replace-border.ts +++ b/polaris-migrator/src/migrations/scss-replace-border/scss-replace-border.ts @@ -50,9 +50,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { if (targets.some(({replaced}) => !replaced)) { // Insert comment if the declaration value contains calculations - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-font-family/scss-replace-font-family.ts b/polaris-migrator/src/migrations/scss-replace-font-family/scss-replace-font-family.ts index d3eaaa19cae..72fd0689400 100644 --- a/polaris-migrator/src/migrations/scss-replace-font-family/scss-replace-font-family.ts +++ b/polaris-migrator/src/migrations/scss-replace-font-family/scss-replace-font-family.ts @@ -71,9 +71,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { }); if (needsComment) { - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-font-size/scss-replace-font-size.ts b/polaris-migrator/src/migrations/scss-replace-font-size/scss-replace-font-size.ts index 7c2d0b06b5a..249addf4e52 100644 --- a/polaris-migrator/src/migrations/scss-replace-font-size/scss-replace-font-size.ts +++ b/polaris-migrator/src/migrations/scss-replace-font-size/scss-replace-font-size.ts @@ -84,9 +84,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { }); if (needsComment) { - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-line-height/scss-replace-line-height.ts b/polaris-migrator/src/migrations/scss-replace-line-height/scss-replace-line-height.ts index 1967feec62f..eee5add6211 100644 --- a/polaris-migrator/src/migrations/scss-replace-line-height/scss-replace-line-height.ts +++ b/polaris-migrator/src/migrations/scss-replace-line-height/scss-replace-line-height.ts @@ -85,9 +85,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { }); if (needsComment) { - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-spacing/scss-replace-spacing.ts b/polaris-migrator/src/migrations/scss-replace-spacing/scss-replace-spacing.ts index 0e2cfa05e1c..fbb11c48614 100644 --- a/polaris-migrator/src/migrations/scss-replace-spacing/scss-replace-spacing.ts +++ b/polaris-migrator/src/migrations/scss-replace-spacing/scss-replace-spacing.ts @@ -77,9 +77,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { if (hasNumericOperator(parsedValue)) { // Insert comment if the declaration value contains calculations - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/scss-replace-spacing/tests/with-namespace.output.scss b/polaris-migrator/src/migrations/scss-replace-spacing/tests/with-namespace.output.scss index 37317eef3eb..6e4ed7a4eed 100644 --- a/polaris-migrator/src/migrations/scss-replace-spacing/tests/with-namespace.output.scss +++ b/polaris-migrator/src/migrations/scss-replace-spacing/tests/with-namespace.output.scss @@ -17,7 +17,7 @@ padding: -#{legacy-polaris-v8.spacing()}; // With other functions // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // padding: calc(#{legacy-polaris-v8.rem(16px)} + var(--p-space-4)); + // padding: calc( #{legacy-polaris-v8.rem(16px)} + var(--p-space-4) ); padding: calc( #{legacy-polaris-v8.rem(16px)} + #{legacy-polaris-v8.spacing()} ); 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 35e27307f61..890594a50ae 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 @@ -63,9 +63,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { handlers[decl.prop](); if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/styles-tokenize-shape/styles-tokenize-shape.ts b/polaris-migrator/src/migrations/styles-tokenize-shape/styles-tokenize-shape.ts index 0f34f13cb33..c4162b67192 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-shape/styles-tokenize-shape.ts +++ b/polaris-migrator/src/migrations/styles-tokenize-shape/styles-tokenize-shape.ts @@ -60,9 +60,7 @@ const plugin = (options: PluginOptions = {}): Plugin => { if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { // Insert comment if the declaration value contains calculations - decl.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); decl.before( createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), ); diff --git a/polaris-migrator/src/migrations/styles-tokenize-space/tests/styles-tokenize-space.output.scss b/polaris-migrator/src/migrations/styles-tokenize-space/tests/styles-tokenize-space.output.scss index becc4078125..017cf3eb5cd 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-space/tests/styles-tokenize-space.output.scss +++ b/polaris-migrator/src/migrations/styles-tokenize-space/tests/styles-tokenize-space.output.scss @@ -116,7 +116,7 @@ // padding: var(--p-space-4) + var(--p-space-4); padding: rem(16px) + 16px; // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '$var \* 16px' + // error: Non-tokenizable value '$var * 16px' // warning: Numeric operator detected. // padding: rem($var * var(--p-space-4)); padding: rem($var * 16px); diff --git a/polaris-migrator/src/migrations/styles-tokenize-space/tests/with-namespace.output.scss b/polaris-migrator/src/migrations/styles-tokenize-space/tests/with-namespace.output.scss index 2b9be603f01..f881894d4f3 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-space/tests/with-namespace.output.scss +++ b/polaris-migrator/src/migrations/styles-tokenize-space/tests/with-namespace.output.scss @@ -118,7 +118,7 @@ // padding: var(--p-space-4) + var(--p-space-4); padding: legacy-polaris-v8.rem(16px) + 16px; // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '$var \* 16px' + // error: Non-tokenizable value '$var * 16px' // warning: Numeric operator detected. // padding: legacy-polaris-v8.rem($var * var(--p-space-4)); padding: legacy-polaris-v8.rem($var * 16px); diff --git a/polaris-migrator/src/utilities/sass.ts b/polaris-migrator/src/utilities/sass.ts index b5474d84c74..f97e72ba989 100644 --- a/polaris-migrator/src/utilities/sass.ts +++ b/polaris-migrator/src/utilities/sass.ts @@ -17,7 +17,6 @@ import valueParser, { Dimension, } from 'postcss-value-parser'; import {toPx, getCustomPropertyNames, tokens} from '@shopify/polaris-tokens'; -import prettier from 'prettier'; import {POLARIS_MIGRATOR_COMMENT} from '../constants'; @@ -328,15 +327,8 @@ export function isPolarisVar(node: Node): boolean { ); } -export function createInlineComment(text: string, options?: {prose?: boolean}) { - const formatted = prettier - .format(text, { - parser: options?.prose ? 'markdown' : 'scss', - proseWrap: 'never', - printWidth: 9999, - }) - .trim(); - const comment = postcss.comment({text: formatted}); +export function createInlineComment(text: string) { + const comment = postcss.comment({text: text.replace(/\s+/gm, ' ').trim()}); comment.raws.left = ' '; comment.raws.inline = true; @@ -477,15 +469,11 @@ export function createSassMigrator(name: string, ruleFn: PolarisMigrator) { const flushReportsAsComments = () => { // @ts-expect-error No idea why TS is complaining here for (const [node, reportsForNode] of reports) { - node.before( - createInlineComment(POLARIS_MIGRATOR_COMMENT, {prose: true}), - ); + node.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); for (const report of reportsForNode) { node.before( - createInlineComment(`${report.severity}: ${report.message}`, { - prose: true, - }), + createInlineComment(`${report.severity}: ${report.message}`), ); } } @@ -573,7 +561,7 @@ export function createSassMigrator(name: string, ruleFn: PolarisMigrator) { root.walkDecls( createWalker({ walker, - serialiseSuggestion: (node) => `${node.prop}: ${node.value}`, + serialiseSuggestion: (node) => `${node.prop}: ${node.value};`, }), ); },