From 53070b4d94613bfbf6c8afbd0902fbd2b053dba5 Mon Sep 17 00:00:00 2001 From: Chema Balsas Date: Tue, 3 Oct 2023 05:12:03 +0000 Subject: [PATCH] other migrations --- .../tests/scss-replace-common-se23.input.scss | 9 ++ .../scss-replace-common-se23.output.scss | 9 ++ .../tests/transform.test.ts | 17 ++++ .../scss-replace-common-se23/transform.ts | 52 +++++++++++ ...ss-replace-simple-legacy-mixins.input.scss | 13 +++ ...s-replace-simple-legacy-mixins.output.scss | 9 ++ .../tests/transform.test.ts | 17 ++++ .../transform.ts | 93 +++++++++++++++++++ 8 files changed, 219 insertions(+) create mode 100644 polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.input.scss create mode 100644 polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.output.scss create mode 100644 polaris-migrator/src/migrations/scss-replace-common-se23/tests/transform.test.ts create mode 100644 polaris-migrator/src/migrations/scss-replace-common-se23/transform.ts create mode 100644 polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.input.scss create mode 100644 polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.output.scss create mode 100644 polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/transform.test.ts create mode 100644 polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/transform.ts diff --git a/polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.input.scss b/polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.input.scss new file mode 100644 index 00000000000..48e1401b27c --- /dev/null +++ b/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; + } +} diff --git a/polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.output.scss b/polaris-migrator/src/migrations/scss-replace-common-se23/tests/scss-replace-common-se23.output.scss new file mode 100644 index 00000000000..179fd91dee7 --- /dev/null +++ b/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; + } +} diff --git a/polaris-migrator/src/migrations/scss-replace-common-se23/tests/transform.test.ts b/polaris-migrator/src/migrations/scss-replace-common-se23/tests/transform.test.ts new file mode 100644 index 00000000000..a48de02c0ea --- /dev/null +++ b/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: {}, + }, + }); +} diff --git a/polaris-migrator/src/migrations/scss-replace-common-se23/transform.ts b/polaris-migrator/src/migrations/scss-replace-common-se23/transform.ts new file mode 100644 index 00000000000..14b9ed9b35b --- /dev/null +++ b/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; + }); +} diff --git a/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.input.scss b/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.input.scss new file mode 100644 index 00000000000..3b09e68ab72 --- /dev/null +++ b/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; + } +} diff --git a/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.output.scss b/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/scss-replace-simple-legacy-mixins.output.scss new file mode 100644 index 00000000000..cf2f716c707 --- /dev/null +++ b/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; + } +} diff --git a/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/transform.test.ts b/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/tests/transform.test.ts new file mode 100644 index 00000000000..4fe97f75e10 --- /dev/null +++ b/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: {}, + }, + }); +} diff --git a/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/transform.ts b/polaris-migrator/src/migrations/scss-replace-simple-legacy-mixins/transform.ts new file mode 100644 index 00000000000..6b8aa057c5e --- /dev/null +++ b/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; + }); +}