[polaris-migrator] Add a migration to change inline for block comments

.changeset/fluffy-peas-dress.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Adds new styles-replace-inline-comments general migration

polaris-migrator/codeshift.config.js

@@ -11,6 +11,7 @@ module.exports = {
       'styles-insert-stylelint-disable',
     ),
     'styles-replace-custom-property': resolve('styles-replace-custom-property'),
+    'styles-replace-inline-comments': resolve('styles-replace-inline-comments'),
     'v11-react-update-page-breadcrumbs': resolve(
       'v11-react-update-page-breadcrumbs',
     ),

polaris-migrator/src/migrations/styles-replace-inline-comments/tests/styles-replace-inline-comments.input.scss

@@ -0,0 +1,12 @@
+// single-inline-comment
+$single-inline-comment: 1rem;
+
+// multiline
+// comment
+$multiline-comment: 1rem;
+
+.comment {
+  $top-nested-comment: 1rem;
+  // nested-sandwidched-comment
+  $bottom-nested-comment: 1rem;
+}

polaris-migrator/src/migrations/styles-replace-inline-comments/tests/styles-replace-inline-comments.output.scss

@@ -0,0 +1,12 @@
+/* single-inline-comment */
+$single-inline-comment: 1rem;
+
+/* multiline */
+/* comment */
+$multiline-comment: 1rem;
+
+.comment {
+  $top-nested-comment: 1rem;
+  /* nested-sandwidched-comment */
+  $bottom-nested-comment: 1rem;
+}

polaris-migrator/src/migrations/styles-replace-inline-comments/tests/transform.test.ts

@@ -0,0 +1,17 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'styles-replace-inline-comments';
+const fixtures = ['styles-replace-inline-comments'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    extension: 'scss',
+    options: {
+      customSyntax: 'postcss-scss',
+      reportDescriptionlessDisables: true,
+      rules: {},
+    },
+  });
+}

polaris-migrator/src/migrations/styles-replace-inline-comments/transform.ts

@@ -0,0 +1,37 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+import type {Plugin} from 'postcss';
+import postcss from 'postcss';
+import stylelint from 'stylelint';
+
+const plugin = (): Plugin => {
+  return {
+    postcssPlugin: 'styles-replace-inline-comments',
+    Comment(comment) {
+      comment.raws.inline = false;
+      comment.raws.right = ' ';
+      comment.raws.left = ' ';
+    },
+  };
+};
+
+export default async function transformer(
+  file: FileInfo,
+  _: API,
+  options: Options,
+) {
+  return postcss([
+    stylelint({
+      config: {
+        extends: [options.config ?? '@shopify/stylelint-polaris'],
+      },
+    }) as Plugin,
+    plugin(),
+  ])
+    .process(file.source, {
+      from: file.path,
+      syntax: require('postcss-scss'),
+    })
+    .then((result) => {
+      return result.css;
+    });
+}