other migrations

polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.input.scss

@@ -0,0 +1,9 @@
+@use 'global-styles/common';
+
+.SectionHeader {
+  padding-left: var(--p-space-200);
+
+  #{common.$se23} & {
+    padding-left: 0;
+  }
+}

polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.output.scss

@@ -0,0 +1,9 @@
+.SectionHeader {
+  padding-left: var(--p-space-200);
+
+  $se23: env(--polaris-se-23);
+
+  $(se23) & {
+    padding-left: 0;
+  }
+}

polaris-migrator/src/migrations/scss-replace-common-se23/tests/transform.test.ts

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

polaris-migrator/src/migrations/scss-replace-common-se23/transform.ts

@@ -0,0 +1,52 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+import type {AtRule, Plugin} from 'postcss';
+import postcss from 'postcss';
+import stylelint from 'stylelint';
+
+const plugin = (): Plugin => {
+  let commonAtUse: AtRule;
+
+  return {
+    postcssPlugin: 'scss-replace-common-se23',
+    Rule(rule, helper) {
+      if (rule.selector === '#{common.$se23} &') {
+        rule.selector = '$(se23) &';
+
+        rule.before(
+          helper.decl({prop: '$se23', value: 'env(--polaris-se-23)'}),
+        );
+
+        if (commonAtUse) {
+          commonAtUse.remove();
+        }
+      }
+    },
+    AtRule(atRule) {
+      if (atRule.name === 'use' && atRule.params === "'global-styles/common'") {
+        commonAtUse = atRule;
+      }
+    },
+  };
+};
+
+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;
+    });
+}

polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.input.scss

@@ -0,0 +1,13 @@
+@use 'global-styles/legacy-polaris-v8';
+
+.EmptyStateButton {
+  /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
+  @include legacy-polaris-v8.unstyled-button;
+  width: 100%;
+
+  &:disabled {
+    /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
+    @include legacy-polaris-v8.base-button-disabled;
+    cursor: default;
+  }
+}

polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.output.scss

@@ -0,0 +1,9 @@
+.EmptyStateButton {
+  composes: unstyled-button from 'legacy-polaris-v8.css';
+  width: 100%;
+
+  &:disabled {
+    composes: base-button-disabled from 'legacy-polaris-v8.css';
+    cursor: default;
+  }
+}

polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/transform.test.ts

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

polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/transform.ts

@@ -0,0 +1,93 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+import type {AtRule, Plugin} from 'postcss';
+import postcss from 'postcss';
+import stylelint from 'stylelint';
+
+const SUPPORTED_MIXINS = [
+  'legacy-polaris-v8.no-focus-ring',
+  'legacy-polaris-v8.visually-hidden',
+  'legacy-polaris-v8.base-button-disabled',
+  'legacy-polaris-v8.unstyled-button',
+  'legacy-polaris-v8.unstyled-link',
+  'legacy-polaris-v8.unstyled-list',
+  'legacy-polaris-v8.text-breakword',
+  'legacy-polaris-v8.truncate',
+  'legacy-polaris-v8.skeleton-shimmer',
+  'legacy-polaris-v8.skeleton-content',
+];
+
+const plugin = (): Plugin => {
+  const atUses: AtRule[] = [];
+  const mixins: AtRule[] = [];
+
+  return {
+    postcssPlugin: 'scss-replace-simple-legacy-mixins',
+    AtRule(atRule) {
+      if (atRule.name === 'include') {
+        mixins.push(atRule);
+      }
+
+      if (atRule.name === 'use') {
+        atUses.push(atRule);
+      }
+    },
+    RootExit() {
+      if (
+        atUses.length !== 1 ||
+        atUses[0].params !== "'global-styles/legacy-polaris-v8'"
+      ) {
+        return;
+      }
+
+      if (mixins.some((mixin) => !SUPPORTED_MIXINS.includes(mixin.params))) {
+        return;
+      }
+
+      mixins.forEach((mixin) => {
+        const prevNode = mixin.prev();
+
+        if (
+          prevNode &&
+          prevNode.type === 'comment' &&
+          prevNode.text.startsWith('stylelint-disable-next-line')
+        ) {
+          prevNode.remove();
+        }
+
+        const declaration = new postcss.Declaration({
+          prop: 'composes',
+          value: `${mixin.params.replace(
+            'legacy-polaris-v8.',
+            '',
+          )} from 'legacy-polaris-v8.css'`,
+        });
+
+        mixin.replaceWith(declaration);
+      });
+
+      atUses[0].remove();
+    },
+  };
+};
+
+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;
+    });
+}