Update createInlineComment to format text with RegExp

Author: sam-b-rose

.changeset/fluffy-owls-breathe.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Update `createInlineComment` to format text with RegExp

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"
   }
 }

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()};`),
         );

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()}
   );

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()};`),
         );

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()};`),
         );

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);

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);

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};`,
               }),
             );
           },