diff --git a/.changeset/friendly-bananas-crash.md b/.changeset/friendly-bananas-crash.md new file mode 100644 index 00000000000..daa494da72d --- /dev/null +++ b/.changeset/friendly-bananas-crash.md @@ -0,0 +1,11 @@ +--- +'@shopify/polaris-migrator': minor +--- + +Removed the `@shopify/polaris-cli` and `@shopify/polaris-codemods` package in favor of using only the `@shopify/polaris-migrator`. + +Removing these packages will provide the following benefits: + +- Improve CI time by removing extra packages from our build, test, and lint workflows +- Reduce confusion on where to add new migrations or update previous migrations +- Clean up ESLint configs, reduce changelog entries, and remove package dependencies diff --git a/.eslintrc.js b/.eslintrc.js index d0f6a97af99..a82ba9093a0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -98,29 +98,6 @@ module.exports = { }, overrides: [ ...packages.map((packageDir) => noExtraneousDependenciesConfig(packageDir)), - { - files: ['polaris-cli/src/**/*.{ts,tsx}'], - rules: { - 'import/no-default-export': 'off', - }, - }, - { - files: ['polaris-codemods/src/**/*.{ts,tsx}'], - rules: { - 'import/no-default-export': 'off', - // Issue with inconsistent import order between node 14 and 16. - // This could be removed after dropping node 14 support. - 'import/order': 'off', - }, - }, - { - files: ['polaris-codemods/src/**/tests/*.{ts,tsx}'], - rules: { - 'import/no-extraneous-dependencies': 'off', - '@shopify/jsx-no-hardcoded-content': 'off', - '@typescript-eslint/ban-ts-comment': 'off', - }, - }, { files: ['polaris-migrator/src/**/*.{ts,tsx}'], rules: { diff --git a/package.json b/package.json index 9c73e778dde..eba26d55609 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,6 @@ }, "workspaces": { "packages": [ - "polaris-cli", - "polaris-codemods", "polaris-tokens", "polaris-for-vscode", "polaris-icons", diff --git a/polaris-cli/CHANGELOG.md b/polaris-cli/CHANGELOG.md deleted file mode 100644 index 9c7a2bd4536..00000000000 --- a/polaris-cli/CHANGELOG.md +++ /dev/null @@ -1,477 +0,0 @@ -# @shopify/polaris-cli - -## 0.2.30 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.9 - -## 0.2.29 - -## 0.2.28 - -## 0.2.27 - -## 0.2.26 - -## 0.2.25 - -## 0.2.24 - -## 0.2.23 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.8 - -## 0.2.22 - -## 0.2.21 - -## 0.2.20 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.7 - -## 0.2.19 - -## 0.2.18 - -## 0.2.17 - -## 0.2.16 - -## 0.2.15 - -## 0.2.14 - -## 0.2.13 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.6 - -## 0.2.12 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.5 - -## 0.2.11 - -## 0.2.10 - -## 0.2.9 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.4 - -## 0.2.8 - -## 0.2.7 - -## 0.2.6 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.3 - -## 0.2.5 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.2 - -## 0.2.4 - -## 0.2.3 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.19.1 - -## 0.2.2 - -## 0.2.1 - -## 0.2.0 - -### Minor Changes - -- [#7597](https://github.com/Shopify/polaris/pull/7597) [`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806) Thanks [@lgriffee](https://github.com/lgriffee)! - Removed support for multiple versions of TypeScript with `downlevel-dts` - -* [#7597](https://github.com/Shopify/polaris/pull/7597) [`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806) Thanks [@lgriffee](https://github.com/lgriffee)! - Removed support for NodeJS version 14 and set version 16 as minimum supported version - -### Patch Changes - -- Updated dependencies [[`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806)]: - - @shopify/polaris-migrator@0.19.0 - -## 0.1.38 - -## 0.1.37 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.18.2 - -## 0.1.36 - -## 0.1.35 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.18.1 - -## 0.1.34 - -### Patch Changes - -- Updated dependencies [[`c47996bca`](https://github.com/Shopify/polaris/commit/c47996bcaf9ea3ef99f38d4fc63cc2512e794822)]: - - @shopify/polaris-migrator@0.18.0 - -## 0.1.33 - -## 0.1.32 - -## 0.1.31 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.17.4 - -## 0.1.30 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.17.3 - -## 0.1.29 - -## 0.1.28 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.17.2 - -## 0.1.27 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.17.1 - -## 0.1.26 - -## 0.1.25 - -## 0.1.24 - -### Patch Changes - -- Updated dependencies [[`f25f3c73c`](https://github.com/Shopify/polaris/commit/f25f3c73c9b902647206de45bc98983477acc312), [`dc09b21da`](https://github.com/Shopify/polaris/commit/dc09b21da9c7a4575973300a6f94b774e6f603d1)]: - - @shopify/polaris-migrator@0.17.0 - -## 0.1.23 - -## 0.1.22 - -## 0.1.21 - -## 0.1.20 - -### Patch Changes - -- Updated dependencies [[`df0378cbc`](https://github.com/Shopify/polaris/commit/df0378cbcf926d901ee6dc4aab8a81535c873491)]: - - @shopify/polaris-migrator@0.16.1 - -## 0.1.19 - -## 0.1.18 - -## 0.1.17 - -### Patch Changes - -- Updated dependencies [[`cccd69848`](https://github.com/Shopify/polaris/commit/cccd698482ed4ff74e2ae4ab23ccc1c3e7c69412)]: - - @shopify/polaris-migrator@0.16.0 - -## 0.1.16 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.15.1 - -## 0.1.15 - -## 0.1.14 - -### Patch Changes - -- Updated dependencies [[`e21fd8d79`](https://github.com/Shopify/polaris/commit/e21fd8d79193665054cd3bcba43518ca9684bd22)]: - - @shopify/polaris-migrator@0.15.0 - -## 0.1.13 - -### Patch Changes - -- Updated dependencies [[`319479143`](https://github.com/Shopify/polaris/commit/319479143c9526ec461b20555ea83b5ec9aa1ecc)]: - - @shopify/polaris-migrator@0.14.0 - -## 0.1.12 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.13.4 - -## 0.1.11 - -## 0.1.10 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.13.3 - -## 0.1.9 - -### Patch Changes - -- Updated dependencies [[`40ff13451`](https://github.com/Shopify/polaris/commit/40ff1345148a6f77ced213b92137269711925ae2)]: - - @shopify/polaris-migrator@0.13.2 - -## 0.1.8 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.13.1 - -## 0.1.7 - -### Patch Changes - -- Updated dependencies [[`8a15048e3`](https://github.com/Shopify/polaris/commit/8a15048e333a5e01ddf4352cf07b6d806bcc05f0)]: - - @shopify/polaris-migrator@0.13.0 - -## 0.1.6 - -### Patch Changes - -- Updated dependencies [[`f5afc40d2`](https://github.com/Shopify/polaris/commit/f5afc40d2bed7dd63d771f1f8ee87ceb7ff9d05b)]: - - @shopify/polaris-migrator@0.12.0 - -## 0.1.5 - -## 0.1.4 - -## 0.1.3 - -## 0.1.2 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.11.4 - -## 0.1.1 - -## 0.1.0 - -### Minor Changes - -- [#8223](https://github.com/Shopify/polaris/pull/8223) [`de7987c42`](https://github.com/Shopify/polaris/commit/de7987c426174b73d67e54eacf197da9490c76ec) Thanks [@samrose3](https://github.com/samrose3)! - Renamed Polaris CLI package and add docs to website - -## 0.0.32 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.11.3 - -## 0.0.31 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.11.2 - -## 0.0.30 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.11.1 - -## 0.0.29 - -## 0.0.28 - -## 0.0.27 - -### Patch Changes - -- Updated dependencies [[`64d57de02`](https://github.com/Shopify/polaris/commit/64d57de0277ff39fd54746f48d11b9841e62e32b)]: - - @shopify/polaris-migrator@0.11.0 - -## 0.0.26 - -### Patch Changes - -- Updated dependencies [[`fad3809ef`](https://github.com/Shopify/polaris/commit/fad3809ef39054b125c661f9b1bf6397b2b89fd0), [`56b0bc2dc`](https://github.com/Shopify/polaris/commit/56b0bc2dc414a085e935c3975a74410e7df530f1)]: - - @shopify/polaris-migrator@0.10.3 - -## 0.0.25 - -## 0.0.24 - -## 0.0.23 - -### Patch Changes - -- Updated dependencies [[`bfb537780`](https://github.com/Shopify/polaris/commit/bfb5377802f0d8e28c9cfafa9924f1849bcc0cce)]: - - @shopify/polaris-migrator@0.10.2 - -## 0.0.22 - -## 0.0.21 - -### Patch Changes - -- Updated dependencies []: - - @shopify/polaris-migrator@0.10.1 - -## 0.0.20 - -## 0.0.19 - -### Patch Changes - -- Updated dependencies [[`22c4107b3`](https://github.com/Shopify/polaris/commit/22c4107b3c369eb68da31980d208c09b3fc4ba37), [`77736370e`](https://github.com/Shopify/polaris/commit/77736370eeddde18a2c11da102b88646f2263d99)]: - - @shopify/polaris-migrator@0.10.0 - -## 0.0.18 - -### Patch Changes - -- Updated dependencies [[`28220456f`](https://github.com/Shopify/polaris/commit/28220456f67bb4e6e2df19ceb334635ca2d0f3a5)]: - - @shopify/polaris-migrator@0.9.1 - -## 0.0.17 - -### Patch Changes - -- Updated dependencies [[`2ce4d38a2`](https://github.com/Shopify/polaris/commit/2ce4d38a27e654fffb01603539cff52b941776e1), [`c08780522`](https://github.com/Shopify/polaris/commit/c087805225c7c9cf625b821fdbca1f125f73f654), [`566dc20c2`](https://github.com/Shopify/polaris/commit/566dc20c2ca48d2e269fcc91f5693f872b464b55)]: - - @shopify/polaris-migrator@0.9.0 - -## 0.0.16 - -### Patch Changes - -- Updated dependencies [[`8859f5db5`](https://github.com/Shopify/polaris/commit/8859f5db505e06b3c99b0a87ad7e7801c3ce56c3), [`cf7badbd1`](https://github.com/Shopify/polaris/commit/cf7badbd1b8a9fffe2971dec9807f0ccdefdc971), [`cf7badbd1`](https://github.com/Shopify/polaris/commit/cf7badbd1b8a9fffe2971dec9807f0ccdefdc971), [`cf7badbd1`](https://github.com/Shopify/polaris/commit/cf7badbd1b8a9fffe2971dec9807f0ccdefdc971), [`8c1989618`](https://github.com/Shopify/polaris/commit/8c1989618d8dcbf10c3dbe529fa40918c222ce7c), [`3652eb901`](https://github.com/Shopify/polaris/commit/3652eb901812b7418f1010d818c07e307a49d83b), [`1f2ec8bfe`](https://github.com/Shopify/polaris/commit/1f2ec8bfeba3250f6011efcf3832d022aff62990), [`ba576498d`](https://github.com/Shopify/polaris/commit/ba576498d8fb19f01a523281389d038d42e79c3a)]: - - @shopify/polaris-migrator@0.8.0 - -## 0.0.15 - -### Patch Changes - -- Updated dependencies [[`85c0c3290`](https://github.com/Shopify/polaris/commit/85c0c329003c0d234f339164c0d2940aff4f6b26), [`141746b5b`](https://github.com/Shopify/polaris/commit/141746b5b4dc2f99b0c729883e98f4210f5a16c0)]: - - @shopify/polaris-migrator@0.7.0 - -## 0.0.14 - -## 0.0.13 - -## 0.0.12 - -### Patch Changes - -- Updated dependencies [[`dc2990acf`](https://github.com/Shopify/polaris/commit/dc2990acf1071c2bae352bce6fc5a28092b9f52f), [`8fb215836`](https://github.com/Shopify/polaris/commit/8fb2158368945ad1e58b6e3ff74567b80b652757), [`60191f353`](https://github.com/Shopify/polaris/commit/60191f353d1ef86f1eef167d36c0b040f21b72d6), [`6d82e8965`](https://github.com/Shopify/polaris/commit/6d82e896587bacec60471e06fa81b2c61518551f), [`0591db26a`](https://github.com/Shopify/polaris/commit/0591db26a4d13a5640245e433f61f77bf1be88d4), [`699b70713`](https://github.com/Shopify/polaris/commit/699b707132bfe486785955084961bcb91753fb2a), [`8194e174a`](https://github.com/Shopify/polaris/commit/8194e174ab45e1995f693e786d6925ab79717c1c), [`933a9d71b`](https://github.com/Shopify/polaris/commit/933a9d71b71b172657bbaf050cfc8793e39a49c0), [`a0fa96ed4`](https://github.com/Shopify/polaris/commit/a0fa96ed4eaf53652feb5ee0d79aeec1c84f5d12)]: - - @shopify/polaris-migrator@0.6.0 - -## 0.0.11 - -### Patch Changes - -- Updated dependencies [[`56c82ee8d`](https://github.com/Shopify/polaris/commit/56c82ee8d15a58ef5e68b04968b126b93aa8dec9)]: - - @shopify/polaris-migrator@0.5.0 - -## 0.0.10 - -### Patch Changes - -- Updated dependencies [[`57e5f95c1`](https://github.com/Shopify/polaris/commit/57e5f95c1e402fda3202babfdce25b131b0b9165)]: - - @shopify/polaris-migrator@0.4.1 - -## 0.0.9 - -## 0.0.8 - -### Patch Changes - -- Updated dependencies [[`fbf2f8832`](https://github.com/Shopify/polaris/commit/fbf2f88320ad6c5767c37d18d76bfa82babf71cb), [`b31f51f25`](https://github.com/Shopify/polaris/commit/b31f51f259fefd8b119c5242e2ab1528c3a6cff8)]: - - @shopify/polaris-migrator@0.4.0 - -## 0.0.7 - -### Patch Changes - -- Updated dependencies [[`5a1f45f7a`](https://github.com/Shopify/polaris/commit/5a1f45f7a29cf6994394d7fab6f007f850d956ad), [`c958899c7`](https://github.com/Shopify/polaris/commit/c958899c73829bf1c1fa512946ffa3db7f06a2d0)]: - - @shopify/polaris-migrator@0.3.0 - -## 0.0.6 - -## 0.0.5 - -### Patch Changes - -- Updated dependencies [[`963581358`](https://github.com/Shopify/polaris/commit/9635813582030159f4c102242420fde3a6364808)]: - - @shopify/polaris-migrator@0.2.1 - -## 0.0.4 - -### Patch Changes - -- Updated dependencies [[`4cbf8f466`](https://github.com/Shopify/polaris/commit/4cbf8f4660242a9bd2a2dd05dbeece212658a420), [`a5fd48bf4`](https://github.com/Shopify/polaris/commit/a5fd48bf4ba52a9675154d386e6365ca728554b7)]: - - @shopify/polaris-migrator@0.2.0 - -## 0.0.3 - -### Patch Changes - -- Updated dependencies [[`c7afbd498`](https://github.com/Shopify/polaris/commit/c7afbd4984048ddc7438c7cef9e50acd1d174db1), [`2fec9611d`](https://github.com/Shopify/polaris/commit/2fec9611dec0a147be0be0410e955e92c025edc0)]: - - @shopify/polaris-migrator@0.1.2 - -## 0.0.2 - -### Patch Changes - -- Updated dependencies [[`77d7b5ae3`](https://github.com/Shopify/polaris/commit/77d7b5ae3ff94d29133ff132316cb779a635b047)]: - - @shopify/polaris-migrator@0.1.1 - -## 0.0.1 - -### Patch Changes - -- [#7166](https://github.com/Shopify/polaris/pull/7166) [`1a3d54dc3`](https://github.com/Shopify/polaris/commit/1a3d54dc37d35a4f437aaf790b2201160d1a719d) Thanks [@samrose3](https://github.com/samrose3)! - Initial release 🚀 - -- Updated dependencies [[`17d5bd0e8`](https://github.com/Shopify/polaris/commit/17d5bd0e8a0ba8adbaf31992e15894e2afa23451)]: - - @shopify/polaris-migrator@0.1.0 diff --git a/polaris-cli/README.md b/polaris-cli/README.md deleted file mode 100644 index 038446c2899..00000000000 --- a/polaris-cli/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# [Polaris CLI](https://polaris.shopify.com/polaris-cli) - -[![npm version](https://img.shields.io/npm/v/@shopify/polaris-cli.svg?style=flat)](https://www.npmjs.com/package/@shopify/polaris-cli) - -[Shopify CLI][] plugin for managing Shopify Apps using [Polaris][]. - -[Polaris CLI documentation](https://polaris.shopify.com/tools/polaris-cli) - -[shopify cli]: https://shopify.dev/apps/tools/cli/commands -[polaris]: https://polaris.shopify.com diff --git a/polaris-cli/package.json b/polaris-cli/package.json deleted file mode 100644 index a764525bb47..00000000000 --- a/polaris-cli/package.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "name": "@shopify/polaris-cli", - "version": "0.2.30", - "description": "Commands for building Shopify Apps with Polaris", - "license": "SEE LICENSE IN LICENSE.md", - "author": "Shopify ", - "homepage": "https://polaris.shopify.com/tools/cli", - "repository": "https://github.com/Shopify/polaris", - "bugs": { - "url": "https://github.com/Shopify/polaris/issues" - }, - "publishConfig": { - "access": "public", - "@shopify:registry": "https://registry.npmjs.org" - }, - "type": "module", - "files": [ - "dist" - ], - "scripts": { - "build": "tsc -b", - "lint": "TIMING=1 eslint --cache .", - "clean": "rm -rf .turbo node_modules dist" - }, - "dependencies": { - "@oclif/core": "^1.13.10", - "@shopify/polaris-migrator": "^0.19.9" - }, - "engine-strict": true, - "engines": { - "node": "^16.17.0 || >=18.12.0" - }, - "os": [ - "darwin", - "linux", - "win32" - ], - "oclif": { - "commands": "dist/commands", - "topicSeparator": " ", - "topics": { - "polaris": { - "description": "Commands for building Shopify Apps with Polaris" - } - } - } -} diff --git a/polaris-cli/src/commands/polaris/migrate.ts b/polaris-cli/src/commands/polaris/migrate.ts deleted file mode 100644 index 2c93c10f6cc..00000000000 --- a/polaris-cli/src/commands/polaris/migrate.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {Command, Flags} from '@oclif/core'; -import {migrate, cliConfig} from '@shopify/polaris-migrator'; - -export default class Migrate extends Command { - static description = cliConfig.description; - static args = cliConfig.args; - static flags = Object.fromEntries( - Object.entries(cliConfig.flags).map(([name, flag]) => [ - name, - Flags[flag.type]({ - char: flag.alias, - description: flag.description, - env: `SHOPIFY_FLAG_${name.toUpperCase()}`, - }), - ]), - ); - - async run() { - const {args, flags} = await this.parse(Migrate); - const {migration, path} = args; - await migrate(migration, path, { - dry: flags.dry, - print: flags.print, - force: flags.force, - }); - } -} diff --git a/polaris-cli/tsconfig.json b/polaris-cli/tsconfig.json deleted file mode 100644 index 0daad4187eb..00000000000 --- a/polaris-cli/tsconfig.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "@shopify/typescript-configs/node-base", - "compilerOptions": { - "module": "es2020", - "target": "es2020", - "outDir": "dist", - "rootDir": "src" - }, - "include": ["src"], - "exclude": ["node_modules", "dist"] -} diff --git a/polaris-codemods/CHANGELOG.md b/polaris-codemods/CHANGELOG.md deleted file mode 100644 index 0f3671763ec..00000000000 --- a/polaris-codemods/CHANGELOG.md +++ /dev/null @@ -1,145 +0,0 @@ -# @shopify/polaris-codemods - -## 0.1.12 - -### Patch Changes - -- Updated dependencies [[`a3da87e2e`](https://github.com/Shopify/polaris/commit/a3da87e2e52b7e4c3fc421bbe4122e763c39c1a1), [`36e4ee8af`](https://github.com/Shopify/polaris/commit/36e4ee8afbc7dbec6e65225384629afa83f64a75)]: - - @shopify/stylelint-polaris@14.0.0 - - @shopify/polaris-tokens@7.5.3 - -## 0.1.11 - -### Patch Changes - -- Updated dependencies [[`5b85401fe`](https://github.com/Shopify/polaris/commit/5b85401fe56ee07f107358548669ed8f1d6ecceb), [`799819b68`](https://github.com/Shopify/polaris/commit/799819b687a319328bf36917ba79c6324197aba9)]: - - @shopify/polaris-tokens@7.5.2 - - @shopify/stylelint-polaris@13.0.8 - -## 0.1.10 - -### Patch Changes - -- Updated dependencies [[`bed52546f`](https://github.com/Shopify/polaris/commit/bed52546f3852fea8f3c98505846a6f553dbd3c1)]: - - @shopify/polaris-tokens@7.5.1 - - @shopify/stylelint-polaris@13.0.7 - -## 0.1.9 - -### Patch Changes - -- Updated dependencies [[`6d4baffde`](https://github.com/Shopify/polaris/commit/6d4baffdeb63d4cb1265b201b8490677d25e8c5e), [`3536e3aa0`](https://github.com/Shopify/polaris/commit/3536e3aa006896ae31c9148832230322ceaa823d), [`58406fd98`](https://github.com/Shopify/polaris/commit/58406fd98db3561fb4e3f55fc44f51202a98024f), [`26053bd3f`](https://github.com/Shopify/polaris/commit/26053bd3f13920ff30ff29c78d55b000b017cef2)]: - - @shopify/polaris-tokens@7.5.0 - - @shopify/stylelint-polaris@13.0.6 - -## 0.1.8 - -### Patch Changes - -- Updated dependencies [[`af6337d60`](https://github.com/Shopify/polaris/commit/af6337d60e18cfd8adcc99aa425e1cc697b41ca0)]: - - @shopify/polaris-tokens@7.4.0 - - @shopify/stylelint-polaris@13.0.5 - -## 0.1.7 - -### Patch Changes - -- Updated dependencies [[`5065fc199`](https://github.com/Shopify/polaris/commit/5065fc1991518507607d81d1f1b667c26773cf4d)]: - - @shopify/polaris-tokens@7.3.1 - - @shopify/stylelint-polaris@13.0.4 - -## 0.1.6 - -### Patch Changes - -- Updated dependencies [[`b73666e63`](https://github.com/Shopify/polaris/commit/b73666e63c5ec5d0f47ecfb66683d8de0f79ab97), [`f9ceb4d02`](https://github.com/Shopify/polaris/commit/f9ceb4d0224b613b0ba1680bcb575714b1ad8300), [`84c015547`](https://github.com/Shopify/polaris/commit/84c015547c3b85938f326604216d819e1f31f6ab), [`bc141cf54`](https://github.com/Shopify/polaris/commit/bc141cf54497deb488f3b8e589e94741f06efd54)]: - - @shopify/polaris-tokens@7.3.0 - - @shopify/stylelint-polaris@13.0.3 - -## 0.1.5 - -### Patch Changes - -- Updated dependencies [[`91ebe5792`](https://github.com/Shopify/polaris/commit/91ebe57922d26e3acb61047c79d7a157952d5486)]: - - @shopify/polaris-tokens@7.2.0 - - @shopify/stylelint-polaris@13.0.2 - -## 0.1.4 - -### Patch Changes - -- Updated dependencies [[`9c9e80ed1`](https://github.com/Shopify/polaris/commit/9c9e80ed132715e1c91ee2dc0b9fcc13adb3afea)]: - - @shopify/polaris-tokens@7.1.0 - - @shopify/stylelint-polaris@13.0.1 - -## 0.1.3 - -### Patch Changes - -- Updated dependencies [[`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806)]: - - @shopify/polaris-tokens@7.0.0 - - @shopify/stylelint-polaris@13.0.0 - -## 0.1.2 - -### Patch Changes - -- Updated dependencies [[`5a9b011d1`](https://github.com/Shopify/polaris/commit/5a9b011d14a0cc575f4fd34d9e4d8fcfeb0cd597), [`6ae3295e7`](https://github.com/Shopify/polaris/commit/6ae3295e78518112e611185e7a8f9b6287bd985a)]: - - @shopify/polaris-tokens@6.14.0 - - @shopify/stylelint-polaris@12.0.1 - -## 0.1.1 - -### Patch Changes - -- Updated dependencies [[`a64e38948`](https://github.com/Shopify/polaris/commit/a64e3894834f7507834ed21736c932d44f10ff43)]: - - @shopify/stylelint-polaris@12.0.0 - -## 0.1.0 - -### Minor Changes - -- [#9068](https://github.com/Shopify/polaris/pull/9068) [`c47996bca`](https://github.com/Shopify/polaris/commit/c47996bcaf9ea3ef99f38d4fc63cc2512e794822) Thanks [@lgriffee](https://github.com/lgriffee)! - Created a migration to replace deprecated `motion` custom properties in `@shopify/polaris` v11.0.0 - -### Patch Changes - -- Updated dependencies [[`11cd5f674`](https://github.com/Shopify/polaris/commit/11cd5f67440bec59ffd3983fa02a7b65842063e6), [`acf89f6a9`](https://github.com/Shopify/polaris/commit/acf89f6a9fb58f557a57e92e4e54a3935c85f50c)]: - - @shopify/stylelint-polaris@11.0.0 - - @shopify/polaris-tokens@6.13.0 - -## 0.0.5 - -### Patch Changes - -- Updated dependencies [[`bcdbaad00`](https://github.com/Shopify/polaris/commit/bcdbaad009bb0606544dff19b5b5fcb37ddc6f94)]: - - @shopify/polaris-tokens@6.12.0 - - @shopify/stylelint-polaris@10.1.1 - -## 0.0.4 - -### Patch Changes - -- Updated dependencies [[`a47e9084d`](https://github.com/Shopify/polaris/commit/a47e9084dcbb0b9870bc58dd2214e82657efe8ad), [`cbff4a131`](https://github.com/Shopify/polaris/commit/cbff4a13101abed155f0a272b2b26493d7d20017)]: - - @shopify/polaris-tokens@6.11.0 - - @shopify/stylelint-polaris@10.1.0 - -## 0.0.3 - -### Patch Changes - -- Updated dependencies [[`f1a3ad756`](https://github.com/Shopify/polaris/commit/f1a3ad756d73bf249583bdb47523a4b229a0c7cb), [`80eb3ac55`](https://github.com/Shopify/polaris/commit/80eb3ac55c076eb336620cac8dc08cd212524afc), [`dbe68efb4`](https://github.com/Shopify/polaris/commit/dbe68efb40fcd6261aee98b8784e0fca696c5b1b)]: - - @shopify/stylelint-polaris@10.0.0 - -## 0.0.2 - -### Patch Changes - -- Updated dependencies [[`247f5eea8`](https://github.com/Shopify/polaris/commit/247f5eea859b3ab348dcb18c568f18d8d859140e)]: - - @shopify/polaris-tokens@6.10.0 - - @shopify/stylelint-polaris@9.0.3 - -## 0.0.1 - -### Patch Changes - -- [#8713](https://github.com/Shopify/polaris/pull/8713) [`c8bf360f6`](https://github.com/Shopify/polaris/commit/c8bf360f6a72d29d834cf19bf36aceb4e1153c0f) Thanks [@samrose3](https://github.com/samrose3)! - Port Polaris migrations to new codemods package diff --git a/polaris-codemods/jest.config.js b/polaris-codemods/jest.config.js deleted file mode 100644 index b1738c391e5..00000000000 --- a/polaris-codemods/jest.config.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - transform: { - '\\.(js|tsx?)$': [ - 'babel-jest', - {targets: 'current node', envName: 'test', rootMode: 'upward'}, - ], - }, -}; diff --git a/polaris-codemods/package.json b/polaris-codemods/package.json deleted file mode 100644 index b5d2bdc74ca..00000000000 --- a/polaris-codemods/package.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "@shopify/polaris-codemods", - "description": "Codemods for Polaris design system", - "version": "0.1.12", - "private": false, - "license": "MIT", - "author": "Shopify ", - "repository": "https://github.com/Shopify/polaris", - "bugs": { - "url": "https://github.com/Shopify/polaris/issues" - }, - "publishConfig": { - "access": "public", - "@shopify:registry": "https://registry.npmjs.org" - }, - "files": [ - "dist" - ], - "keywords": [ - "shopify", - "polaris", - "codemods" - ], - "main": "codeshift.config.js", - "scripts": { - "build": "tsc --build", - "lint": "TIMING=1 eslint --cache .", - "test": "jest", - "clean": "rm -f .turbo node_modules dist *.tsbuildinfo", - "generate": "plop" - }, - "dependencies": { - "@shopify/polaris-tokens": "^7.5.3", - "@shopify/stylelint-polaris": "^14.0.0", - "postcss": "^8.4.21", - "postcss-scss": "^4.0.6", - "postcss-value-parser": "^4.2.0", - "stylelint": "^14.15.0" - }, - "peerDependencies": { - "jscodeshift": "^0.13.1" - }, - "devDependencies": { - "@shopify/polaris": "^11.12.0", - "@types/jscodeshift": "^0.11.6", - "jscodeshift": "^0.13.1", - "plop": "^3.1.2", - "plop-dir": "^0.1.0", - "prettier": "^2.8.4", - "typescript": "^4.3.5" - } -} diff --git a/polaris-codemods/plopfile.mjs b/polaris-codemods/plopfile.mjs deleted file mode 100644 index 14824ab8c03..00000000000 --- a/polaris-codemods/plopfile.mjs +++ /dev/null @@ -1,56 +0,0 @@ -import * as fs from 'fs'; -import * as url from 'url'; -import * as path from 'path'; - -import {plopDir} from 'plop-dir'; - -const __dirname = path.dirname(url.fileURLToPath(import.meta.url)); - -/** @param {import('plop').NodePlopAPI} plop */ -// eslint-disable-next-line import/no-default-export -export default async function run(plop) { - plop.setGenerator( - 'scss-codemod', - await plopDir({ - plop, - templateDir: path.join(__dirname, './templates/scss-codemod'), - outputDir: path.join(__dirname, './src/codemods'), - prompts: [ - { - name: 'transformName', - message: 'Name of the codemod', - suffix: ' (e.g. v9-scss-replace-function)', - validate: (input) => validateTransformName(plop, input), - }, - ], - }), - ); - - plop.setGenerator( - 'typescript-codemod', - await plopDir({ - plop, - templateDir: path.join(__dirname, './templates/typescript-codemod'), - outputDir: path.join(__dirname, './src/codemods'), - prompts: [ - { - name: 'transformName', - message: 'Name of the codemod', - suffix: ' (e.g. v9-component-replace-prop)', - validate: (input) => validateTransformName(plop, input), - }, - ], - }), - ); -} - -function validateTransformName(plop, input) { - const transformName = plop.renderString('{{kebabCase input}}', { - input, - }); - - return ( - !fs.existsSync(path.join(__dirname, `./src/codemods/${transformName}`)) || - 'That codemod name already exists' - ); -} diff --git a/polaris-codemods/src/codemods/10.0.0/transform.ts b/polaris-codemods/src/codemods/10.0.0/transform.ts deleted file mode 100644 index 4cf2862fc14..00000000000 --- a/polaris-codemods/src/codemods/10.0.0/transform.ts +++ /dev/null @@ -1,33 +0,0 @@ -import path from 'node:path'; - -import type {FileInfo, API, Options} from 'jscodeshift'; - -import {typescript} from '../../utilities/constants'; -import type {TransformInfoOptions} from '../../utilities/types'; -import * as v10ReactReplaceTextComponents from '../v10-react-replace-text-components/transform'; - -const transforms = [v10ReactReplaceTextComponents]; - -const defaultExtensions = typescript.extensions; - -export default function transformer( - fileInfo: FileInfo, - api: API, - options: Options, -) { - return transforms.reduce( - (source, {default: transform, extensions = defaultExtensions}) => { - const extname = path.extname(fileInfo.path); - if (!extensions.includes(extname)) return fileInfo.source; - return transform({...fileInfo, source}, api, options); - }, - fileInfo.source, - ); -} - -export const extensions = Array.from( - new Set([...v10ReactReplaceTextComponents.extensions]), -); -export const options: TransformInfoOptions = { - ...v10ReactReplaceTextComponents.options, -}; diff --git a/polaris-codemods/src/codemods/11.0.0/transform.ts b/polaris-codemods/src/codemods/11.0.0/transform.ts deleted file mode 100644 index c554b0e6935..00000000000 --- a/polaris-codemods/src/codemods/11.0.0/transform.ts +++ /dev/null @@ -1,53 +0,0 @@ -import path from 'node:path'; - -import type {FileInfo, API, Options} from 'jscodeshift'; - -import {scss, typescript} from '../../utilities/constants'; -import type {TransformInfoOptions} from '../../utilities/types'; -import * as v11ReactUpdatePageBreadcrumbs from '../v11-react-update-page-breadcrumbs/transform'; -import * as v11StylesReplaceCustomPropertyBorder from '../v11-styles-replace-custom-property-border/transform'; -import * as v11StylesReplaceCustomPropertyColor from '../v11-styles-replace-custom-property-color/transform'; -import * as v11StylesReplaceCustomPropertyDepth from '../v11-styles-replace-custom-property-depth/transform'; -import * as v11StylesReplaceCustomPropertyLegacy from '../v11-styles-replace-custom-property-legacy/transform'; -import * as v11StylesReplaceCustomPropertyMotion from '../v11-styles-replace-custom-property-motion/transform'; -import * as v11StylesReplaceCustomPropertyZIndex from '../v11-styles-replace-custom-property-z-index/transform'; - -const transforms = [ - v11ReactUpdatePageBreadcrumbs, - v11StylesReplaceCustomPropertyBorder, - v11StylesReplaceCustomPropertyColor, - v11StylesReplaceCustomPropertyDepth, - v11StylesReplaceCustomPropertyLegacy, - v11StylesReplaceCustomPropertyMotion, - v11StylesReplaceCustomPropertyZIndex, -]; - -const defaultExtensions = [...typescript.extensions, ...scss.extensions]; - -export default function transformer( - fileInfo: FileInfo, - api: API, - options: Options, -) { - return transforms.reduce( - (source, {default: transform, extensions = defaultExtensions}) => { - const extname = path.extname(fileInfo.path); - if (!extensions.includes(extname)) return fileInfo.source; - return transform({...fileInfo, source}, api, options); - }, - fileInfo.source, - ); -} - -export const extensions = Array.from( - new Set([ - ...v11ReactUpdatePageBreadcrumbs.extensions, - ...v11StylesReplaceCustomPropertyBorder.extensions, - ...v11StylesReplaceCustomPropertyColor.extensions, - ...v11StylesReplaceCustomPropertyDepth.extensions, - ...v11StylesReplaceCustomPropertyLegacy.extensions, - ...v11StylesReplaceCustomPropertyMotion.extensions, - ...v11StylesReplaceCustomPropertyZIndex.extensions, - ]), -); -export const options: TransformInfoOptions = {}; diff --git a/polaris-codemods/src/codemods/9.0.0/transform.ts b/polaris-codemods/src/codemods/9.0.0/transform.ts deleted file mode 100644 index 173f2bc7d18..00000000000 --- a/polaris-codemods/src/codemods/9.0.0/transform.ts +++ /dev/null @@ -1,84 +0,0 @@ -import path from 'node:path'; - -import type {FileInfo, API, Options} from 'jscodeshift'; - -import * as v9ScssReplaceBorder from '../v9-scss-replace-border/transform'; -import * as v9ScssReplaceBorderRadius from '../v9-scss-replace-border-radius/transform'; -import * as v9ScssReplaceBorderWidth from '../v9-scss-replace-border-width/transform'; -import * as v9ScssReplaceBreakpoints from '../v9-scss-replace-breakpoints/transform'; -import * as v9ScssReplaceColor from '../v9-scss-replace-color/transform'; -import * as v9ScssReplaceDuration from '../v9-scss-replace-duration/transform'; -import * as v9ScssReplaceEasing from '../v9-scss-replace-easing/transform'; -import * as v9ScssReplaceFontFamily from '../v9-scss-replace-font-family/transform'; -import * as v9ScssReplaceFontSize from '../v9-scss-replace-font-size/transform'; -import * as v9ScssReplaceLineHeight from '../v9-scss-replace-line-height/transform'; -import * as v9ScssReplaceSpacing from '../v9-scss-replace-spacing/transform'; -import * as v9ScssReplaceTextEmphasis from '../v9-scss-replace-text-emphasis/transform'; -import * as v9ScssReplaceZIndex from '../v9-scss-replace-z-index/transform'; -import {typescript} from '../../utilities/constants'; - -const transforms = [ - v9ScssReplaceBorder, - v9ScssReplaceBorderRadius, - v9ScssReplaceBorderWidth, - v9ScssReplaceBreakpoints, - v9ScssReplaceColor, - v9ScssReplaceDuration, - v9ScssReplaceEasing, - v9ScssReplaceFontFamily, - v9ScssReplaceFontSize, - v9ScssReplaceLineHeight, - v9ScssReplaceSpacing, - v9ScssReplaceTextEmphasis, - v9ScssReplaceZIndex, -]; - -const defaultExtensions = typescript.extensions; - -export default function transformer( - fileInfo: FileInfo, - api: API, - options: Options, -) { - return transforms.reduce( - (source, {default: transform, extensions = defaultExtensions}) => { - const extname = path.extname(fileInfo.path).replace('.', ''); - if (!extensions.includes(extname)) return fileInfo.source; - return transform({...fileInfo, source}, api, options); - }, - fileInfo.source, - ); -} - -export const extensions = Array.from( - new Set([ - ...v9ScssReplaceBorder.extensions, - ...v9ScssReplaceBorderRadius.extensions, - ...v9ScssReplaceBorderWidth.extensions, - ...v9ScssReplaceBreakpoints.extensions, - ...v9ScssReplaceColor.extensions, - ...v9ScssReplaceDuration.extensions, - ...v9ScssReplaceEasing.extensions, - ...v9ScssReplaceFontFamily.extensions, - ...v9ScssReplaceFontSize.extensions, - ...v9ScssReplaceLineHeight.extensions, - ...v9ScssReplaceSpacing.extensions, - ...v9ScssReplaceTextEmphasis.extensions, - ...v9ScssReplaceZIndex.extensions, - ]), -); -export const options = { - ...v9ScssReplaceBorder.options, - ...v9ScssReplaceBorderRadius.options, - ...v9ScssReplaceBorderWidth.options, - ...v9ScssReplaceBreakpoints.options, - ...v9ScssReplaceColor.options, - ...v9ScssReplaceDuration.options, - ...v9ScssReplaceEasing.options, - ...v9ScssReplaceFontFamily.options, - ...v9ScssReplaceFontSize.options, - ...v9ScssReplaceLineHeight.options, - ...v9ScssReplaceSpacing.options, - ...v9ScssReplaceTextEmphasis.options, - ...v9ScssReplaceZIndex.options, -}; diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx b/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx deleted file mode 100644 index 4be474e3865..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -interface MyComponentProps { - prop?: string; - newProp?: string; - children?: React.ReactNode; -} - -const Child = (props: {prop: string}) => <>{props.prop}; - -function MyComponent(props: MyComponentProps) { - const value = props.newProp || props.prop; - return
{props.children}
; -} - -export function App() { - return ( - - Hello - - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx b/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx deleted file mode 100644 index 9305ddb375b..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -interface MyComponentProps { - prop?: string; - newProp?: string; - children?: React.ReactNode; -} - -const Child = (props: {prop: string}) => <>{props.prop}; - -function MyComponent(props: MyComponentProps) { - const value = props.newProp || props.prop; - return
{props.children}
; -} - -export function App() { - return ( - - Hello - - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/transform.ts b/polaris-codemods/src/codemods/react-rename-component-prop/transform.ts deleted file mode 100644 index 3785fc650ed..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component-prop/transform.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type {API, FileInfo, Options} from 'jscodeshift'; - -import {typescript} from '../../utilities/constants'; -import {renameProps} from '../../utilities/jsx'; - -export default function transformer( - file: FileInfo, - {jscodeshift: j}: API, - options: Options, -) { - if (!options.componentName || !options.from || !options.to) { - throw new Error('Missing required options: componentName, from, to'); - } - - const source = j(file.source); - const componentName = options.componentName; - const props = {[options.from]: options.to}; - - renameProps(j, source, componentName, props); - - return source.toSource(); -} - -export const extensions = typescript.extensions; -export const options = { - relative: typescript.options.relative, - componentName: { - name: 'componentName', - type: 'string', - description: 'The JSX element to target.', - required: true, - }, - from: { - name: 'from', - type: 'string', - description: 'The target prop to rename.', - required: true, - }, - to: { - name: 'to', - type: 'string', - description: 'The desired new prop name.', - required: true, - }, -}; diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx deleted file mode 100644 index 278211d8fdf..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import {Card} from '@shopify/polaris'; - -const MyCard = Card; - -export function App() { - return ( - <> -
hello
- hello - hello - - - - hello - hello - world - - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx deleted file mode 100644 index 137f73424ef..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import {LegacyCard} from '@shopify/polaris'; - -const MyCard = LegacyCard; - -export function App() { - return ( - <> -
hello
- hello - hello - - - - hello - hello - world - - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx deleted file mode 100644 index 60830ff037f..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import {Stack} from '@shopify/polaris'; - -const MyStack = Stack; - -export function App() { - return ( - <> -
hello
- hello - hello - - hello - hello - world - - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx deleted file mode 100644 index ab49d74d730..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import {LegacyStack} from '@shopify/polaris'; - -const MyStack = LegacyStack; - -export function App() { - return ( - <> -
hello
- hello - hello - - hello - hello - world - - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx deleted file mode 100644 index d80b696d34e..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import React from 'react'; -import type {CardProps} from '@shopify/polaris'; - -export interface MyCardProps extends CardProps {} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx deleted file mode 100644 index bd6065aee0c..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import React from 'react'; -import type {LegacyCardProps} from '@shopify/polaris'; - -export interface MyCardProps extends LegacyCardProps {} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx deleted file mode 100644 index 3b0a83177a4..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import {Card as PolarisCard} from '@shopify/polaris'; - -const MyCard = PolarisCard; -export const LegacyCard = () => null; - -export function App() { - return ( - <> - hello - hello - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx deleted file mode 100644 index 535ef3cf617..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import {Card as PolarisCard} from '@shopify/polaris'; - -const MyCard = PolarisCard; -export const /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - LegacyCard = () => null; - -export function App() { - return ( - <> - hello - hello - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx deleted file mode 100644 index f13016e992a..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import {Card as PolarisCard} from '@shopify/polaris'; - -const MyCard = PolarisCard; -const Card = () => null; -const LegacyCard = () => null; - -export function App() { - return ( - <> - hello - hello - local - legacy - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx deleted file mode 100644 index fdd21ea489b..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import {Card as PolarisCard} from '@shopify/polaris'; - -const MyCard = PolarisCard; -const Card = () => null; -const LegacyCard = () => null; - -export function App() { - return ( - <> - hello - hello - local - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - legacy - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx deleted file mode 100644 index db747809228..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import {Card as PolarisCard} from '@shopify/polaris'; - -const MyCard = PolarisCard; - -export function App() { - return ( - <> - hello - hello - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx deleted file mode 100644 index 7e04fd4be1c..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import {LegacyCard} from '@shopify/polaris'; - -const MyCard = LegacyCard; - -export function App() { - return ( - <> - hello - hello - - ); -} diff --git a/polaris-codemods/src/codemods/react-rename-component/transform.ts b/polaris-codemods/src/codemods/react-rename-component/transform.ts deleted file mode 100644 index 30dff6a2647..00000000000 --- a/polaris-codemods/src/codemods/react-rename-component/transform.ts +++ /dev/null @@ -1,218 +0,0 @@ -import type {API, FileInfo, Options} from 'jscodeshift'; - -import {typescript, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants'; -import { - getImportSpecifierName, - hasImportDeclaration, - hasImportSpecifier, - hasImportSpecifiers, - insertImportDeclaration, - insertImportSpecifier, - normalizeImportSourcePaths, - removeImportDeclaration, - removeImportSpecifier, -} from '../../utilities/imports'; -import { - insertCommentBefore, - insertJSXComment, - replaceJSXElement, -} from '../../utilities/jsx'; - -export interface MigrationOptions extends Options { - relative: boolean; - renameFrom: string; - renameTo: string; - renamePropsFrom: string; - renamePropsTo: string; -} - -export const extensions = typescript.extensions; -export const options = { - relative: typescript.options.relative, - renameFrom: { - name: 'renameFrom', - type: 'string', - description: 'The component name to target. (ex: Card)', - required: true, - }, - renameTo: { - name: 'renameTo', - type: 'string', - description: 'The new component name.', - required: true, - }, - renamePropsFrom: { - name: 'renamePropsFrom', - type: 'string', - description: 'The target component props to rename. (ex: CardProps)', - required: true, - }, - renamePropsTo: { - name: 'renamePropsTo', - type: 'string', - description: 'The new component props name.', - required: true, - }, -}; - -export default function transformer( - fileInfo: FileInfo, - {jscodeshift: j}: API, - options: MigrationOptions, -) { - const source = j(fileInfo.source); - - if ( - !options.relative && - !hasImportDeclaration(j, source, '@shopify/polaris') - ) { - return fileInfo.source; - } - - const sourcePaths = normalizeImportSourcePaths(j, source, { - relative: options.relative, - from: options.renameFrom, - to: options.renameTo, - }); - - if (!sourcePaths) return; - - // If renameFrom component name is not imported, exit - if ( - !hasImportSpecifier(j, source, options.renameFrom, sourcePaths.from) && - !hasImportSpecifier(j, source, options.renamePropsFrom, sourcePaths.from) - ) { - return fileInfo.source; - } - - let hasExistingJsx = false; - let hasExistingIdentifier = false; - - // If local renameTo is already used in the file, exit - source.findJSXElements(options.renameTo).forEach((element) => { - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - hasExistingJsx = true; - }); - - if (hasExistingJsx) return source.toSource(); - - // If renameTo is already used as an identifier, exit - source - .find(j.Identifier) - .filter( - (path) => - path.node.name === options.renameTo || - path.node.name === options.renamePropsTo, - ) - .forEach((path) => { - if (path.node.type !== 'Identifier') return; - - insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT); - hasExistingIdentifier = true; - }); - - if (hasExistingIdentifier) return source.toSource(); - - const localElementName = - getImportSpecifierName(j, source, options.renameFrom, sourcePaths.from) || - options.renameFrom; - - const localElementTypeName = getImportSpecifierName( - j, - source, - options.renamePropsFrom, - sourcePaths.from, - ); - - source.find(j.JSXElement).forEach((element) => { - // Handle self-closing elements - if ( - element.node.openingElement.selfClosing === true && - element.node.openingElement.name.type === 'JSXIdentifier' && - element.node.openingElement.name.name === localElementName - ) { - element.node.openingElement.name.name = options.renameTo; - } - - // Handle simple elements - if ( - element.node.openingElement.name.type === 'JSXIdentifier' && - element.node.openingElement.name.name === localElementName - ) { - replaceJSXElement(j, element, options.renameTo); - return; - } - - // Handle self-closing compound elements - if ( - element.node.openingElement.selfClosing === true && - element.node.openingElement.name.type === 'JSXMemberExpression' && - element.node.openingElement.name.object.type === 'JSXIdentifier' && - element.node.openingElement.name.object.name === localElementName - ) { - element.node.openingElement.name.object.name = options.renameTo; - } - - // Handle compound elements - if ( - element.node.openingElement.name.type === 'JSXMemberExpression' && - element.node.openingElement.name.object.type === 'JSXIdentifier' && - element.node.openingElement.name.object.name === localElementName && - element.node.closingElement?.name.type === 'JSXMemberExpression' && - element.node.closingElement?.name.object.type === 'JSXIdentifier' && - element.node.closingElement?.name.object.name === localElementName - ) { - element.node.openingElement.name.object.name = options.renameTo; - element.node.closingElement.name.object.name = options.renameTo; - } - }); - - // Find all references to the renameFrom component and replace them with renameTo - source - .find(j.Identifier) - .filter( - (path) => - path.node.name === localElementName || - path.node.name === localElementTypeName, - ) - .forEach((path) => { - if (path.node.type !== 'Identifier') return; - - if ( - path.node.name === localElementName && - path.parent.value.type !== 'MemberExpression' - ) { - path.node.name = options.renameTo; - } - - if (path.node.name === localElementTypeName) { - path.node.name = options.renamePropsTo; - } - }); - - if (!hasImportSpecifier(j, source, options.renameTo, sourcePaths.to)) { - if (options.relative) { - insertImportDeclaration( - j, - source, - options.renameTo, - sourcePaths.to, - sourcePaths.from, - ); - } else { - insertImportSpecifier(j, source, options.renameTo, sourcePaths.to); - } - } - - // Remove the renameFrom import - if (hasImportSpecifier(j, source, options.renameFrom, sourcePaths.from)) { - removeImportSpecifier(j, source, options.renameFrom, sourcePaths.from); - } - - // Remove the renamePropsFrom import - if (!hasImportSpecifiers(j, source, sourcePaths.from)) { - removeImportDeclaration(j, source, sourcePaths.from); - } - - return source.toSource(); -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss deleted file mode 100644 index c9d22fde45d..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; -@use './styles/overrides'; - -.BaseCase { - padding: 1rem; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss deleted file mode 100644 index 2ae30905231..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use './styles/overrides'; - -.BaseCase { - padding: 1rem; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss deleted file mode 100644 index e97b9461af2..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'global-styles/legacy-polaris-v8' as legacy; - -.BaseCase { - padding: 1rem; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss deleted file mode 100644 index 4e1ce95795f..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss +++ /dev/null @@ -1,3 +0,0 @@ -.BaseCase { - padding: 1rem; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss deleted file mode 100644 index 9568d418175..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'global-styles/legacy-polaris-v8' as v8 with ( - $var1: 1px, - $var2: 2px -); - -.BaseCase { - padding: 16px; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss deleted file mode 100644 index ab66858e793..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss +++ /dev/null @@ -1,3 +0,0 @@ -.BaseCase { - padding: 16px; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss deleted file mode 100644 index cf67cd1b1bb..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'media-queries'; - -.BaseCase { - padding: 1rem; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss deleted file mode 100644 index 4e1ce95795f..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss +++ /dev/null @@ -1,3 +0,0 @@ -.BaseCase { - padding: 1rem; -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss deleted file mode 100644 index 839343ea2ad..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'global-styles/legacy-polaris-v8' as legacy; - -.BaseCase { - padding: legacy.rem(1rem); -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss deleted file mode 100644 index 839343ea2ad..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'global-styles/legacy-polaris-v8' as legacy; - -.BaseCase { - padding: legacy.rem(1rem); -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss deleted file mode 100644 index 4f37a385c25..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.BaseCase { - padding: legacy-polaris-v8.rem(16px); -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss deleted file mode 100644 index 4f37a385c25..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.BaseCase { - padding: legacy-polaris-v8.rem(16px); -} diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts b/polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts deleted file mode 100644 index f1bad87d9b6..00000000000 --- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts +++ /dev/null @@ -1,71 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import postcss from 'postcss'; -import type {Plugin} from 'postcss'; - -import {createInlineComment} from '../../utilities/sass'; -import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants'; -import {matchesStringOrRegExp} from '../../utilities/matches'; - -interface PluginOptions extends Options { - url?: string; -} - -export const extensions = scss.extensions; -export const options = { - url: { - name: 'url', - type: 'string', - description: 'The @use rule URL to replace if unused.', - }, -}; - -const plugin = (options: PluginOptions = {}): Plugin => { - const {url} = options; - - if (!url) { - throw new Error('Missing required options: url'); - } - - return { - postcssPlugin: 'scss-remove-unused-at-use', - Once(root) { - root.walkAtRules('use', (atRule) => { - const atUseParams = atRule.params.replace(/(\s|\n|\r\n?)+/g, ' '); - const atUseURL = atUseParams.match(/(['"])(.+?)\1/)?.[2] ?? ''; - const atUseAsNamespace = atUseParams - .match(/\sas\s+(.+?)(\s|$)/)?.[1] - ?.trim(); - - // Didn't find the target import in file - if (!atUseURL || !matchesStringOrRegExp(atUseURL, url)) { - return; - } - - // const namespace = atUseParams.match(/as\s*((?:[^\s;])+)/)?.[1]; - const atUseURLNamespace = atUseURL.split('/').pop(); - const atUseNamespace = atUseAsNamespace || atUseURLNamespace; - - // Comment if the namespace is using an alias - if (atUseNamespace === '*') { - atRule.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - return; - } - - // Remove target import - if (!root.source?.input.css.includes(`${atUseNamespace}.`)) { - atRule.remove(); - } - }); - }, - }; -}; - -export default function scssRemoveUnusedImport( - file: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(file.source, { - syntax: require('postcss-scss'), - }).css; -} diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss deleted file mode 100644 index 4d705026d5c..00000000000 --- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss +++ /dev/null @@ -1,71 +0,0 @@ -@import 'styles/common'; - -$no-extra-newlines-above-this: 1rem; - -.BaseCase { - padding: 1rem; -} - -.NoInsert { - padding: var(--p-space-4); -} - -.ExistingDisableComment { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: 1rem; -} - -.Nested { - .Keeps { - .Spacing { - padding: 1rem; - } - } -} - -.CombineComment { - /* stylelint-disable-next-line my-original-rule -- original comment */ - padding: 1rem; - /* stylelint-disable-next-line my-original-rule */ - margin: 1rem; - /* stylelint-disable-next-line my-original-rule -- original comment */ - margin-top: var(--p-space-1); -} - -.MultiLineAtRule { - @media screen and (min-width: 1rem), - (min-width: 1rem) and #{1rem} { - grid-column: 1rem; - } -} - -.MultiLineDecl { - margin-top: calc( - (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5 - ); -} - -.AnotherMultiLine { - $vertical-padding: calc( - (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5 - ); -} - -.AtRuleMultilineNoBlock { - @include safe-area-for( - left, - calc(1rem - 1rem + 1rem - 1rem + 1rem - 1rem), - left - ); -} - -.DescriptionlessDisable { - @media print { - // stylelint-disable-next-line declaration-no-important - padding: var(--p-space-4) !important; - } -} - -a:unknown { - padding: var(--p-space-4); -} diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss deleted file mode 100644 index f49efd4cf8f..00000000000 --- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss +++ /dev/null @@ -1,84 +0,0 @@ -@import 'styles/common'; - -// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY -$no-extra-newlines-above-this: 1rem; - -.BaseCase { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: 1rem; -} - -.NoInsert { - padding: var(--p-space-4); -} - -.ExistingDisableComment { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: 1rem; -} - -.Nested { - .Keeps { - .Spacing { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: 1rem; - } - } -} - -.CombineComment { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY, original comment - padding: 1rem; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - margin: 1rem; - /* stylelint-disable-next-line my-original-rule -- original comment */ - margin-top: var(--p-space-1); -} - -.MultiLineAtRule { - // stylelint-disable -- generated by polaris-migrator DO NOT COPY - @media screen and (min-width: 1rem), - (min-width: 1rem) and #{1rem} { - // stylelint-enable - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - grid-column: 1rem; - } -} - -.MultiLineDecl { - // stylelint-disable -- generated by polaris-migrator DO NOT COPY - margin-top: calc( - (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5 - ); - // stylelint-enable -} - -.AnotherMultiLine { - // stylelint-disable -- generated by polaris-migrator DO NOT COPY - $vertical-padding: calc( - (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5 - ); - // stylelint-enable -} - -.AtRuleMultilineNoBlock { - // stylelint-disable -- generated by polaris-migrator DO NOT COPY - @include safe-area-for( - left, - calc(1rem - 1rem + 1rem - 1rem + 1rem - 1rem), - left - ); - // stylelint-enable -} - -.DescriptionlessDisable { - @media print { - // stylelint-disable-next-line declaration-no-important -- generated by polaris-migrator DO NOT COPY - padding: var(--p-space-4) !important; - } -} - -// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY -a:unknown { - padding: var(--p-space-4); -} diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js deleted file mode 100644 index 294af391a1d..00000000000 --- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js +++ /dev/null @@ -1,19 +0,0 @@ -const path = require('path'); - -module.exports = { - customSyntax: 'postcss-scss', - reportDescriptionlessDisables: true, - plugins: [ - path.join( - __dirname, - '../../../../../stylelint-polaris/plugins/at-rule-disallowed-list', - ), - ], - rules: { - 'unit-disallowed-list': ['rem'], - 'selector-pseudo-class-no-unknown': true, - 'polaris/at-rule-disallowed-list': { - include: [/([\w-]+\.)?safe-area-for($|\()/], - }, - }, -}; diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts deleted file mode 100644 index 33c8db96b15..00000000000 --- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts +++ /dev/null @@ -1,150 +0,0 @@ -import os from 'os'; - -import type {API, FileInfo, Options} from 'jscodeshift'; -import type {Node, Comment, Plugin, Root} from 'postcss'; -import postcss from 'postcss'; -import type {StylelintPostcssResult} from 'stylelint'; -import stylelint from 'stylelint'; - -import {scss} from '../../utilities/constants'; - -const crossPlatformNewlineRegExp = /\r\n?|\n/; -const polarisContextMsg = '-- generated by polaris-migrator DO NOT COPY'; - -export const extensions = scss.extensions; - -const plugin = (): Plugin => { - return { - postcssPlugin: 'styles-insert-stylelint-disable', - Once(root, {result}) { - result.messages.forEach(({node}) => { - // If a polaris ignore comment exists above the node already, - // do nothing - if (node.prev()?.text?.includes(polarisContextMsg)) { - return; - } - - const isMultiline = - crossPlatformNewlineRegExp.test(node.value) || - crossPlatformNewlineRegExp.test(node.text) || - crossPlatformNewlineRegExp.test(node.params); - - const commentText = `${ - isMultiline ? 'stylelint-disable' : 'stylelint-disable-next-line' - } ${polarisContextMsg}`; - - const comment = createDisableComment(commentText, node.prev()); - - node.before(comment); - - if (isMultiline) { - (node.type === 'atrule' && node?.nodes?.length) || - node.type === 'rule' - ? node.prepend(createCommentNode('stylelint-enable')) - : node.after(createCommentNode('stylelint-enable')); - } - - deleteExtraNewlinesBeforeNode(node); - }); - - fillDescriptionlessDisables(result, root); - }, - }; -}; - -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; - }); -} - -/** - * Create a postcss comment node in the style: - * `// ${text}` - */ -function createCommentNode(text: string): Comment { - return new postcss.Comment({ - text, - raws: { - left: ' ', - right: '', - inline: true, - }, - }); -} - -/** - * Create a new disable comment with the given text. - * If the prevNode and the text are both disable-next-line - * comments, they are combined into a single comment with their - * description texts seperated by a comma. - */ -function createDisableComment(text: string, prevNode: Comment): Comment { - if ( - prevNode?.type !== 'comment' || - !prevNode.text.includes('stylelint-disable-next-line') || - !text.includes('stylelint-disable-next-line') - ) { - return createCommentNode(text); - } - - const prevDescription = prevNode.text?.split('--')?.[1]?.trim(); - const commentText = prevDescription?.length - ? [text, prevDescription].join(', ') - : text; - - prevNode.remove(); - - return createCommentNode(commentText); -} - -/** - * Reduces the number of newline characters in a node's before - * raws to just one. This is helpful to ensure that there is - * only one newline between a disable-next-line comment and - * the warning node. - */ -function deleteExtraNewlinesBeforeNode(node: Node) { - node.raws.before = `${os.EOL}${node.raws.before.replace( - new RegExp(crossPlatformNewlineRegExp, 'g'), - '', - )}`; -} - -/** - * If report-descriptionless-disables is enabled on stylelint, - * add a generated description to disables that don't have one. - */ -function fillDescriptionlessDisables(result: any, root: Root) { - const stylelintResult = result?.stylelint as StylelintPostcssResult; - - if (stylelintResult?.config?.reportDescriptionlessDisables) { - root.walkComments((comment) => { - if ( - comment.text.includes('stylelint-disable') && - !comment.text.includes('--') - ) { - comment.before( - createCommentNode([comment.text, polarisContextMsg].join(' ')), - ); - comment.remove(); - } - }); - } -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js deleted file mode 100644 index b6d0b2dca80..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js +++ /dev/null @@ -1,15 +0,0 @@ -const colorMap = { - '--p-text': '--p-color-text', - '--p-black': '#000', -}; - -const durationMap = { - '--p-duration-200': '--p-motion-duration-200', - '--p-fast': '100ms', -}; - -// eslint-disable-next-line import/no-anonymous-default-export, import/no-default-export -export default { - color: colorMap, - '/^animation/': durationMap, -}; diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss deleted file mode 100644 index dde97f2af97..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss +++ /dev/null @@ -1,11 +0,0 @@ -.basic { - color: var(--p-text); -} - -.with-fallback-var { - color: var(--p-text, var(--p-text)); -} - -.with-fallback-value { - color: var(--p-text, #000); -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss deleted file mode 100644 index fdd5bf3c85a..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss +++ /dev/null @@ -1,11 +0,0 @@ -.basic { - color: var(--p-color-text); -} - -.with-fallback-var { - color: var(--p-color-text, var(--p-color-text)); -} - -.with-fallback-value { - color: var(--p-color-text, #000); -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss deleted file mode 100644 index aa9e14ecac5..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss +++ /dev/null @@ -1,14 +0,0 @@ -.basic { - animation-duration: var(--p-duration-200); - animation-delay: var(--p-duration-200); -} - -.with-fallback-var { - animation-duration: var(--p-duration-200, var(--p-duration-200)); - animation-delay: var(--p-duration-200, var(--p-duration-200)); -} - -.with-fallback-value { - animation-duration: var(--p-duration-200, 200ms); - animation-delay: var(--p-duration-200, 200ms); -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss deleted file mode 100644 index 8604ad1da1c..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss +++ /dev/null @@ -1,17 +0,0 @@ -.basic { - animation-duration: var(--p-motion-duration-200); - animation-delay: var(--p-motion-duration-200); -} - -.with-fallback-var { - animation-duration: var( - --p-motion-duration-200, - var(--p-motion-duration-200) - ); - animation-delay: var(--p-motion-duration-200, var(--p-motion-duration-200)); -} - -.with-fallback-value { - animation-duration: var(--p-motion-duration-200, 200ms); - animation-delay: var(--p-motion-duration-200, 200ms); -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss deleted file mode 100644 index 175d10b7449..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss +++ /dev/null @@ -1,25 +0,0 @@ -.basic { - color: var(--p-text); - color: var(--p-black); - - animation-duration: var(--p-duration-200); - animation-delay: var(--p-fast); -} - -.with-fallback-var { - color: var(--p-text, var(--p-text)); - color: var(--p-text, var(--p-black)); - color: var(--p-black, var(--p-text)); - - animation-duration: var(--p-duration-200, var(--p-duration-200)); - animation-delay: var(--p-duration-200, var(--p-fast)); - animation-delay: var(--p-fast, var(--p-duration-200)); -} - -.with-fallback-value { - color: var(--p-text, #000); - color: var(--p-black, #111); - - animation-duration: var(--p-duration-200, 200ms); - animation-delay: var(--p-fast, 100ms); -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss deleted file mode 100644 index d7b4e4ec634..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss +++ /dev/null @@ -1,28 +0,0 @@ -.basic { - color: var(--p-color-text); - color: #000; - - animation-duration: var(--p-motion-duration-200); - animation-delay: 100ms; -} - -.with-fallback-var { - color: var(--p-color-text, var(--p-color-text)); - color: var(--p-color-text, #000); - color: #000; - - animation-duration: var( - --p-motion-duration-200, - var(--p-motion-duration-200) - ); - animation-delay: var(--p-motion-duration-200, 100ms); - animation-delay: 100ms; -} - -.with-fallback-value { - color: var(--p-color-text, #000); - color: #000; - - animation-duration: var(--p-motion-duration-200, 200ms); - animation-delay: 100ms; -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss deleted file mode 100644 index dde97f2af97..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss +++ /dev/null @@ -1,11 +0,0 @@ -.basic { - color: var(--p-text); -} - -.with-fallback-var { - color: var(--p-text, var(--p-text)); -} - -.with-fallback-value { - color: var(--p-text, #000); -} diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss deleted file mode 100644 index fdd5bf3c85a..00000000000 --- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss +++ /dev/null @@ -1,11 +0,0 @@ -.basic { - color: var(--p-color-text); -} - -.with-fallback-var { - color: var(--p-color-text, var(--p-color-text)); -} - -.with-fallback-value { - color: var(--p-color-text, #000); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts deleted file mode 100644 index c57e113ec3e..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts +++ /dev/null @@ -1,205 +0,0 @@ -import type { - ASTNode, - Collection, - JSCodeshift, - JSXOpeningElement, - JSXAttribute, -} from 'jscodeshift'; - -import { - hasJSXAttribute, - replaceJSXElement, - replaceJSXAttributes, - insertJSXAttribute, - insertJSXComment, - insertCommentBefore, -} from '../../../utilities/jsx'; -import {isKeyOf} from '../../../utilities/types'; -import { - getImportSpecifierName, - hasImportSpecifier, - hasImportSpecifiers, - insertImportDeclaration, - insertImportSpecifier, - normalizeImportSourcePaths, - removeImportDeclaration, - removeImportSpecifier, -} from '../../../utilities/imports'; -import type {MigrationOptions} from '../transform'; -import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants'; - -const displayTextElements = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']); - -const defaultDisplayTextElement = 'p'; - -const displayTextSizeMap = { - small: 'headingLg', - medium: 'headingXl', - large: 'heading2xl', - extraLarge: 'heading4xl', -}; - -const defaultDisplayTextSize = 'medium'; - -/** - * Replace with the component - */ -export function replaceDisplayText( - j: JSCodeshift, - source: Collection, - options: MigrationOptions, -) { - const sourcePaths = normalizeImportSourcePaths(j, source, { - relative: options.relative, - from: 'DisplayText', - to: 'Text', - }); - - if (!sourcePaths) return; - if ( - !hasImportSpecifier(j, source, 'DisplayText', sourcePaths.from) && - !hasImportSpecifier(j, source, 'DisplayTextProps', sourcePaths.from) - ) { - return; - } - - const localElementName = - getImportSpecifierName(j, source, 'DisplayText', sourcePaths.from) || - 'DisplayText'; - - const localElementTypeName = getImportSpecifierName( - j, - source, - 'DisplayTextProps', - sourcePaths.from, - ); - - let canInsertTextImport = false; - let canRemoveDisplayTextImport = Boolean(!localElementTypeName); - - source.findJSXElements(localElementName).forEach((element) => { - const allAttributes = - (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement) - .attributes ?? []; - - if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) { - canRemoveDisplayTextImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - - const jsxAttributes = allAttributes as JSXAttribute[]; - - const elementAttribute = jsxAttributes.find( - (attribute) => attribute.name.name === 'element', - ); - - let elementValue = defaultDisplayTextElement; - - if (elementAttribute) { - const elementAttributeValue = elementAttribute.value; - - if ( - elementAttributeValue?.type === 'StringLiteral' && - displayTextElements.has(elementAttributeValue.value) - ) { - elementValue = elementAttributeValue.value; - } else { - canRemoveDisplayTextImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - } - - const sizeAttribute = jsxAttributes.find( - (attribute) => attribute.name.name === 'size', - ); - - let sizeValue: keyof typeof displayTextSizeMap = defaultDisplayTextSize; - - if (sizeAttribute) { - const sizeAttributeValue = sizeAttribute.value; - - if ( - sizeAttributeValue?.type === 'StringLiteral' && - isKeyOf(displayTextSizeMap, sizeAttributeValue.value) - ) { - sizeValue = sizeAttributeValue.value; - } else { - canRemoveDisplayTextImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - } - - canInsertTextImport = true; - - replaceJSXElement(j, element, 'Text'); - - if (!hasJSXAttribute(j, element, 'size')) { - insertJSXAttribute(j, element, 'variant', displayTextSizeMap[sizeValue]); - } else { - replaceJSXAttributes( - j, - element, - 'size', - 'variant', - displayTextSizeMap[sizeValue], - ); - } - - if (!hasJSXAttribute(j, element, 'element')) { - insertJSXAttribute(j, element, 'as', elementValue); - } else { - replaceJSXAttributes(j, element, 'element', 'as', elementValue); - } - }); - - source - .find(j.Identifier) - .filter( - (path) => - path.node.name === localElementName || - path.node.name === localElementTypeName, - ) - .forEach((path) => { - if (path.node.type !== 'Identifier') return; - - if (path.parent.value.type !== 'ImportSpecifier') { - canRemoveDisplayTextImport = false; - } - - insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT); - - if (path.node.name === localElementName) { - insertCommentBefore(j, path, 'Replace with: Text'); - } else { - insertCommentBefore(j, path, 'Replace with: TextProps'); - } - }); - - if (canInsertTextImport) { - if (!hasImportSpecifier(j, source, 'Text', sourcePaths.to)) { - if (options.relative) { - insertImportDeclaration( - j, - source, - 'Text', - sourcePaths.to, - sourcePaths.from, - ); - } else { - insertImportSpecifier(j, source, 'Text', sourcePaths.to); - } - } - } - - if (canRemoveDisplayTextImport) { - if (hasImportSpecifier(j, source, 'DisplayText', sourcePaths.from)) { - removeImportSpecifier(j, source, 'DisplayText', sourcePaths.from); - } - if (!hasImportSpecifiers(j, source, sourcePaths.from)) { - removeImportDeclaration(j, source, sourcePaths.from); - } - } -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts deleted file mode 100644 index 4541412f7ef..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts +++ /dev/null @@ -1,217 +0,0 @@ -import type { - ASTNode, - Collection, - JSCodeshift, - JSXAttribute, - JSXOpeningElement, -} from 'jscodeshift'; - -import { - hasJSXAttribute, - insertJSXAttribute, - insertJSXComment, - insertCommentBefore, - replaceJSXAttributes, - replaceJSXElement, -} from '../../../utilities/jsx'; -import { - getImportSpecifierName, - hasImportSpecifier, - hasImportSpecifiers, - insertImportDeclaration, - insertImportSpecifier, - normalizeImportSourcePaths, - removeImportDeclaration, - removeImportSpecifier, -} from '../../../utilities/imports'; -import type {MigrationOptions} from '../transform'; -import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants'; -import {isKeyOf} from '../../../utilities/types'; - -export const components = { - Heading: { - validElements: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']), - defaultElement: 'h2', - as: 'h2', - variant: 'headingMd', - }, - Subheading: { - validElements: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']), - defaultElement: 'h3', - as: 'h3', - variant: 'headingXs', - }, - Caption: { - validElements: new Set(), - defaultElement: undefined, - as: 'p', - variant: 'bodySm', - }, - VisuallyHidden: { - validElements: new Set(), - defaultElement: undefined, - as: 'span', - variant: 'bodySm', - }, -}; - -function replaceOtherComponent( - j: JSCodeshift, - source: Collection, - componentName: keyof typeof components, - relative?: boolean, -) { - const {variant, as, validElements, defaultElement} = - components[componentName]; - const sourcePaths = normalizeImportSourcePaths(j, source, { - relative, - from: componentName, - to: 'Text', - }); - - if (!sourcePaths) return; - if ( - !hasImportSpecifier(j, source, componentName, sourcePaths.from) && - !hasImportSpecifier(j, source, `${componentName}Props`, sourcePaths.from) - ) { - return; - } - - const localElementName = - getImportSpecifierName(j, source, componentName, sourcePaths.from) || - componentName; - - const localElementTypeName = getImportSpecifierName( - j, - source, - `${componentName}Props`, - sourcePaths.from, - ); - - let canInsertTextImport = false; - let canRemoveComponentImport = Boolean(!localElementTypeName); - - source.findJSXElements(localElementName).forEach((element) => { - const allAttributes = - (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement) - .attributes ?? []; - - if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) { - canRemoveComponentImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - - const jsxAttributes = allAttributes as JSXAttribute[]; - - const elementAttribute = jsxAttributes.find( - (attribute) => attribute.name.name === 'element', - ); - - let elementValue: string | undefined = defaultElement; - - if (elementAttribute) { - const elementAttributeValue = elementAttribute.value; - - if ( - elementAttributeValue?.type === 'StringLiteral' && - validElements.has(elementAttributeValue.value) - ) { - elementValue = elementAttributeValue.value; - } else { - canRemoveComponentImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - } - - canInsertTextImport = true; - - replaceJSXElement(j, element, 'Text'); - insertJSXAttribute(j, element, 'variant', variant); - - if (hasJSXAttribute(j, element, 'element')) { - replaceJSXAttributes(j, element, 'element', 'as', elementValue ?? as); - } else { - insertJSXAttribute(j, element, 'as', elementValue ?? as); - } - - if (componentName === 'VisuallyHidden') { - insertJSXAttribute(j, element, 'visuallyHidden'); - } - }); - - source - .find(j.Identifier) - .filter( - (path) => - path.node.name === localElementName || - path.node.name === localElementTypeName, - ) - .forEach((path) => { - if (path.node.type !== 'Identifier') return; - - if (path.parent.value.type !== 'ImportSpecifier') { - canRemoveComponentImport = false; - } - - insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT); - - if (path.node.name === localElementName) { - insertCommentBefore(j, path, 'Replace with: Text'); - } else { - insertCommentBefore(j, path, 'Replace with: TextProps'); - } - }); - - if (canInsertTextImport) { - if (!hasImportSpecifier(j, source, 'Text', sourcePaths.to)) { - if (relative) { - insertImportDeclaration( - j, - source, - 'Text', - sourcePaths.to, - sourcePaths.from, - ); - } else { - insertImportSpecifier(j, source, 'Text', sourcePaths.to); - } - } - } - - if (canRemoveComponentImport) { - if (hasImportSpecifier(j, source, componentName, sourcePaths.from)) { - removeImportSpecifier(j, source, componentName, sourcePaths.from); - } - if (!hasImportSpecifiers(j, source, sourcePaths.from)) { - removeImportDeclaration(j, source, sourcePaths.from); - } - } -} - -/** - * Replace , , , and with the component - */ -export function replaceOther( - j: JSCodeshift, - source: Collection, - options: MigrationOptions, -) { - if (options.componentName && !isKeyOf(components, options.componentName)) { - throw new Error(`Unsupported component name: ${options.componentName}`); - } - - if (options.componentName) { - replaceOtherComponent(j, source, options.componentName, options.relative); - } else { - Object.keys(components).forEach((componentName) => - replaceOtherComponent( - j, - source, - componentName as keyof typeof components, - options.relative, - ), - ); - } -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts deleted file mode 100644 index d1836fd52f5..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts +++ /dev/null @@ -1,209 +0,0 @@ -import type { - ASTNode, - Collection, - JSCodeshift, - JSXAttribute, - JSXOpeningElement, -} from 'jscodeshift'; - -import { - insertCommentBefore, - insertJSXAttribute, - insertJSXComment, - removeJSXAttributes, - replaceJSXElement, -} from '../../../utilities/jsx'; -import { - getImportSpecifierName, - hasImportSpecifier, - hasImportSpecifiers, - insertImportDeclaration, - insertImportSpecifier, - normalizeImportSourcePaths, - removeImportDeclaration, - removeImportSpecifier, -} from '../../../utilities/imports'; -import type {MigrationOptions} from '../transform'; -import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants'; -import {isKeyOf} from '../../../utilities/types'; - -const variationMap = { - strong: {fontWeight: 'semibold'}, - subdued: {color: 'subdued'}, - positive: {color: 'success'}, - negative: {color: 'critical'}, - warning: {color: 'warning'}, - code: {}, -}; - -/** - * Replace with the component - */ -export function replaceTextStyle( - j: JSCodeshift, - source: Collection, - options: MigrationOptions, -) { - const sourcePaths = normalizeImportSourcePaths(j, source, { - relative: options.relative, - from: 'TextStyle', - to: 'Text', - }); - - if (!sourcePaths) return; - if ( - !hasImportSpecifier(j, source, 'TextStyle', sourcePaths.from) && - !hasImportSpecifier(j, source, 'TextStyleProps', sourcePaths.from) - ) { - return; - } - - const localElementName = - getImportSpecifierName(j, source, 'TextStyle', sourcePaths.from) || - 'TextStyle'; - - const localElementTypeName = getImportSpecifierName( - j, - source, - 'TextStyleProps', - sourcePaths.from, - ); - - let canInsertTextImport = false; - let canRemoveTextStyleImport = Boolean(!localElementTypeName); - let canInsertInlineCodeImport = false; - - source.findJSXElements(localElementName).forEach((element) => { - const allAttributes = - (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement) - .attributes ?? []; - - if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) { - canRemoveTextStyleImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - - const jsxAttributes = allAttributes as JSXAttribute[]; - - const variationAttribute = jsxAttributes.find( - (attribute) => attribute.name.name === 'variation', - ); - - let variationValue: keyof typeof variationMap | undefined; - - if (variationAttribute) { - const variationAttributeValue = variationAttribute.value; - - if ( - variationAttributeValue?.type === 'StringLiteral' && - isKeyOf(variationMap, variationAttributeValue.value) - ) { - variationValue = variationAttributeValue.value; - } else { - canRemoveTextStyleImport = false; - insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT); - return; - } - } - - canInsertTextImport = true; - - replaceJSXElement(j, element, 'Text'); - insertJSXAttribute(j, element, 'variant', 'bodyMd'); - insertJSXAttribute(j, element, 'as', 'span'); - removeJSXAttributes(j, element, 'variation'); - - if (typeof variationValue === 'undefined') return; - - if (variationValue === 'code') { - canInsertInlineCodeImport = true; - - const InlineCode = j.jsxElement( - j.jsxOpeningElement(j.jsxIdentifier('InlineCode')), - j.jsxClosingElement(j.jsxIdentifier('InlineCode')), - element.node.children, - ); - - element.replace( - j.jsxElement(element.node.openingElement, element.node.closingElement, [ - InlineCode, - ]), - ); - - return; - } - - Object.entries(variationMap[variationValue]).forEach(([name, value]) => { - insertJSXAttribute(j, element, name, value); - }); - }); - - source - .find(j.Identifier) - .filter( - (path) => - path.node.name === localElementName || - path.node.name === localElementTypeName, - ) - .forEach((path) => { - if (path.node.type !== 'Identifier') return; - - if (path.parent.value.type !== 'ImportSpecifier') { - canRemoveTextStyleImport = false; - } - - insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT); - - if (path.node.name === localElementName) { - insertCommentBefore(j, path, 'Replace with: Text'); - } else { - insertCommentBefore(j, path, 'Replace with: TextProps'); - } - }); - - if (canInsertTextImport) { - if (!hasImportSpecifier(j, source, 'Text', sourcePaths.to)) { - if (options.relative) { - insertImportDeclaration( - j, - source, - 'Text', - sourcePaths.to, - sourcePaths.from, - ); - } else { - insertImportSpecifier(j, source, 'Text', sourcePaths.to); - } - } - } - - const inlineTextSourcePath = options.relative - ? sourcePaths.from.replace('TextStyle', 'InlineCode') - : '@shopify/polaris'; - - if (canInsertInlineCodeImport) { - if (!hasImportSpecifier(j, source, 'InlineCode', inlineTextSourcePath)) { - if (options.relative) { - insertImportDeclaration( - j, - source, - 'InlineCode', - inlineTextSourcePath, - sourcePaths.to, - ); - } else { - insertImportSpecifier(j, source, 'InlineCode', inlineTextSourcePath); - } - } - } - - if (canRemoveTextStyleImport) { - if (hasImportSpecifier(j, source, 'TextStyle', sourcePaths.from)) { - removeImportSpecifier(j, source, 'TextStyle', sourcePaths.from); - } - if (!hasImportSpecifiers(j, source, sourcePaths.from)) { - removeImportDeclaration(j, source, sourcePaths.from); - } - } -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx deleted file mode 100644 index d74f6d01b66..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { - Caption, - DisplayText, - Heading, - Subheading, - TextStyle, - VisuallyHidden, -} from '@shopify/polaris'; - -export function App() { - return ( - <> - Caption - DisplayText - Heading - Subheading - TextStyle - Default - TextStyle - InlineCode - VisuallyHidden - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx deleted file mode 100644 index 92ddf39c233..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import {Text, InlineCode} from '@shopify/polaris'; - -export function App() { - return ( - <> - - Caption - - - DisplayText - - - Heading - - - Subheading - - - TextStyle - Default - - - TextStyle - InlineCode - - - VisuallyHidden - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx deleted file mode 100644 index ac71d0e75f7..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import {Caption, DisplayText} from '@shopify/polaris'; - -export function App() { - const MyCaption = Caption; - - return ( - <> - MyCaption - Caption - DisplayText - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx deleted file mode 100644 index 4ad56081887..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - Caption, - Text, -} from '@shopify/polaris'; - -export function App() { - const MyCaption = - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - Caption; - - return ( - <> - MyCaption - - Caption - - - DisplayText - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx deleted file mode 100644 index c7a5847f131..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { - Caption, - DisplayText, - Heading, - Subheading, - TextStyle, -} from '@shopify/polaris'; - -declare const captionProps: {children: string}; -declare const element: string; -declare function getVariation(): 'positive'; - -export function App() { - return ( - <> - DisplayText - - Heading - Default - Heading - Invalid - Subheading - Default - Subheading - Unknown - TextStyle - Unknown - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx deleted file mode 100644 index 80f96e965ac..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - Caption, - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - Heading, - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - Subheading, - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - TextStyle, - Text, -} from '@shopify/polaris'; - -declare const captionProps: {children: string}; -declare const element: string; -declare function getVariation(): 'positive'; - -export function App() { - return ( - <> - - DisplayText - - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - - - Heading - Default - - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - Heading - Invalid - - Subheading - Default - - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - Subheading - Unknown - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - TextStyle - Unknown - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx deleted file mode 100644 index f82c7899701..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import type {CaptionProps} from '@shopify/polaris'; -import {Caption, DisplayText} from '@shopify/polaris'; - -declare function MyCaption(props: CaptionProps): JSX.Element; - -export function App() { - return ( - <> - MyCaption - Caption - DisplayText - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx deleted file mode 100644 index 24f6a112286..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import type { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - CaptionProps, -} from '@shopify/polaris'; -import { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - Caption, - Text, -} from '@shopify/polaris'; - -declare function MyCaption( - props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - CaptionProps, -): JSX.Element; - -export function App() { - return ( - <> - MyCaption - - Caption - - - DisplayText - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx deleted file mode 100644 index e82264d9e71..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import type {TextStyleProps} from '@shopify/polaris'; -import { - DisplayText, - Heading, - Subheading, - Caption, - TextStyle, - VisuallyHidden, -} from '@shopify/polaris'; - -const noop = (..._: any) => {}; - -export function App() { - const textStyle = TextStyle; - const textStyleProps: TextStyleProps = { - variation: 'positive', - }; - - const MyDisplayText = DisplayText; - - noop(textStyle); - - return ( - <> - Display text - Display text - Display text - Display text - Display text - Heading - Heading - Subheading - Subheading - Caption - Strong - Positive - Negative - Warning - Code - - Code - - 0.5 ? 'positive' : 'negative'}> - Code - - Positive - Hidden text - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx deleted file mode 100644 index 832b1862710..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react'; -import type { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps, -} from '@shopify/polaris'; -import { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - DisplayText, - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - TextStyle, - Text, - InlineCode, -} from '@shopify/polaris'; - -const noop = (..._: any) => {}; - -export function App() { - const textStyle = - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - TextStyle; - const textStyleProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps = { - variation: 'positive', - }; - - const MyDisplayText = - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - DisplayText; - - noop(textStyle); - - return ( - <> - - Display text - - - Display text - - - Display text - - - Display text - - - Display text - - - Heading - - - Heading - - - Subheading - - - Subheading - - - Caption - - - Strong - - - Positive - - - Negative - - - Warning - - - Code - - - - Code - - - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - 0.5 ? 'positive' : 'negative'}> - Code - - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - Positive - - Hidden text - - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx deleted file mode 100644 index bc45c624cf4..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx +++ /dev/null @@ -1,33 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { - DisplayText, - Caption, - Heading, - Subheading, - TextStyle, - VisuallyHidden, -} from '@shopify/polaris'; - -export function App() { - return ( - <> - Display text - Display text - Display text - Display text - Display text - Heading - Heading - Subheading - Subheading - Caption - Strong - Positive - Negative - Warning - Code - Hidden text - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx deleted file mode 100644 index 14bce256408..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { - DisplayText, - Caption, - Subheading, - TextStyle, - VisuallyHidden, - Text, -} from '@shopify/polaris'; - -export function App() { - return ( - <> - Display text - Display text - Display text - Display text - Display text - - Heading - - - Heading - - Subheading - Subheading - Caption - Strong - Positive - Negative - Warning - Code - Hidden text - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx deleted file mode 100644 index c9363744f98..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import type {HeadingProps} from '@shopify/polaris'; -import {Subheading} from '@shopify/polaris'; - -const MyHeading = (_props: HeadingProps) => { - return null; -}; - -export function App() { - const headingProps: HeadingProps = { - element: 'h3', - }; - - return ( - <> - Subheading - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx deleted file mode 100644 index 75d5576ac52..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import type { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - HeadingProps, -} from '@shopify/polaris'; -import {Text} from '@shopify/polaris'; - -const MyHeading = ( - _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - HeadingProps, -) => { - return null; -}; - -export function App() { - const headingProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - HeadingProps = { - element: 'h3', - }; - - return ( - <> - - Subheading - - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx deleted file mode 100644 index 2459942aa53..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx +++ /dev/null @@ -1,8 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import {DisplayText} from '../DisplayText'; - -export function App() { - return Display text; -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx deleted file mode 100644 index 0b2165fa42b..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx +++ /dev/null @@ -1,12 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import {Text} from '../Text'; - -export function App() { - return ( - - Display text - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx deleted file mode 100644 index e8b245df74d..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import type {HeadingProps} from '../Heading'; -import {TextStyle} from '../TextStyle'; - -const MyHeading = (_props: HeadingProps) => { - return null; -}; - -export function App() { - const headingProps: HeadingProps = { - element: 'h3', - }; - - return ( - <> - Warning - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx deleted file mode 100644 index 96fdf6212a6..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx +++ /dev/null @@ -1,34 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import type { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - HeadingProps, -} from '../Heading'; -import {Text} from '../Text'; - -const MyHeading = ( - _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - HeadingProps, -) => { - return null; -}; - -export function App() { - const headingProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - HeadingProps = { - element: 'h3', - }; - - return ( - <> - - Warning - - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx deleted file mode 100644 index 538adb29ef6..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import type {TextStyleProps} from '../TextStyle'; - -const MyTextStyle = (_props: TextStyleProps) => { - return null; -}; - -export function App() { - const textStyleProps: TextStyleProps = { - variation: 'positive', - }; - - return ; -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx deleted file mode 100644 index 6e1d5eaad6a..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx +++ /dev/null @@ -1,26 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import type { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps, -} from '../TextStyle'; - -const MyTextStyle = ( - _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps, -) => { - return null; -}; - -export function App() { - const textStyleProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps = { - variation: 'positive', - }; - - return ; -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx deleted file mode 100644 index 26f7d52c423..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import {DisplayText} from '../DisplayText'; -import {Heading} from '../Heading'; -import {Subheading} from '../Subheading'; -import {Caption} from '../Caption'; -import {TextStyle} from '../TextStyle'; -import {VisuallyHidden} from '../VisuallyHidden'; - -export function App() { - return ( - <> - Display text - Display text - Display text - Display text - Display text - Heading - Heading - Subheading - Subheading - Caption - Strong - Positive - Negative - Warning - Code - Hidden text - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx deleted file mode 100644 index 38cea8f97a9..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx +++ /dev/null @@ -1,64 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: Text */ - DisplayText, -} from '../DisplayText'; -import {Text} from '../Text'; -import {InlineCode} from '../InlineCode'; - -export function App() { - return ( - <> - {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */} - Display text - - Display text - - - Display text - - - Display text - - - Display text - - - Heading - - - Heading - - - Subheading - - - Subheading - - - Caption - - - Strong - - - Positive - - - Negative - - - Warning - - - Code - - - Hidden text - - - ); -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx deleted file mode 100644 index 269155605f5..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import type {TextStyleProps} from '@shopify/polaris'; - -const MyTextStyle = (_props: TextStyleProps) => { - return null; -}; - -export function App() { - const textStyleProps: TextStyleProps = { - variation: 'positive', - }; - - return ; -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx deleted file mode 100644 index 6e35285fdbe..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import type { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps, -} from '@shopify/polaris'; - -const MyTextStyle = ( - _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps, -) => { - return null; -}; - -export function App() { - const textStyleProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* Replace with: TextProps */ - TextStyleProps = { - variation: 'positive', - }; - - return ; -} diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts deleted file mode 100644 index ca0cb3e21ed..00000000000 --- a/polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts +++ /dev/null @@ -1,56 +0,0 @@ -import type {API, FileInfo, Options} from 'jscodeshift'; - -import {typescript} from '../../utilities/constants'; -import {hasImportDeclaration} from '../../utilities/imports'; -import type {TransformInfo} from '../../utilities/types'; - -import {replaceDisplayText} from './steps/replace-display-text'; -import type {components} from './steps/replace-other'; -import {replaceOther} from './steps/replace-other'; -import {replaceTextStyle} from './steps/replace-text-style'; - -export interface MigrationOptions extends Options { - relative?: boolean; - componentName?: keyof typeof components | 'DisplayText' | 'TextStyle'; -} - -export const extensions = typescript.extensions; -export const options: TransformInfo['options'] = { - relative: typescript.options.relative, - componentName: { - name: 'componentName', - type: 'string', - description: 'Target only a specific component. (DisplayText or TextStyle)', - }, -}; - -export default function transformer( - file: FileInfo, - {jscodeshift: j}: API, - options: MigrationOptions, -) { - const source = j(file.source); - - if ( - !options.relative && - !hasImportDeclaration(j, source, '@shopify/polaris') - ) { - return file.source; - } - - if (options.componentName) { - if (options.componentName === 'DisplayText') { - replaceDisplayText(j, source, options); - } else if (options.componentName === 'TextStyle') { - replaceTextStyle(j, source, options); - } else { - replaceOther(j, source, options); - } - } else { - replaceDisplayText(j, source, options); - replaceOther(j, source, options); - replaceTextStyle(j, source, options); - } - - return source.toSource(); -} diff --git a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx b/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx deleted file mode 100644 index 9c1bb22d4ca..00000000000 --- a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import {Page} from '@shopify/polaris'; - -export function App({ - breadcrumbProps = [{url: '/testing', content: 'Breadcrumb'}], -}) { - const breadcrumbs = [{url: '/testing', content: 'Breadcrumb'}]; - const getBreadcrumbs = () => [{url: '/testing', content: 'Breadcrumb'}]; - return ( - <> - - hello - - - hello - - testing - testing - testing - testing - - ); -} diff --git a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx b/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx deleted file mode 100644 index 301c99ebc69..00000000000 --- a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import {Page} from '@shopify/polaris'; - -export function App({ - breadcrumbProps = [{url: '/testing', content: 'Breadcrumb'}], -}) { - const breadcrumbs = [{url: '/testing', content: 'Breadcrumb'}]; - const getBreadcrumbs = () => [{url: '/testing', content: 'Breadcrumb'}]; - return ( - <> - hello - hello - testing - - testing - - - testing - - - testing - - - ); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss deleted file mode 100644 index 45d0f083186..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss +++ /dev/null @@ -1,10 +0,0 @@ -.border { - border-radius: var(--p-border-radius-base); - border-radius: var(--p-border-radius-large); - border-radius: var(--p-border-radius-half); - border: var(--p-border-base); - border: var(--p-border-dark); - border: var(--p-border-transparent); - border: var(--p-border-divider); - border: var(--p-border-divider-on-dark); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss deleted file mode 100644 index f587fc72324..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss +++ /dev/null @@ -1,10 +0,0 @@ -.border { - border-radius: var(--p-border-radius-1); - border-radius: var(--p-border-radius-2); - border-radius: var(--p-border-radius-full); - border: var(--p-border-width-1) solid var(--p-color-border-subdued); - border: var(--p-border-width-1) solid var(--p-color-border); - border: var(--p-border-width-1) solid transparent; - border: var(--p-border-width-1) solid var(--p-color-border-subdued); - border: var(--p-border-width-1) solid var(--p-color-border-inverse); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss deleted file mode 100644 index 4122b11ffba..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss +++ /dev/null @@ -1,16 +0,0 @@ -.basic { - color: var(--p-text); - color: var(--p-interactive); - background: var(--p-surface); - background: var(--p-interactive); - background-color: var(--p-surface); - border: var(--p-border-width-1) solid var(--p-border); - border: var(--p-border-width-1) solid var(--p-interactive); - border-color: var(--p-border); - outline: var(--p-border-width-1) solid var(--p-border); - outline: var(--p-border-width-1) solid var(--p-interactive); - outline-color: var(--p-border); - fill: var(--p-icon); - fill: var(--p-interactive); - box-shadow: inset 0 0 var(--p-border-width-1) var(--p-border); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss deleted file mode 100644 index f87e5407ff8..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss +++ /dev/null @@ -1,16 +0,0 @@ -.basic { - color: var(--p-color-text); - color: var(--p-color-text-interactive); - background: var(--p-color-bg); - background: var(--p-color-bg-interactive); - background-color: var(--p-color-bg); - border: var(--p-border-width-1) solid var(--p-color-border); - border: var(--p-border-width-1) solid var(--p-color-border-interactive); - border-color: var(--p-color-border); - outline: var(--p-border-width-1) solid var(--p-color-border); - outline: var(--p-border-width-1) solid var(--p-color-border-interactive); - outline-color: var(--p-color-border); - fill: var(--p-color-icon); - fill: var(--p-color-icon-interactive); - box-shadow: inset 0 0 var(--p-border-width-1) var(--p-color-border); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss deleted file mode 100644 index 696a0f67873..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss +++ /dev/null @@ -1,14 +0,0 @@ -.depth { - box-shadow: var(--p-shadow-transparent); - box-shadow: var(--p-shadow-faint); - box-shadow: var(--p-shadow-base); - box-shadow: var(--p-shadow-deep); - box-shadow: var(--p-shadow-button); - box-shadow: var(--p-shadow-top-bar); - box-shadow: var(--p-shadow-card); - box-shadow: var(--p-shadow-popover); - box-shadow: var(--p-shadow-layer); - box-shadow: var(--p-shadow-modal); - box-shadow: var(--p-shadows-inset-button); - box-shadow: var(--p-shadows-inset-button-pressed); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss deleted file mode 100644 index b58401f0ba2..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss +++ /dev/null @@ -1,14 +0,0 @@ -.depth { - box-shadow: var(--p-shadow-none); - box-shadow: var(--p-shadow-sm); - box-shadow: var(--p-shadow-md); - box-shadow: var(--p-shadow-md); - box-shadow: var(--p-shadow-sm); - box-shadow: var(--p-shadow-sm); - box-shadow: var(--p-shadow-md); - box-shadow: var(--p-shadow-xl); - box-shadow: var(--p-shadow-2xl); - box-shadow: var(--p-shadow-2xl); - box-shadow: var(--p-shadow-none); - box-shadow: var(--p-shadow-inset-md); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss deleted file mode 100644 index d2ea19b7f72..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss +++ /dev/null @@ -1,20 +0,0 @@ -.legacy { - z-index: var(--p-override-loading-z-index); - width: var(--p-choice-size); - width: var(--p-icon-size-small); - width: var(--p-icon-size-medium); - margin: var(--p-choice-margin); - border-width: var(--p-control-border-width); - box-shadow: var(--p-banner-border-default); - box-shadow: var(--p-banner-border-success); - box-shadow: var(--p-banner-border-highlight); - box-shadow: var(--p-banner-border-warning); - box-shadow: var(--p-banner-border-critical); - border: var(--p-thin-border-subdued); - margin: var(--p-text-field-spinner-offset); - margin-left: var(--p-text-field-focus-ring-offset); - padding: var(--p-button-group-item-spacing); - width: var(--p-range-slider-thumb-size-base); - width: var(--p-range-slider-thumb-size-active); - margin: var(--p-frame-offset); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss deleted file mode 100644 index 8ac792fe4d5..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss +++ /dev/null @@ -1,29 +0,0 @@ -.legacy { - z-index: var(--p-z-index-6); - width: 1.25rem; - width: 0.5rem; - width: 1.25rem; - margin: var(--p-space-025); - border-width: var(--p-border-width-2); - box-shadow: inset 0 (--p-border-width-1) 0 0 var(--p-color-border-strong), - inset 0 0 0 (--p-border-width-1) var(--p-color-border-strong); - box-shadow: inset 0 (--p-border-width-1) 0 0 - var(--p-color-border-success-subdued), - inset 0 0 0 (--p-border-width-1) var(--p-color-border-success-subdued); - box-shadow: inset 0 (--p-border-width-1) 0 0 - var(--p-color-border-info-subdued), - inset 0 0 0 (--p-border-width-1) var(--p-color-border-info-subdued); - box-shadow: inset 0 (--p-border-width-1) 0 0 - var(--p-color-border-caution-subdued), - inset 0 0 0 (--p-border-width-1) var(--p-color-border-caution-subdued); - box-shadow: inset 0 (--p-border-width-1) 0 0 - var(--p-color-border-critical-subdued), - inset 0 0 0 (--p-border-width-1) var(--p-color-border-critical-subdued); - border: var(--p-border-width-1) solid var(--p-color-border-subdued); - margin: var(--p-space-05); - margin-left: calc(-1 * var(--p-space-1)); - padding: calc(-1 * var(--p-space-025)); - width: 1rem; - width: 1.5rem; - margin: 0; -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss deleted file mode 100644 index f828c8d74fb..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss +++ /dev/null @@ -1,25 +0,0 @@ -.motion { - transition-timing-function: var(--p-linear); - transition-timing-function: var(--p-ease-in-out); - transition-timing-function: var(--p-ease-out); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-50); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-150); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-250); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-350); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-450); - transition-duration: var(--p-duration-500); - transition-duration: var(--p-duration-5000); - animation-name: var(--p-keyframes-bounce); - animation-name: var(--p-keyframes-fade-in); - animation-name: var(--p-keyframes-pulse); - animation-name: var(--p-keyframes-spin); - animation-name: var(--p-keyframes-appear-above); - animation-name: var(--p-keyframes-appear-below); -} diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss deleted file mode 100644 index eb8e697c774..00000000000 --- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss +++ /dev/null @@ -1,25 +0,0 @@ -.motion { - transition-timing-function: var(--p-motion-linear); - transition-timing-function: var(--p-motion-ease-in-out); - transition-timing-function: var(--p-motion-ease-out); - transition-timing-function: var(--p-motion-ease-in); - transition-timing-function: var(--p-motion-ease); - transition-duration: var(--p-motion-duration-0); - transition-duration: var(--p-motion-duration-50); - transition-duration: var(--p-motion-duration-100); - transition-duration: var(--p-motion-duration-150); - transition-duration: var(--p-motion-duration-200); - transition-duration: var(--p-motion-duration-250); - transition-duration: var(--p-motion-duration-300); - transition-duration: var(--p-motion-duration-350); - transition-duration: var(--p-motion-duration-400); - transition-duration: var(--p-motion-duration-450); - transition-duration: var(--p-motion-duration-500); - transition-duration: var(--p-motion-duration-5000); - animation-name: var(--p-motion-keyframes-bounce); - animation-name: var(--p-motion-keyframes-fade-in); - animation-name: var(--p-motion-keyframes-pulse); - animation-name: var(--p-motion-keyframes-spin); - animation-name: var(--p-motion-keyframes-appear-above); - animation-name: var(--p-motion-keyframes-appear-below); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss deleted file mode 100644 index 83524fb6ab8..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* stylelint-disable */ -@use 'global-styles/legacy-polaris-v8'; - -.border-radius { - /* Migrate */ - border-radius: legacy-polaris-v8.border-radius(); - border-radius: legacy-polaris-v8.border-radius(base); - border-radius: legacy-polaris-v8.border-radius(large); - - /* Ignore */ - border-radius: calc(legacy-polaris-v8.border-radius(base) * 2); - border-radius: calc( - legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px) - ); - - /* Comment */ - border-radius: legacy-polaris-v8.border-radius(base) * 2; - border-radius: legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px); - border-top-right-radius: legacy-polaris-v8.border-radius() * - legacy-polaris-v8.rem(4px); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss deleted file mode 100644 index 8f1642d4c58..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* stylelint-disable */ -@use 'global-styles/legacy-polaris-v8'; - -.border-radius { - /* Migrate */ - border-radius: var(--p-border-radius-base); - border-radius: var(--p-border-radius-base); - border-radius: var(--p-border-radius-large); - - /* Ignore */ - border-radius: calc(legacy-polaris-v8.border-radius(base) * 2); - border-radius: calc( - legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px) - ); - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: var(--p-border-radius-base) * 2; - border-radius: legacy-polaris-v8.border-radius(base) * 2; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: var(--p-border-radius-base) * legacy-polaris-v8.rem(1px); - border-radius: legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-top-right-radius: var(--p-border-radius-base) * legacy-polaris-v8.rem(4px); - border-top-right-radius: legacy-polaris-v8.border-radius() * - legacy-polaris-v8.rem(4px); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss deleted file mode 100644 index 4199d2e9c82..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* stylelint-disable */ - -.border { - /* Migrate */ - border: border-width() solid var(--p-border-subdued); - border: border-width(base) solid var(--p-border-subdued); - border: border-width(thick) solid var(--p-border-subdued); - border: border-width(thicker) solid var(--p-border-subdued); - border-width: border-width('thicker'); - - /* Ignore */ - border-width: calc(-1 * border-width()); - border-width: calc($var * border-width()); - border-width: rem(1px) rem(10px - border-width()); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss deleted file mode 100644 index eedfbe975ea..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* stylelint-disable */ - -.border { - /* Migrate */ - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: var(--p-border-width-2) solid var(--p-border-subdued); - border: var(--p-border-width-3) solid var(--p-border-subdued); - border-width: var(--p-border-width-3); - - /* Ignore */ - border-width: calc(-1 * border-width()); - border-width: calc($var * border-width()); - border-width: rem(1px) rem(10px - border-width()); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss deleted file mode 100644 index c38b7116114..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* stylelint-disable */ -@use 'global-styles/legacy-polaris-v8'; - -.border { - /* Migrate */ - border: legacy-polaris-v8.border-width() solid var(--p-border-subdued); - border: legacy-polaris-v8.border-width(base) solid var(--p-border-subdued); - border: legacy-polaris-v8.border-width(thick) solid var(--p-border-subdued); - border: legacy-polaris-v8.border-width(thicker) solid var(--p-border-subdued); - border-width: legacy-polaris-v8.border-width('thicker'); - - /* Ignore */ - border-width: calc(-1 * legacy-polaris-v8.border-width()); - border-width: calc($var * legacy-polaris-v8.border-width()); - border-width: legacy-polaris-v8.rem(1px) - legacy-polaris-v8.rem(10px - legacy-polaris-v8.border-width()); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss deleted file mode 100644 index 4f673b07f1f..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* stylelint-disable */ -@use 'global-styles/legacy-polaris-v8'; - -.border { - /* Migrate */ - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: var(--p-border-width-2) solid var(--p-border-subdued); - border: var(--p-border-width-3) solid var(--p-border-subdued); - border-width: var(--p-border-width-3); - - /* Ignore */ - border-width: calc(-1 * legacy-polaris-v8.border-width()); - border-width: calc($var * legacy-polaris-v8.border-width()); - border-width: legacy-polaris-v8.rem(1px) - legacy-polaris-v8.rem(10px - legacy-polaris-v8.border-width()); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts deleted file mode 100644 index eaf92582f11..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts +++ /dev/null @@ -1,137 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; -import valueParser from 'postcss-value-parser'; - -import {scss, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants'; -import type {NamespaceOptions} from '../../utilities/sass'; -import { - getFunctionArgs, - isSassFunction, - namespace, - isNumericOperator, - StopWalkingFunctionNodes, - createInlineComment, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -const processed = Symbol('processed'); - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedBorderWidth = namespace('border-width', options); - - return { - postcssPlugin: 'v9-scss-replace-border-width', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - if (!borderProps.has(decl.prop)) return; - - /** - * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.) - * - * Note: This is evaluated at the end of each visitor execution to determine whether - * or not to replace the declaration or insert a comment. - */ - const targets: {replaced: boolean}[] = []; - let hasNumericOperator = false; - const parsedValue = valueParser(decl.value); - - handleBorderProps(); - - if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { - // Insert comment if the declaration value contains calculations - decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - decl.before( - createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), - ); - } else { - decl.value = parsedValue.toString(); - } - - // - // Handlers - // - - function handleBorderProps() { - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - hasNumericOperator = true; - return; - } - - if (node.type === 'function') { - if (isSassFunction(namespacedBorderWidth, node)) { - targets.push({replaced: false}); - - const args = getFunctionArgs(node); - - if (!(args.length === 0 || args.length === 1)) return; - - // `border-width()` args reference: - // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L616 - const value = args[0] ?? 'base'; - - if (!isKeyOf(borderWidthFunctionMap, value)) return; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: borderWidthFunctionMap[value], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: borderWidthFunctionMap[value].length, - }, - ]; - - targets[targets.length - 1]!.replaced = true; - } - - return StopWalkingFunctionNodes; - } - }); - } - }, - }; -}; - -const borderProps = new Set([ - 'border', - 'border-top', - 'border-right', - 'border-bottom', - 'border-left', - 'border-width', - 'border-top-width', - 'border-right-width', - 'border-bottom-width', - 'border-left-width', -]); - -const borderWidthFunctionMap = { - '': '--p-border-width-1', - base: '--p-border-width-1', - "'base'": '--p-border-width-1', - thick: '--p-border-width-2', - "'thick'": '--p-border-width-2', - thicker: '--p-border-width-3', - "'thicker'": '--p-border-width-3', -} as const; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss deleted file mode 100644 index 9633ef3398b..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* stylelint-disable */ - -.border { - border: border(); - border: border(base); - border: border('base'); - border: border(dark); - border: border('dark'); - border-bottom: border(transparent); - border: border('transparent'); - border: border(divider); - border-left: border('divider'); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss deleted file mode 100644 index b18004d14a5..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* stylelint-disable */ - -.border { - border: var(--p-border-base); - border: var(--p-border-base); - border: var(--p-border-base); - border: var(--p-border-dark); - border: var(--p-border-dark); - border-bottom: var(--p-border-transparent); - border: var(--p-border-transparent); - border: var(--p-border-divider); - border-left: var(--p-border-divider); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss deleted file mode 100644 index 160068c85d2..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* stylelint-disable */ - -@use 'global-styles/legacy-polaris-v8'; - -.border { - border: legacy-polaris-v8.border(); - border: legacy-polaris-v8.border(base); - border: legacy-polaris-v8.border('base'); - border: legacy-polaris-v8.border(dark); - border: legacy-polaris-v8.border('dark'); - border-bottom: legacy-polaris-v8.border(transparent); - border: legacy-polaris-v8.border('transparent'); - border: legacy-polaris-v8.border(divider); - border-left: legacy-polaris-v8.border('divider'); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss deleted file mode 100644 index 749761f4ea1..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* stylelint-disable */ - -@use 'global-styles/legacy-polaris-v8'; - -.border { - border: var(--p-border-base); - border: var(--p-border-base); - border: var(--p-border-base); - border: var(--p-border-dark); - border: var(--p-border-dark); - border-bottom: var(--p-border-transparent); - border: var(--p-border-transparent); - border: var(--p-border-divider); - border-left: var(--p-border-divider); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts deleted file mode 100644 index 15967312e2f..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts +++ /dev/null @@ -1,125 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; -import valueParser from 'postcss-value-parser'; - -import {scss, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants'; -import type {NamespaceOptions} from '../../utilities/sass'; -import { - getFunctionArgs, - isSassFunction, - namespace, - createInlineComment, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -const processed = Symbol('processed'); - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedBorder = namespace('border', options); - - return { - postcssPlugin: 'v9-scss-replace-border', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - if (!borderProps.has(decl.prop)) return; - - /** - * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.) - * - * Note: This is evaluated at the end of each visitor execution to determine whether - * or not to replace the declaration or insert a comment. - */ - const targets: {replaced: boolean}[] = []; - const parsedValue = valueParser(decl.value); - - handleBorderProps(); - - if (targets.some(({replaced}) => !replaced)) { - // Insert comment if the declaration value contains calculations - decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - decl.before( - createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), - ); - } else { - decl.value = parsedValue.toString(); - } - - // - // Handlers - // - - function handleBorderProps() { - parsedValue.walk((node) => { - if ( - node.type === 'function' && - isSassFunction(namespacedBorder, node) - ) { - targets.push({replaced: false}); - - const args = getFunctionArgs(node); - - if (!(args.length === 0 || args.length === 1)) return; - - // `border()` args reference: - // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L641 - const value = args[0] ?? 'base'; - - if (!isKeyOf(borderFunctionMap, value)) return; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: borderFunctionMap[value], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: borderFunctionMap[value].length, - }, - ]; - - targets[targets.length - 1]!.replaced = true; - } - }); - } - }, - }; -}; - -const borderProps = new Set([ - 'border', - 'border-top', - 'border-right', - 'border-bottom', - 'border-left', -]); - -const borderFunctionMap = { - '': '--p-border-base', - base: '--p-border-base', - "'base'": '--p-border-base', - dark: '--p-border-dark', - "'dark'": '--p-border-dark', - transparent: '--p-border-transparent', - "'transparent'": '--p-border-transparent', - divider: ' --p-border-divider', - "'divider'": ' --p-border-divider', -} as const; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss deleted file mode 100644 index 2ccddc6eb87..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss +++ /dev/null @@ -1,118 +0,0 @@ -.root { - @include page-content-when-partially-condensed { - padding-bottom: spacing(loose); - - &.Active { - border-bottom: rem(3px) solid color('ink'); - } - - @include page-content-when-not-partially-condensed { - padding: 0 spacing(extra-loose); - } - } - - @include page-content-when-fully-condensed { - margin: 0 spacing(loose) spacing(tight); - } - - @include page-content-when-not-fully-condensed { - border-radius: spacing(tight); - } - - @include page-when-not-max-width { - border-radius: spacing(tight); - } - - @include page-content-when-layout-stacked { - @include stacked-elements; - } - - @include page-content-when-layout-not-stacked { - border-radius: spacing(tight); - } - - @include page-after-resource-list-small { - border-radius: spacing(tight); - } - - @include page-before-resource-list-small { - border-radius: spacing(tight); - } - - @include after-topbar-sheet { - max-width: $content-max-width + (2 * spacing(extra-loose)); - - > li { - margin-right: spacing(); - } - - &.TwoColumn > li { - flex: 0 calc(50% - #{spacing(extra-loose)}); - } - } - - @include frame-with-nav-when-not-max-width { - padding: spacing(tight) 0; - } - - @mixin global-nav-offset { - @include frame-when-nav-displayed { - left: $global-nav-width; - width: calc(100% - #{$global-nav-width}); - } - } - - .Large { - @include frame-when-nav-displayed { - width: $sheet-desktop-width-large; - } - } - - @include frame-when-nav-displayed { - @include breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - - @include frame-when-nav-hidden { - @include stick-to-bottom-container; - } - - .MinimizableVideoToolbar { - &.Inline { - @include frame-when-nav-hidden { - display: none; - } - } - } - - @include frame-when-nav-hidden { - @include page-content-when-not-partially-condensed { - width: rem(200px); - } - } - - @mixin breakpoint-tablet-not-condensed { - @include frame-when-nav-hidden { - @include page-content-when-not-partially-condensed { - @content; - } - } - - @include frame-when-nav-displayed { - @include breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - } - - > *:not(:last-child) { - @include when-typography-condensed { - margin-bottom: var(--p-space-4); - } - } -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss deleted file mode 100644 index bd30f468a17..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss +++ /dev/null @@ -1,118 +0,0 @@ -.root { - @media #{$p-breakpoints-lg-down} { - padding-bottom: spacing(loose); - - &.Active { - border-bottom: rem(3px) solid color('ink'); - } - - @media #{$p-breakpoints-md-up} { - padding: 0 spacing(extra-loose); - } - } - - @media #{$p-breakpoints-sm-down} { - margin: 0 spacing(loose) spacing(tight); - } - - @media #{$p-breakpoints-sm-up} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-lg-down} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-lg-down} { - @include stacked-elements; - } - - @media #{$p-breakpoints-md-up} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-sm-up} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-sm-down} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-sm-up} { - max-width: $content-max-width + (2 * spacing(extra-loose)); - - > li { - margin-right: spacing(); - } - - &.TwoColumn > li { - flex: 0 calc(50% - #{spacing(extra-loose)}); - } - } - - @media #{$p-breakpoints-lg-down} { - padding: spacing(tight) 0; - } - - @mixin global-nav-offset { - @media #{$p-breakpoints-md-up} { - left: $global-nav-width; - width: calc(100% - #{$global-nav-width}); - } - } - - .Large { - @media #{$p-breakpoints-md-up} { - width: $sheet-desktop-width-large; - } - } - - @media #{$p-breakpoints-md-up} { - @include breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - - @media #{$p-breakpoints-md-down} { - @include stick-to-bottom-container; - } - - .MinimizableVideoToolbar { - &.Inline { - @media #{$p-breakpoints-md-down} { - display: none; - } - } - } - - @media #{$p-breakpoints-md-down} { - @media #{$p-breakpoints-md-up} { - width: rem(200px); - } - } - - @mixin breakpoint-tablet-not-condensed { - @media #{$p-breakpoints-md-down} { - @media #{$p-breakpoints-md-up} { - @content; - } - } - - @media #{$p-breakpoints-md-up} { - @include breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - } - - > *:not(:last-child) { - @media #{$p-breakpoints-md-down} { - margin-bottom: var(--p-space-4); - } - } -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss deleted file mode 100644 index 38437c954b4..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss +++ /dev/null @@ -1,120 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.root { - @include legacy-polaris-v8.page-content-when-partially-condensed { - padding-bottom: spacing(loose); - - &.Active { - border-bottom: rem(3px) solid color('ink'); - } - - @include legacy-polaris-v8.page-content-when-not-partially-condensed { - padding: 0 spacing(extra-loose); - } - } - - @include legacy-polaris-v8.page-content-when-fully-condensed { - margin: 0 spacing(loose) spacing(tight); - } - - @include legacy-polaris-v8.page-content-when-not-fully-condensed { - border-radius: spacing(tight); - } - - @include legacy-polaris-v8.page-when-not-max-width { - border-radius: spacing(tight); - } - - @include legacy-polaris-v8.page-content-when-layout-stacked { - @include legacy-polaris-v8.stacked-elements; - } - - @include legacy-polaris-v8.page-content-when-layout-not-stacked { - border-radius: spacing(tight); - } - - @include legacy-polaris-v8.page-after-resource-list-small { - border-radius: spacing(tight); - } - - @include legacy-polaris-v8.page-before-resource-list-small { - border-radius: spacing(tight); - } - - @include legacy-polaris-v8.after-topbar-sheet { - max-width: $content-max-width + (2 * spacing(extra-loose)); - - > li { - margin-right: spacing(); - } - - &.TwoColumn > li { - flex: 0 calc(50% - #{spacing(extra-loose)}); - } - } - - @include legacy-polaris-v8.frame-with-nav-when-not-max-width { - padding: spacing(tight) 0; - } - - @mixin global-nav-offset { - @include legacy-polaris-v8.frame-when-nav-displayed { - left: $global-nav-width; - width: calc(100% - #{$global-nav-width}); - } - } - - .Large { - @include legacy-polaris-v8.frame-when-nav-displayed { - width: $sheet-desktop-width-large; - } - } - - @include legacy-polaris-v8.frame-when-nav-displayed { - @include legacy-polaris-v8.breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - - @include legacy-polaris-v8.frame-when-nav-hidden { - @include legacy-polaris-v8.stick-to-bottom-container; - } - - .MinimizableVideoToolbar { - &.Inline { - @include legacy-polaris-v8.frame-when-nav-hidden { - display: none; - } - } - } - - @include legacy-polaris-v8.frame-when-nav-hidden { - @include legacy-polaris-v8.page-content-when-not-partially-condensed { - width: rem(200px); - } - } - - @mixin breakpoint-tablet-not-condensed { - @include legacy-polaris-v8.frame-when-nav-hidden { - @include legacy-polaris-v8.page-content-when-not-partially-condensed { - @content; - } - } - - @include legacy-polaris-v8.frame-when-nav-displayed { - @include legacy-polaris-v8.breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - } - - > *:not(:last-child) { - @include legacy-polaris-v8.when-typography-condensed { - margin-bottom: var(--p-space-4); - } - } -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss deleted file mode 100644 index 9bc631dce3c..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss +++ /dev/null @@ -1,120 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.root { - @media #{$p-breakpoints-lg-down} { - padding-bottom: spacing(loose); - - &.Active { - border-bottom: rem(3px) solid color('ink'); - } - - @media #{$p-breakpoints-md-up} { - padding: 0 spacing(extra-loose); - } - } - - @media #{$p-breakpoints-sm-down} { - margin: 0 spacing(loose) spacing(tight); - } - - @media #{$p-breakpoints-sm-up} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-lg-down} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-lg-down} { - @include legacy-polaris-v8.stacked-elements; - } - - @media #{$p-breakpoints-md-up} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-sm-up} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-sm-down} { - border-radius: spacing(tight); - } - - @media #{$p-breakpoints-sm-up} { - max-width: $content-max-width + (2 * spacing(extra-loose)); - - > li { - margin-right: spacing(); - } - - &.TwoColumn > li { - flex: 0 calc(50% - #{spacing(extra-loose)}); - } - } - - @media #{$p-breakpoints-lg-down} { - padding: spacing(tight) 0; - } - - @mixin global-nav-offset { - @media #{$p-breakpoints-md-up} { - left: $global-nav-width; - width: calc(100% - #{$global-nav-width}); - } - } - - .Large { - @media #{$p-breakpoints-md-up} { - width: $sheet-desktop-width-large; - } - } - - @media #{$p-breakpoints-md-up} { - @include legacy-polaris-v8.breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - - @media #{$p-breakpoints-md-down} { - @include legacy-polaris-v8.stick-to-bottom-container; - } - - .MinimizableVideoToolbar { - &.Inline { - @media #{$p-breakpoints-md-down} { - display: none; - } - } - } - - @media #{$p-breakpoints-md-down} { - @media #{$p-breakpoints-md-up} { - width: rem(200px); - } - } - - @mixin breakpoint-tablet-not-condensed { - @media #{$p-breakpoints-md-down} { - @media #{$p-breakpoints-md-up} { - @content; - } - } - - @media #{$p-breakpoints-md-up} { - @include legacy-polaris-v8.breakpoint-after( - layout-width(page-content, not-condensed) + layout-width(nav) - ) { - @content; - } - } - } - - > *:not(:last-child) { - @media #{$p-breakpoints-md-down} { - margin-bottom: var(--p-space-4); - } - } -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts deleted file mode 100644 index caa4273d97c..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts +++ /dev/null @@ -1,69 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; - -import type {NamespaceOptions} from '../../utilities/sass'; -import {getNamespacePattern} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; -import {scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacePattern = getNamespacePattern(options); - - const namespacedMixinRegExp = new RegExp( - String.raw`^${namespacePattern}([\w-]+)`, - ); - - return { - postcssPlugin: 'v9-scss-replace-breakpoints', - AtRule(atRule) { - if (atRule.name !== 'include') return; - - // Extract mixin name e.g. name from `@include name;` or `@include name();` - const mixinName = atRule.params.match(namespacedMixinRegExp)?.[1]; - - if (!isKeyOf(staticBreakpointMixins, mixinName)) return; - - atRule.assign({ - name: 'media', - params: staticBreakpointMixins[mixinName], - }); - }, - }; -}; - -/** Mapping of static breakpoint mixins from old to new */ -const staticBreakpointMixins = { - 'page-content-when-partially-condensed': '#{$p-breakpoints-lg-down}', - 'page-content-when-not-partially-condensed': '#{$p-breakpoints-md-up}', - 'page-content-when-fully-condensed': '#{$p-breakpoints-sm-down}', - 'page-content-when-not-fully-condensed': '#{$p-breakpoints-sm-up}', - 'page-content-when-layout-stacked': '#{$p-breakpoints-lg-down}', - 'page-content-when-layout-not-stacked': '#{$p-breakpoints-md-up}', - 'page-before-resource-list-small': '#{$p-breakpoints-sm-down}', - 'page-after-resource-list-small': '#{$p-breakpoints-sm-up}', - 'page-when-not-max-width': '#{$p-breakpoints-lg-down}', - 'when-typography-condensed': '#{$p-breakpoints-md-down}', - 'when-typography-not-condensed': '#{$p-breakpoints-md-up}', - 'frame-when-nav-hidden': '#{$p-breakpoints-md-down}', - 'frame-when-nav-displayed': '#{$p-breakpoints-md-up}', - 'frame-with-nav-when-not-max-width': '#{$p-breakpoints-lg-down}', - 'after-topbar-sheet': '#{$p-breakpoints-sm-up}', -}; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss deleted file mode 100644 index f658252cbdb..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss +++ /dev/null @@ -1,79 +0,0 @@ -.my-class { - // color - color: color('blue'); - color: color('blue', 'dark'); - color: color('green'); - color: color('green', 'dark'); - color: color('yellow'); - color: color('yellow', 'dark'); - color: color('red'); - color: color('red', 'dark'); - color: color('ink'); - color: color('ink', 'light'); - color: color('ink', 'lighter'); - color: color('ink', 'lightest'); - color: color('sky'); - color: color('sky', 'dark'); - color: color('sky', 'light'); - color: color('sky', 'lighter'); - color: color('black'); - color: color('white'); - - // background - background-color: color('green', 'light'); - background-color: color('green', 'lighter'); - background-color: color('yellow', 'light'); - background-color: color('yellow', 'lighter'); - background-color: color('red', 'light'); - background-color: color('red', 'lighter'); - background-color: color('ink'); - background-color: color('ink', 'dark'); - background-color: color('sky'); - background-color: color('sky', 'light'); - background-color: color('sky', 'lighter'); - background-color: color('black'); - background-color: color('white'); - - // border - border-color: color('green', 'dark'); - border-color: color('green'); - border-color: color('green', 'light'); - border-color: color('green', 'lighter'); - border-color: color('yellow', 'dark'); - border-color: color('yellow'); - border-color: color('yellow', 'light'); - border-color: color('yellow', 'lighter'); - border-color: color('red', 'dark'); - border-color: color('red'); - border-color: color('red', 'light'); - border-color: color('red', 'lighter'); - border-color: color('ink', 'lightest'); - border-color: color('sky', 'light'); - - // fill - fill: color('green', 'dark'); - fill: color('green'); - fill: color('yellow', 'dark'); - fill: color('yellow'); - fill: color('red', 'dark'); - fill: color('red'); - fill: color('ink'); - fill: color('ink', 'light'); - fill: color('ink', 'lighter'); - fill: color('ink', 'lightest'); - fill: color('black'); - fill: color('white'); - - // Remove color() fallbacks - color: var(--p-text, color('white')); - - // Handle declarations with multiple values - border: var(--p-border-width-1) solid color('ink', 'lightest'); - background: border-box color('sky', 'light'); - - // Skip color() with a for-background argument - color: color('ink', 'lighter', #f2ece4); - - // Skip replacing color() within a function - background: rgba(color('black'), 0.5); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss deleted file mode 100644 index 13ddb84cea0..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss +++ /dev/null @@ -1,79 +0,0 @@ -.my-class { - // color - color: var(--p-interactive); - color: var(--p-interactive-hovered); - color: var(--p-text-success); - color: var(--p-text-success); - color: var(--p-text-warning); - color: var(--p-text-warning); - color: var(--p-text-critical); - color: var(--p-text-critical); - color: var(--p-text); - color: var(--p-text-subdued); - color: var(--p-text-subdued); - color: var(--p-text-subdued); - color: var(--p-text-on-dark); - color: var(--p-text-subdued-on-dark); - color: var(--p-text-on-dark); - color: var(--p-text-on-dark); - color: var(--p-text); - color: var(--p-text-on-dark); - - // background - background-color: var(--p-surface-success); - background-color: var(--p-surface-success-subdued); - background-color: var(--p-surface-warning); - background-color: var(--p-surface-warning-subdued); - background-color: var(--p-surface-critical); - background-color: var(--p-surface-critical-subdued); - background-color: var(--p-surface-neutral-subdued-dark); - background-color: var(--p-surface-dark); - background-color: var(--p-surface-neutral); - background-color: var(--p-surface-neutral-subdued); - background-color: var(--p-surface-subdued); - background-color: var(--p-surface-dark); - background-color: var(--p-surface); - - // border - border-color: var(--p-border-success); - border-color: var(--p-border-success); - border-color: var(--p-border-success-subdued); - border-color: var(--p-border-success-subdued); - border-color: var(--p-border-warning); - border-color: var(--p-border-warning); - border-color: var(--p-border-warning-disabled); - border-color: var(--p-border-warning-subdued); - border-color: var(--p-border-critical); - border-color: var(--p-border-critical); - border-color: var(--p-border-critical-subdued); - border-color: var(--p-border-critical-subdued); - border-color: var(--p-border); - border-color: var(--p-border-subdued); - - // fill - fill: var(--p-icon-success); - fill: var(--p-icon-success); - fill: var(--p-icon-warning); - fill: var(--p-icon-warning); - fill: var(--p-icon-critical); - fill: var(--p-icon-critical); - fill: var(--p-icon); - fill: var(--p-icon); - fill: var(--p-icon-subdued); - fill: var(--p-icon-disabled); - fill: var(--p-icon); - fill: var(--p-icon-on-dark); - - // Remove color() fallbacks - color: var(--p-text); - - // Handle declarations with multiple values - border: var(--p-border-width-1) solid var(--p-border); - background: border-box var(--p-surface-neutral-subdued); - - // Skip color() with a for-background argument - color: color('ink', 'lighter', #f2ece4); - - // Skip replacing color() within a function - background: rgba(color('black'), 0.5); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss deleted file mode 100644 index bed02c3ceeb..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.my-class { - color: legacy-polaris-v8.color('ink'); - color: legacy-polaris-v8.color('ink', 'lighter'); - color: legacy-polaris-v8.color('ink', 'lighter', #f2ece4); - color: var(--p-surface, legacy-polaris-v8.color('white')); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss deleted file mode 100644 index e1b2d4eb9a8..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.my-class { - color: var(--p-text); - color: var(--p-text-subdued); - color: legacy-polaris-v8.color('ink', 'lighter', #f2ece4); - color: var(--p-surface); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts b/polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts deleted file mode 100644 index 0b3c16e379b..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts +++ /dev/null @@ -1,647 +0,0 @@ -export const colors = { - background: { - value: 'rgba(246, 246, 247, 1)', - description: - 'For use as a background color, in components such as Page and Frame backgrounds.', - }, - 'background-hovered': { - value: 'rgba(241, 242, 243, 1)', - description: - 'For use when an action or navigation is used on a background.', - }, - 'background-pressed': { - value: 'rgba(237, 238, 239, 1)', - description: - 'For use when an action or navigation is used on a background.', - }, - 'background-selected': { - value: 'rgba(237, 238, 239, 1)', - description: 'For use in the selected item in navigation', - }, - surface: { - value: 'rgba(255, 255, 255, 1)', - description: - 'For use as a background color, in components such as Card, Modal, and Popover.', - }, - 'surface-dark': { - value: 'rgba(32, 33, 35, 1)', - description: - 'For use as a dark background color, in components such as Card, Modal, and Popover.', - }, - 'surface-neutral': { - value: 'rgba(228, 229, 231, 1)', - description: 'For use as a background color in neutral badges.', - }, - 'surface-neutral-hovered': { - value: 'rgba(219, 221, 223, 1)', - description: 'For use as a hovered background color in neutral badges.', - }, - 'surface-neutral-pressed': { - value: 'rgba(201, 204, 208, 1)', - description: 'For use as a pressed background color in neutral badges.', - }, - 'surface-neutral-disabled': { - value: 'rgba(241, 242, 243, 1)', - description: 'For use as a disabled background color in neutral badges.', - }, - 'surface-neutral-subdued': { - value: 'rgba(246, 246, 247, 1)', - description: 'For use as a background color in neutral banners.', - }, - 'surface-neutral-subdued-dark': { - value: 'rgba(68, 71, 74, 1)', - description: 'For use as a dark background color in neutral banners.', - }, - 'surface-subdued': { - value: 'rgba(250, 251, 251, 1)', - description: - 'For use as a subdued background color, in components such as Card, Modal, and Popover.', - }, - 'surface-disabled': { - value: 'rgba(250, 251, 251, 1)', - description: - 'For use as a surface color on disabled interactive elements such as option list items and action list items when in a disabled state.', - }, - 'surface-hovered': { - value: 'rgba(246, 246, 247, 1)', - description: - 'For use as a surface color on interactive elements such as resource list items and action list items when in a hovered state.', - }, - 'surface-hovered-dark': { - value: 'rgba(47, 49, 51, 1)', - description: - 'For use as a dark surface color on interactive elements such as resource list items and action list items when in a hovered state.', - }, - 'surface-pressed': { - value: 'rgba(241, 242, 243, 1)', - description: - 'For use as a surface color on interactive elements such as resource list items and action list items when in a pressed state.', - }, - 'surface-pressed-dark': { - value: 'rgba(62, 64, 67, 1)', - description: - 'For use as a dark surface color on interactive elements such as resource list items and action list items when in a pressed state.', - }, - 'surface-depressed': { - value: 'rgba(237, 238, 239, 1)', - description: - 'For use as a surface color on interactive elements such as resource list items and action list items when in a depressed state.', - }, - 'surface-search-field': { - value: 'rgba(241, 242, 243, 1)', - description: - 'For use as a background color, in components on surface elements such as SearchField', - }, - 'surface-search-field-dark': { - value: 'rgba(47, 49, 51, 1)', - description: - 'For use as a dark background color, in components on surface elements such as SearchField', - }, - backdrop: { - value: 'rgba(0, 0, 0, 0.5)', - description: - 'For use as the background color of the backdrop component for navigation and modal. This color has an alpha of `0.5`.', - }, - overlay: { - value: 'rgba(255, 255, 255, 0.5)', - description: - 'For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.5`.', - }, - 'shadow-color-picker': { - value: 'rgba(0, 0, 0, 0.5)', - }, - 'shadow-color-picker-dragger': { - value: 'rgba(33, 43, 54, 0.32)', - }, - 'hint-from-direct-light': { - value: 'rgba(0, 0, 0, 0.15)', - description: 'For use in building shadows scrollables.', - }, - border: { - value: 'rgba(140, 145, 150, 1)', - description: 'For use as the default border on elements.', - }, - 'border-on-dark': { - value: 'rgba(80, 83, 86, 1)', - description: 'For use as the default border on dark elements.', - }, - 'border-neutral-subdued': { - value: 'rgba(186, 191, 195, 1)', - description: 'For use as the border on banners.', - }, - 'border-hovered': { - value: 'rgba(153, 158, 164, 1)', - description: 'Used for borders on hovered interactive elements', - }, - 'border-disabled': { - value: 'rgba(210, 213, 216, 1)', - description: 'Used for disabled borders on interactive elements', - }, - 'border-subdued': { - value: 'rgba(201, 204, 207, 1)', - description: 'For use as a subdued border on elements.', - }, - 'border-depressed': { - value: 'rgba(87, 89, 89, 1)', - description: 'For use as a border on depressed elements.', - }, - 'border-shadow': { - value: 'rgba(174, 180, 185, 1)', - description: 'For use as an additional bottom border on elements.', - }, - 'border-shadow-subdued': { - value: 'rgba(186, 191, 196, 1)', - description: 'For use as an additional, subdued bottom border on elements.', - }, - divider: { - value: 'rgba(225, 227, 229, 1)', - description: 'For use as a divider between elements.', - }, - 'divider-dark': { - value: 'rgba(69, 71, 73, 1)', - description: 'For use as a dark divider between elements.', - }, - icon: { - value: 'rgba(92, 95, 98, 1)', - description: 'For use as the fill color of icons.', - }, - 'icon-on-dark': { - value: 'rgba(166, 172, 178, 1)', - description: 'For use as the fill color of dark icons.', - }, - 'icon-hovered': { - value: 'rgba(26, 28, 29, 1)', - description: 'For use as the fill color of hovered icons.', - }, - 'icon-pressed': { - value: 'rgba(68, 71, 74, 1)', - description: 'For use as the fill color of pressed icons.', - }, - 'icon-disabled': { - value: 'rgba(186, 190, 195, 1)', - description: 'For use as the fill color of disabled icons.', - }, - 'icon-subdued': { - value: 'rgba(140, 145, 150, 1)', - description: 'For use as the fill color of subdued icons.', - }, - text: { - value: 'rgba(32, 34, 35, 1)', - description: 'For use as a text color.', - }, - 'text-on-dark': { - value: 'rgba(227, 229, 231, 1)', - description: 'For use as a text color on dark elements.', - }, - 'text-disabled': { - value: 'rgba(140, 145, 150, 1)', - description: - 'For use as a disabled text color and as a placeholder text color.', - }, - 'text-subdued': { - value: 'rgba(109, 113, 117, 1)', - description: 'For use as a subdued text color.', - }, - 'text-subdued-on-dark': { - value: 'rgba(153, 159, 164, 1)', - description: 'For use as a subdued text color on dark elements.', - }, - interactive: { - value: 'rgba(44, 110, 203, 1)', - description: - 'Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons.', - }, - 'interactive-on-dark': { - value: 'rgba(54, 163, 255, 1)', - description: - 'Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons when on a dark element.', - }, - 'interactive-disabled': { - value: 'rgba(189, 193, 204, 1)', - description: 'Used for disabled links and plain buttons.', - }, - 'interactive-hovered': { - value: 'rgba(31, 81, 153, 1)', - description: 'Used for hovered links and plain buttons.', - }, - 'interactive-pressed': { - value: 'rgba(16, 50, 98, 1)', - description: 'Used for pressed links and plain buttons.', - }, - 'interactive-pressed-on-dark': { - value: 'rgba(136, 188, 255, 1)', - description: 'Used for pressed links and plain buttons on dark elements.', - }, - focused: { - value: 'rgba(69, 143, 255, 1)', - description: 'For use in the focus ring on interactive elements.', - }, - 'surface-selected': { - value: 'rgba(242, 247, 254, 1)', - description: - 'For use as a surface color in selected interactive elements, in components such as action list and resource list.', - }, - 'surface-selected-hovered': { - value: 'rgba(237, 244, 254, 1)', - description: - 'For use as a surface color in selected interactive elements that are hovered, in components such as action list and resource list.', - }, - 'surface-selected-pressed': { - value: 'rgba(229, 239, 253, 1)', - description: - 'For use as a surface color in selected interactive elements that are pressed, in components such as action list and resource list.', - }, - 'icon-on-interactive': { - value: 'rgba(255, 255, 255, 1)', - description: 'For use as a fill color for icons on interactive elements.', - }, - 'text-on-interactive': { - value: 'rgba(255, 255, 255, 1)', - description: 'For use as a text color on interactive elements.', - }, - 'action-secondary': { - value: 'rgba(255, 255, 255, 1)', - description: - 'Used for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces.', - }, - 'action-secondary-disabled': { - value: 'rgba(255, 255, 255, 1)', - description: 'Used as a disabled state for secondary buttons', - }, - 'action-secondary-hovered': { - value: 'rgba(246, 246, 247, 1)', - description: 'Used as a hovered state for secondary buttons', - }, - 'action-secondary-hovered-dark': { - value: 'rgba(84, 87, 91, 1)', - description: 'Used as a dark hovered state for secondary buttons', - }, - 'action-secondary-pressed': { - value: 'rgba(241, 242, 243, 1)', - description: 'Used as a pressed state for secondary buttons', - }, - 'action-secondary-pressed-dark': { - value: 'rgba(96, 100, 103, 1)', - description: 'Used as a dark pressed state for secondary buttons', - }, - 'action-secondary-depressed': { - value: 'rgba(109, 113, 117, 1)', - description: 'Used as a depressed state for secondary buttons', - }, - 'action-primary': { - value: 'rgba(0, 128, 96, 1)', - description: - 'Used as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', - }, - 'action-primary-disabled': { - value: 'rgba(241, 241, 241, 1)', - description: - 'Used as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', - }, - 'action-primary-hovered': { - value: 'rgba(0, 110, 82, 1)', - description: - 'Used as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', - }, - 'action-primary-pressed': { - value: 'rgba(0, 94, 70, 1)', - description: - 'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', - }, - 'action-primary-depressed': { - value: 'rgba(0, 61, 44, 1)', - description: - 'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', - }, - 'icon-on-primary': { - value: 'rgba(255, 255, 255, 1)', - description: - 'For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs.', - }, - 'text-on-primary': { - value: 'rgba(255, 255, 255, 1)', - description: - 'For use as a text color on primary actions. Not for use in text on navigation and tabs.', - }, - 'text-primary': { - value: 'rgba(0, 123, 92, 1)', - description: - 'For use as primary text color on background. For use in text in components such as Navigation.', - }, - 'text-primary-hovered': { - value: 'rgba(0, 108, 80, 1)', - description: - 'For use as primary hovered text color on background. For use in text in components such as Navigation.', - }, - 'text-primary-pressed': { - value: 'rgba(0, 92, 68, 1)', - description: - 'For use as primary pressed text color on background. For use in text in components such as Navigation.', - }, - 'surface-primary-selected': { - value: 'rgba(241, 248, 245, 1)', - description: - 'Used as a surface color to indicate selected interactive states in navigation and tabs.', - }, - 'surface-primary-selected-hovered': { - value: 'rgba(179, 208, 195, 1)', - description: - 'Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs.', - }, - 'surface-primary-selected-pressed': { - value: 'rgba(162, 188, 176, 1)', - description: - 'Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs.', - }, - 'border-critical': { - value: 'rgba(253, 87, 73, 1)', - description: - 'For use as a border on critical components such as an outline on interactive elements in an error state.', - }, - 'border-critical-subdued': { - value: 'rgba(224, 179, 178, 1)', - description: 'For use as a border on critical components such as banners.', - }, - 'border-critical-disabled': { - value: 'rgba(255, 167, 163, 1)', - description: - 'For use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state.', - }, - 'icon-critical': { - value: 'rgba(215, 44, 13, 1)', - description: 'For use as an icon fill color on top of critical elements.', - }, - 'surface-critical': { - value: 'rgba(254, 211, 209, 1)', - description: - 'For use as a surface color on critical elements including badges.', - }, - 'surface-critical-subdued': { - value: 'rgba(255, 244, 244, 1)', - description: - 'For use as a subdued surface color on critical elements including banners.', - }, - 'surface-critical-subdued-hovered': { - value: 'rgba(255, 240, 240, 1)', - description: - 'For use as a surface color on critical interactive elements including action list items in a hovered state.', - }, - 'surface-critical-subdued-pressed': { - value: 'rgba(255, 233, 232, 1)', - description: - 'For use as a surface color on critical interactive elements including action list items in a pressed state.', - }, - 'surface-critical-subdued-depressed': { - value: 'rgba(254, 188, 185, 1)', - description: - 'For use as a surface color on critical interactive elements including action list items in a depressed state.', - }, - 'text-critical': { - value: 'rgba(215, 44, 13, 1)', - description: - 'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.', - }, - 'action-critical': { - value: 'rgba(216, 44, 13, 1)', - description: - 'For use as the background color for destructive buttons, and as the background color for error toast messages.', - }, - 'action-critical-disabled': { - value: 'rgba(241, 241, 241, 1)', - description: - 'For use as the background color for disabled destructive buttons, and as the background color for error toast messages.', - }, - 'action-critical-hovered': { - value: 'rgba(188, 34, 0, 1)', - description: - 'For use as the background color for hovered destructive buttons, and as the background color for error toast messages.', - }, - 'action-critical-pressed': { - value: 'rgba(162, 27, 0, 1)', - description: - 'For use as the background color for pressed destructive buttons, and as the background color for error toast messages.', - }, - 'action-critical-depressed': { - value: 'rgba(108, 15, 0, 1)', - description: - 'For use as the background color for depressed destructive buttons, and as the background color for error toast messages.', - }, - 'icon-on-critical': { - value: 'rgba(255, 255, 255, 1)', - description: 'For use as a fill color for icons on critical actions.', - }, - 'text-on-critical': { - value: 'rgba(255, 255, 255, 1)', - description: 'For use as a text color on critical actions.', - }, - 'interactive-critical': { - value: 'rgba(216, 44, 13, 1)', - description: - 'For use as the text color for destructive interactive elements: links, plain buttons, error state of selected checkboxes and radio buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', - }, - 'interactive-critical-disabled': { - value: 'rgba(253, 147, 141, 1)', - description: - 'For use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', - }, - 'interactive-critical-hovered': { - value: 'rgba(205, 41, 12, 1)', - description: - 'For use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', - }, - 'interactive-critical-pressed': { - value: 'rgba(103, 15, 3, 1)', - description: - 'For use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', - }, - 'border-warning': { - value: 'rgba(185, 137, 0, 1)', - description: 'For use as a border on warning components such as...', - }, - 'border-warning-subdued': { - value: 'rgba(225, 184, 120, 1)', - description: 'For use as a border on warning components such as banners.', - }, - 'icon-warning': { - value: 'rgba(185, 137, 0, 1)', - description: 'For use as an icon fill color on top of warning elements.', - }, - 'surface-warning': { - value: 'rgba(255, 215, 157, 1)', - description: - 'For use as a surface color on warning elements including badges.', - }, - 'surface-warning-subdued': { - value: 'rgba(255, 245, 234, 1)', - description: - 'For use as a subdued surface color on warning elements including banners.', - }, - 'surface-warning-subdued-hovered': { - value: 'rgba(255, 242, 226, 1)', - description: - 'For use as a subdued surface color on warning elements including banners.', - }, - 'surface-warning-subdued-pressed': { - value: 'rgba(255, 235, 211, 1)', - description: - 'For use as a subdued surface color on warning elements including banners.', - }, - 'text-warning': { - value: 'rgba(145, 106, 0, 1)', - description: - 'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.', - }, - 'border-highlight': { - value: 'rgba(68, 157, 167, 1)', - description: 'For use as a border on informational components such as...', - }, - 'border-highlight-subdued': { - value: 'rgba(152, 198, 205, 1)', - description: - 'For use as a border on informational components such as banners.', - }, - 'icon-highlight': { - value: 'rgba(0, 160, 172, 1)', - description: - 'For use as an icon fill color on top of informational elements.', - }, - 'surface-highlight': { - value: 'rgba(164, 232, 242, 1)', - description: - 'For use as a surface color on information elements including badges.', - }, - 'surface-highlight-subdued': { - value: 'rgba(235, 249, 252, 1)', - description: - 'For use as a surface color on information elements including banners.', - }, - 'surface-highlight-subdued-hovered': { - value: 'rgba(228, 247, 250, 1)', - description: - 'For use as a surface color on information elements including banners.', - }, - 'surface-highlight-subdued-pressed': { - value: 'rgba(213, 243, 248, 1)', - description: - 'For use as a surface color on information elements including banners.', - }, - 'text-highlight': { - value: 'rgba(52, 124, 132, 1)', - description: - 'For use as a text color in inert informational elements. Not for use as a text color on banners and badges.', - }, - 'border-success': { - value: 'rgba(0, 164, 124, 1)', - description: - 'For use as a border on success components such as text inputs.', - }, - 'border-success-subdued': { - value: 'rgba(149, 201, 180, 1)', - description: 'For use as a border on success components such as banners.', - }, - 'icon-success': { - value: 'rgba(0, 127, 95, 1)', - description: 'For use as an icon fill color on top of success elements.', - }, - 'surface-success': { - value: 'rgba(174, 233, 209, 1)', - description: - 'For use as a surface color on success elements including badges.', - }, - 'surface-success-subdued': { - value: 'rgba(241, 248, 245, 1)', - description: - 'For use as a surface color on information elements including banners.', - }, - 'surface-success-subdued-hovered': { - value: 'rgba(236, 246, 241, 1)', - description: - 'For use as a surface color on information elements including banners.', - }, - 'surface-success-subdued-pressed': { - value: 'rgba(226, 241, 234, 1)', - description: - 'For use as a surface color on information elements including banners.', - }, - 'text-success': { - value: 'rgba(0, 128, 96, 1)', - description: - 'For use as a text color in inert success elements. Not for use as a text color on banners and badges.', - }, - 'icon-attention': { - value: 'rgba(138, 97, 22, 1)', - }, - 'surface-attention': { - value: 'rgba(255, 234, 138, 1)', - }, - 'decorative-one-icon': { - value: 'rgba(126, 87, 0, 1)', - description: - 'For use as a decorative icon color that is applied on a decorative surface.', - }, - 'decorative-one-surface': { - value: 'rgba(255, 201, 107, 1)', - description: 'For use as a decorative surface color.', - }, - 'decorative-one-text': { - value: 'rgba(61, 40, 0, 1)', - description: - 'For use as a decorative text color that is applied on a decorative surface.', - }, - 'decorative-two-icon': { - value: 'rgba(175, 41, 78, 1)', - description: - 'For use as a decorative icon color that is applied on a decorative surface.', - }, - 'decorative-two-surface': { - value: 'rgba(255, 196, 176, 1)', - description: 'For use as a decorative surface color.', - }, - 'decorative-two-text': { - value: 'rgba(73, 11, 28, 1)', - description: - 'For use as a decorative text color that is applied on a decorative surface.', - }, - 'decorative-three-icon': { - value: 'rgba(0, 109, 65, 1)', - description: - 'For use as a decorative icon color that is applied on a decorative surface.', - }, - 'decorative-three-surface': { - value: 'rgba(146, 230, 181, 1)', - description: 'For use as a decorative surface color.', - }, - 'decorative-three-text': { - value: 'rgba(0, 47, 25, 1)', - description: - 'For use as a decorative text color that is applied on a decorative surface.', - }, - 'decorative-four-icon': { - value: 'rgba(0, 106, 104, 1)', - description: - 'For use as a decorative icon color that is applied on a decorative surface.', - }, - 'decorative-four-surface': { - value: 'rgba(145, 224, 214, 1)', - description: 'For use as a decorative surface color.', - }, - 'decorative-four-text': { - value: 'rgba(0, 45, 45, 1)', - description: - 'For use as a decorative text color that is applied on a decorative surface.', - }, - 'decorative-five-icon': { - value: 'rgba(174, 43, 76, 1)', - description: - 'For use as a decorative icon color that is applied on a decorative surface.', - }, - 'decorative-five-surface': { - value: 'rgba(253, 201, 208, 1)', - description: 'For use as a decorative surface color.', - }, - 'decorative-five-text': { - value: 'rgba(79, 14, 31, 1)', - description: - 'For use as a decorative text color that is applied on a decorative surface.', - }, -}; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss deleted file mode 100644 index 00a7f53c590..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss +++ /dev/null @@ -1,68 +0,0 @@ -.duration-simple-string-arg { - transition-duration: duration('none'); - transition-duration: duration('fast'); - transition-duration: duration('base'); - transition-duration: duration('slow'); - transition-duration: duration('slower'); - transition-duration: duration('slowest'); -} - -.duration-simple-non-string-arg { - transition-duration: duration(); - transition-duration: duration(none); - transition-duration: duration(fast); - transition-duration: duration(base); - transition-duration: duration(slow); - transition-duration: duration(slower); - transition-duration: duration(slowest); -} - -.duration-compound-string-arg { - transition: opacity duration('none') linear; - transition: opacity duration('fast') linear; - transition: opacity duration('base') linear; - transition: opacity duration('slow') linear; - transition: opacity duration('slower') linear; - transition: opacity duration('slowest') linear; -} - -.duration-compound-non-string-arg { - transition: opacity duration() linear; - transition: opacity duration(none) linear; - transition: opacity duration(fast) linear; - transition: opacity duration(base) linear; - transition: opacity duration(slow) linear; - transition: opacity duration(slower) linear; - transition: opacity duration(slowest) linear; -} - -.duration-multiple-string-arg { - transition: opacity duration('none') linear, left duration('none') linear; - transition: opacity duration('fast') linear, left duration('fast') linear; - transition: opacity duration('base') linear, left duration('base') linear; - transition: opacity duration('slow') linear, left duration('slow') linear; - transition: opacity duration('slower') linear, left duration('slower') linear; - transition: opacity duration('slowest') linear, - left duration('slowest') linear; -} - -.duration-multiple-non-string-arg { - transition: opacity duration() linear, left duration() linear; - transition: opacity duration(none) linear, left duration(none) linear; - transition: opacity duration(fast) linear, left duration(fast) linear; - transition: opacity duration(base) linear, left duration(base) linear; - transition: opacity duration(slow) linear, left duration(slow) linear; - transition: opacity duration(slower) linear, left duration(slower) linear; - transition: opacity duration(slowest) linear, left duration(slowest) linear; -} - -.duration-edges { - // sass calculation - transition: (duration() - 33ms) fill linear 33ms; - // Duration + Delay - transition: opacity duration(slower) linear duration(fast); - // Duration + Delay after easing func - transition: opacity linear duration(slower) duration(fast); - // foobar isn't a valid duration key - transition-duration: duration(foobar); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss deleted file mode 100644 index d064f2db9ed..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss +++ /dev/null @@ -1,85 +0,0 @@ -.duration-simple-string-arg { - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-500); -} - -.duration-simple-non-string-arg { - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-500); -} - -.duration-compound-string-arg { - transition: opacity var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear; -} - -.duration-compound-non-string-arg { - transition: opacity var(--p-duration-200) linear; - transition: opacity var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear; -} - -.duration-multiple-string-arg { - transition: opacity var(--p-duration-0) linear, - left var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear, - left var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear, - left var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear, - left var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear, - left var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear, - left var(--p-duration-500) linear; -} - -.duration-multiple-non-string-arg { - transition: opacity var(--p-duration-200) linear, - left var(--p-duration-200) linear; - transition: opacity var(--p-duration-0) linear, - left var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear, - left var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear, - left var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear, - left var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear, - left var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear, - left var(--p-duration-500) linear; -} - -.duration-edges { - // sass calculation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // transition: (var(--p-duration-200) - 33ms) fill linear 33ms; - transition: (duration() - 33ms) fill linear 33ms; - // Duration + Delay - transition: opacity var(--p-duration-400) linear var(--p-duration-100); - // Duration + Delay after easing func - transition: opacity linear var(--p-duration-400) var(--p-duration-100); - // foobar isn't a valid duration key - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unknown duration key 'foobar'. - transition-duration: duration(foobar); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss deleted file mode 100644 index 297dc162fb6..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss +++ /dev/null @@ -1,84 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.duration-simple-string-arg { - transition-duration: legacy-polaris-v8.duration('none'); - transition-duration: legacy-polaris-v8.duration('fast'); - transition-duration: legacy-polaris-v8.duration('base'); - transition-duration: legacy-polaris-v8.duration('slow'); - transition-duration: legacy-polaris-v8.duration('slower'); - transition-duration: legacy-polaris-v8.duration('slowest'); -} - -.duration-simple-non-string-arg { - transition-duration: legacy-polaris-v8.duration(); - transition-duration: legacy-polaris-v8.duration(none); - transition-duration: legacy-polaris-v8.duration(fast); - transition-duration: legacy-polaris-v8.duration(base); - transition-duration: legacy-polaris-v8.duration(slow); - transition-duration: legacy-polaris-v8.duration(slower); - transition-duration: legacy-polaris-v8.duration(slowest); -} - -.duration-compound-string-arg { - transition: opacity legacy-polaris-v8.duration('none') linear; - transition: opacity legacy-polaris-v8.duration('fast') linear; - transition: opacity legacy-polaris-v8.duration('base') linear; - transition: opacity legacy-polaris-v8.duration('slow') linear; - transition: opacity legacy-polaris-v8.duration('slower') linear; - transition: opacity legacy-polaris-v8.duration('slowest') linear; -} - -.duration-compound-non-string-arg { - transition: opacity legacy-polaris-v8.duration() linear; - transition: opacity legacy-polaris-v8.duration(none) linear; - transition: opacity legacy-polaris-v8.duration(fast) linear; - transition: opacity legacy-polaris-v8.duration(base) linear; - transition: opacity legacy-polaris-v8.duration(slow) linear; - transition: opacity legacy-polaris-v8.duration(slower) linear; - transition: opacity legacy-polaris-v8.duration(slowest) linear; -} - -.duration-multiple-string-arg { - transition: opacity legacy-polaris-v8.duration('none') linear, - left legacy-polaris-v8.duration('none') linear; - transition: opacity legacy-polaris-v8.duration('fast') linear, - left legacy-polaris-v8.duration('fast') linear; - transition: opacity legacy-polaris-v8.duration('base') linear, - left legacy-polaris-v8.duration('base') linear; - transition: opacity legacy-polaris-v8.duration('slow') linear, - left legacy-polaris-v8.duration('slow') linear; - transition: opacity legacy-polaris-v8.duration('slower') linear, - left legacy-polaris-v8.duration('slower') linear; - transition: opacity legacy-polaris-v8.duration('slowest') linear, - left legacy-polaris-v8.duration('slowest') linear; -} - -.duration-multiple-non-string-arg { - transition: opacity legacy-polaris-v8.duration() linear, - left legacy-polaris-v8.duration() linear; - transition: opacity legacy-polaris-v8.duration(none) linear, - left legacy-polaris-v8.duration(none) linear; - transition: opacity legacy-polaris-v8.duration(fast) linear, - left legacy-polaris-v8.duration(fast) linear; - transition: opacity legacy-polaris-v8.duration(base) linear, - left legacy-polaris-v8.duration(base) linear; - transition: opacity legacy-polaris-v8.duration(slow) linear, - left legacy-polaris-v8.duration(slow) linear; - transition: opacity legacy-polaris-v8.duration(slower) linear, - left legacy-polaris-v8.duration(slower) linear; - transition: opacity legacy-polaris-v8.duration(slowest) linear, - left legacy-polaris-v8.duration(slowest) linear; -} - -.duration-edges { - // sass calculation - transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; - // Duration + Delay - transition: opacity legacy-polaris-v8.duration(slower) linear - legacy-polaris-v8.duration(fast); - // Duration + Delay after easing func - transition: opacity linear legacy-polaris-v8.duration(slower) - legacy-polaris-v8.duration(fast); - // foobar isn't a valid duration key - transition-duration: legacy-polaris-v8.duration(foobar); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss deleted file mode 100644 index 49513236d84..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.duration-simple-string-arg { - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-500); -} - -.duration-simple-non-string-arg { - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-500); -} - -.duration-compound-string-arg { - transition: opacity var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear; -} - -.duration-compound-non-string-arg { - transition: opacity var(--p-duration-200) linear; - transition: opacity var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear; -} - -.duration-multiple-string-arg { - transition: opacity var(--p-duration-0) linear, - left var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear, - left var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear, - left var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear, - left var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear, - left var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear, - left var(--p-duration-500) linear; -} - -.duration-multiple-non-string-arg { - transition: opacity var(--p-duration-200) linear, - left var(--p-duration-200) linear; - transition: opacity var(--p-duration-0) linear, - left var(--p-duration-0) linear; - transition: opacity var(--p-duration-100) linear, - left var(--p-duration-100) linear; - transition: opacity var(--p-duration-200) linear, - left var(--p-duration-200) linear; - transition: opacity var(--p-duration-300) linear, - left var(--p-duration-300) linear; - transition: opacity var(--p-duration-400) linear, - left var(--p-duration-400) linear; - transition: opacity var(--p-duration-500) linear, - left var(--p-duration-500) linear; -} - -.duration-edges { - // sass calculation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // transition: (var(--p-duration-200) - 33ms) fill linear 33ms; - transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; - // Duration + Delay - transition: opacity var(--p-duration-400) linear var(--p-duration-100); - // Duration + Delay after easing func - transition: opacity linear var(--p-duration-400) var(--p-duration-100); - // foobar isn't a valid duration key - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unknown duration key 'foobar'. - transition-duration: legacy-polaris-v8.duration(foobar); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts deleted file mode 100644 index 3ffabe310e4..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts +++ /dev/null @@ -1,86 +0,0 @@ -import valueParser from 'postcss-value-parser'; - -import { - namespace, - isSassFunction, - isNumericOperator, - createSassMigrator as v9ScssReplaceDuration, - setNodeValue, - StopWalkingFunctionNodes, - hasSassFunction, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; -import {scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default v9ScssReplaceDuration( - 'v9-replace-sass-transition', - (_, {methods, options}, context) => { - const namespacedDuration = namespace('duration', options); - - return (root) => { - methods.walkDecls(root, (decl) => { - const parsedValue = valueParser(decl.value); - - if (!hasSassFunction(namespacedDuration, parsedValue)) return; - - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - methods.report({ - node: decl, - severity: 'warning', - message: 'Numeric operator detected.', - }); - } - - if (isSassFunction(namespacedDuration, node)) { - const duration = node.nodes[0]?.value ?? DEFAULT_DURATION; - - if (!isKeyOf(durationMap, duration)) { - methods.report({ - severity: 'warning', - node: decl, - message: `Unknown duration key '${duration}'.`, - }); - return StopWalkingFunctionNodes; - } - - const durationCustomProperty = durationMap[duration]; - const targetValue = `var(${durationCustomProperty})`; - - if (context.fix) { - setNodeValue(node, targetValue); - } else { - methods.report({ - severity: 'error', - node: decl, - message: `Replace duration with token: ${targetValue}`, - }); - } - - return StopWalkingFunctionNodes; - } - }); - - if (context.fix) { - decl.value = parsedValue.toString(); - } - }); - }; - }, -); - -const DEFAULT_DURATION = 'base'; - -const durationMap = { - none: '--p-duration-0', - fast: '--p-duration-100', - base: '--p-duration-200', - slow: '--p-duration-300', - slower: '--p-duration-400', - slowest: '--p-duration-500', -}; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss deleted file mode 100644 index 86f533159b1..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss +++ /dev/null @@ -1,68 +0,0 @@ -.easing-simple-string-arg { - transition-timing-function: easing('anticipate'); - transition-timing-function: easing('base'); - transition-timing-function: easing('excite'); - transition-timing-function: easing('in'); - transition-timing-function: easing('out'); - transition-timing-function: easing('overshoot'); -} - -.easing-simple-non-string-arg { - transition-timing-function: easing(); - transition-timing-function: easing(anticipate); - transition-timing-function: easing(base); - transition-timing-function: easing(excite); - transition-timing-function: easing(in); - transition-timing-function: easing(out); - transition-timing-function: easing(overshoot); -} - -.easing-shorthand-string-arg { - transition: opacity 300ms easing('anticipate'); - transition: opacity 300ms easing('base'); - transition: opacity 300ms easing('excite'); - transition: opacity 300ms easing('in'); - transition: opacity 300ms easing('out'); - transition: opacity 300ms easing('overshoot'); -} - -.easing-shorthand-non-string-arg { - transition: opacity 300ms easing(); - transition: opacity 300ms easing(anticipate); - transition: opacity 300ms easing(base); - transition: opacity 300ms easing(excite); - transition: opacity 300ms easing(in); - transition: opacity 300ms easing(out); - transition: opacity 300ms easing(overshoot); -} - -.easing-multiple-string-arg { - transition: opacity 300ms easing('anticipate'), - left 300ms easing('anticipate'); - transition: opacity 300ms easing('base'), left 300ms easing('base'); - transition: opacity 300ms easing('excite'), left 300ms easing('excite'); - transition: opacity 300ms easing('in'), left 300ms easing('in'); - transition: opacity 300ms easing('out'), left 300ms easing('out'); - transition: opacity 300ms easing('overshoot'), left 300ms easing('overshoot'); -} - -.easing-multiple-non-string-arg { - transition: opacity 300ms easing(), left 300ms easing(); - transition: opacity 300ms easing(anticipate), left 300ms easing(anticipate); - transition: opacity 300ms easing(base), left 300ms easing(base); - transition: opacity 300ms easing(excite), left 300ms easing(excite); - transition: opacity 300ms easing(in), left 300ms easing(in); - transition: opacity 300ms easing(out), left 300ms easing(out); - transition: opacity 300ms easing(overshoot), left 300ms easing(overshoot); -} - -$easingFunc: 'ease-in'; - -.edges { - // Unknown values are flagged - transition-timing-function: easing(foobar); - // Can only handle hard coded values - transition-timing-function: easing($easingFunc); - // Value replacement with legacy easing function value - transition: opacity 300ms easing(base), left 300ms easing(overshoot); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss deleted file mode 100644 index d792846a674..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss +++ /dev/null @@ -1,111 +0,0 @@ -.easing-simple-string-arg { - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: easing('anticipate'); - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: easing('excite'); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: easing('overshoot'); -} - -.easing-simple-non-string-arg { - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: easing(anticipate); - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: easing(excite); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: easing(overshoot); -} - -.easing-shorthand-string-arg { - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing('anticipate'); - transition: opacity 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing('excite'); - transition: opacity 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing('overshoot'); -} - -.easing-shorthand-non-string-arg { - transition: opacity 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing(anticipate); - transition: opacity 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing(excite); - transition: opacity 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing(overshoot); -} - -.easing-multiple-string-arg { - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing('anticipate'), - left 300ms easing('anticipate'); - transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing('excite'), left 300ms easing('excite'); - transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing('overshoot'), left 300ms easing('overshoot'); -} - -.easing-multiple-non-string-arg { - transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing(anticipate), left 300ms easing(anticipate); - transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing(excite), left 300ms easing(excite); - transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms easing(overshoot), left 300ms easing(overshoot); -} - -$easingFunc: 'ease-in'; - -.edges { - // Unknown values are flagged - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'foobar'. - transition-timing-function: easing(foobar); - // Can only handle hard coded values - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function '$easingFunc'. - transition-timing-function: easing($easingFunc); - // Value replacement with legacy easing function value - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity 300ms var(--p-ease), left 300ms easing(overshoot); - transition: opacity 300ms easing(base), left 300ms easing(overshoot); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss deleted file mode 100644 index 74179e31892..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss +++ /dev/null @@ -1,83 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.easing-simple-string-arg { - transition-timing-function: legacy-polaris-v8.easing('anticipate'); - transition-timing-function: legacy-polaris-v8.easing('base'); - transition-timing-function: legacy-polaris-v8.easing('excite'); - transition-timing-function: legacy-polaris-v8.easing('in'); - transition-timing-function: legacy-polaris-v8.easing('out'); - transition-timing-function: legacy-polaris-v8.easing('overshoot'); -} - -.easing-simple-non-string-arg { - transition-timing-function: legacy-polaris-v8.easing(); - transition-timing-function: legacy-polaris-v8.easing(anticipate); - transition-timing-function: legacy-polaris-v8.easing(base); - transition-timing-function: legacy-polaris-v8.easing(excite); - transition-timing-function: legacy-polaris-v8.easing(in); - transition-timing-function: legacy-polaris-v8.easing(out); - transition-timing-function: legacy-polaris-v8.easing(overshoot); -} - -.easing-shorthand-string-arg { - transition: opacity 300ms legacy-polaris-v8.easing('anticipate'); - transition: opacity 300ms legacy-polaris-v8.easing('base'); - transition: opacity 300ms legacy-polaris-v8.easing('excite'); - transition: opacity 300ms legacy-polaris-v8.easing('in'); - transition: opacity 300ms legacy-polaris-v8.easing('out'); - transition: opacity 300ms legacy-polaris-v8.easing('overshoot'); -} - -.easing-shorthand-non-string-arg { - transition: opacity 300ms legacy-polaris-v8.easing(); - transition: opacity 300ms legacy-polaris-v8.easing(anticipate); - transition: opacity 300ms legacy-polaris-v8.easing(base); - transition: opacity 300ms legacy-polaris-v8.easing(excite); - transition: opacity 300ms legacy-polaris-v8.easing(in); - transition: opacity 300ms legacy-polaris-v8.easing(out); - transition: opacity 300ms legacy-polaris-v8.easing(overshoot); -} - -.easing-multiple-string-arg { - transition: opacity 300ms legacy-polaris-v8.easing('anticipate'), - left 300ms legacy-polaris-v8.easing('anticipate'); - transition: opacity 300ms legacy-polaris-v8.easing('base'), - left 300ms legacy-polaris-v8.easing('base'); - transition: opacity 300ms legacy-polaris-v8.easing('excite'), - left 300ms legacy-polaris-v8.easing('excite'); - transition: opacity 300ms legacy-polaris-v8.easing('in'), - left 300ms legacy-polaris-v8.easing('in'); - transition: opacity 300ms legacy-polaris-v8.easing('out'), - left 300ms legacy-polaris-v8.easing('out'); - transition: opacity 300ms legacy-polaris-v8.easing('overshoot'), - left 300ms legacy-polaris-v8.easing('overshoot'); -} - -.easing-multiple-non-string-arg { - transition: opacity 300ms legacy-polaris-v8.easing(), - left 300ms legacy-polaris-v8.easing(); - transition: opacity 300ms legacy-polaris-v8.easing(anticipate), - left 300ms legacy-polaris-v8.easing(anticipate); - transition: opacity 300ms legacy-polaris-v8.easing(base), - left 300ms legacy-polaris-v8.easing(base); - transition: opacity 300ms legacy-polaris-v8.easing(excite), - left 300ms legacy-polaris-v8.easing(excite); - transition: opacity 300ms legacy-polaris-v8.easing(in), - left 300ms legacy-polaris-v8.easing(in); - transition: opacity 300ms legacy-polaris-v8.easing(out), - left 300ms legacy-polaris-v8.easing(out); - transition: opacity 300ms legacy-polaris-v8.easing(overshoot), - left 300ms legacy-polaris-v8.easing(overshoot); -} - -$easingFunc: 'ease-in'; - -.edges { - // Unknown values are flagged - transition-timing-function: legacy-polaris-v8.easing(foobar); - // Can only handle hard coded values - transition-timing-function: legacy-polaris-v8.easing($easingFunc); - // Value replacement with legacy easing function value - transition: opacity 300ms legacy-polaris-v8.easing(base), - left 300ms legacy-polaris-v8.easing(overshoot); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss deleted file mode 100644 index d6a1d3fbc34..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss +++ /dev/null @@ -1,119 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.easing-simple-string-arg { - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing('anticipate'); - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing('excite'); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing('overshoot'); -} - -.easing-simple-non-string-arg { - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing(anticipate); - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing(excite); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing(overshoot); -} - -.easing-shorthand-string-arg { - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing('anticipate'); - transition: opacity 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing('excite'); - transition: opacity 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing('overshoot'); -} - -.easing-shorthand-non-string-arg { - transition: opacity 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing(anticipate); - transition: opacity 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing(excite); - transition: opacity 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing(overshoot); -} - -.easing-multiple-string-arg { - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing('anticipate'), - left 300ms legacy-polaris-v8.easing('anticipate'); - transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing('excite'), - left 300ms legacy-polaris-v8.easing('excite'); - transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing('overshoot'), - left 300ms legacy-polaris-v8.easing('overshoot'); -} - -.easing-multiple-non-string-arg { - transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing(anticipate), - left 300ms legacy-polaris-v8.easing(anticipate); - transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing(excite), - left 300ms legacy-polaris-v8.easing(excite); - transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in); - transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition: opacity 300ms legacy-polaris-v8.easing(overshoot), - left 300ms legacy-polaris-v8.easing(overshoot); -} - -$easingFunc: 'ease-in'; - -.edges { - // Unknown values are flagged - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'foobar'. - transition-timing-function: legacy-polaris-v8.easing(foobar); - // Can only handle hard coded values - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function '$easingFunc'. - transition-timing-function: legacy-polaris-v8.easing($easingFunc); - // Value replacement with legacy easing function value - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity 300ms var(--p-ease), left 300ms legacy-polaris-v8.easing(overshoot); - transition: opacity 300ms legacy-polaris-v8.easing(base), - left 300ms legacy-polaris-v8.easing(overshoot); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts deleted file mode 100644 index 67677eed23c..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts +++ /dev/null @@ -1,91 +0,0 @@ -import valueParser from 'postcss-value-parser'; - -import { - namespace, - isSassFunction, - isNumericOperator, - createSassMigrator as v9ScssReplaceEasing, - setNodeValue, - StopWalkingFunctionNodes, - hasSassFunction, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; -import {scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default v9ScssReplaceEasing( - 'v9-scss-replace-easing', - (_, {methods, options}, context) => { - const namespacedEasing = namespace('easing', options); - - return (root) => { - methods.walkDecls(root, (decl) => { - const parsedValue = valueParser(decl.value); - - if (!hasSassFunction(namespacedEasing, parsedValue)) return; - - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - methods.report({ - node: decl, - severity: 'warning', - message: 'Numeric operator detected.', - }); - return; - } - - if (isSassFunction(namespacedEasing, node)) { - const easing = node.nodes[0]?.value ?? DEFAULT_EASING; - - if (!isKeyOf(easingMap, easing)) { - const comment = deprecatedEasingFuncs.includes(easing) - ? `The ${easing} easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.` - : `Unexpected easing function '${easing}'.`; - - methods.report({ - severity: 'warning', - node: decl, - message: comment, - }); - - return StopWalkingFunctionNodes; - } - - const easingCustomProperty = easingMap[easing]; - const targetValue = `var(${easingCustomProperty})`; - - if (context.fix) { - setNodeValue(node, targetValue); - } else { - methods.report({ - severity: 'error', - node: decl, - message: `Replace easing function with token: ${targetValue}`, - }); - } - - return StopWalkingFunctionNodes; - } - }); - - if (context.fix) { - decl.value = parsedValue.toString(); - } - }); - }; - }, -); - -const DEFAULT_EASING = 'base'; - -const easingMap = { - base: '--p-ease', - in: '--p-ease-in', - out: '--p-ease-out', -}; - -const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot']; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss deleted file mode 100644 index 90e6fc64a15..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss +++ /dev/null @@ -1,6 +0,0 @@ -.font-family { - font-family: sans-serif; - font-family: font-family(); - font-family: font-family(base); - font-family: font-family(monospace); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss deleted file mode 100644 index 30ee98afdab..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss +++ /dev/null @@ -1,6 +0,0 @@ -.font-family { - font-family: sans-serif; - font-family: var(--p-font-family-sans); - font-family: var(--p-font-family-sans); - font-family: var(--p-font-family-mono); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss deleted file mode 100644 index e01f6b5f5d7..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-family { - font-family: sans-serif; - font-family: legacy-polaris-v8.font-family(); - font-family: legacy-polaris-v8.font-family(base); - font-family: legacy-polaris-v8.font-family(monospace); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss deleted file mode 100644 index c785e29c78a..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-family { - font-family: sans-serif; - font-family: var(--p-font-family-sans); - font-family: var(--p-font-family-sans); - font-family: var(--p-font-family-mono); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss deleted file mode 100644 index e505a60654a..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss +++ /dev/null @@ -1,9 +0,0 @@ -.font-size { - font-size: font-size(caption); - font-size: font-size(caption, base); - font-size: font-size(caption, large-screen); - // Comment - font-size: font-size($invalid); - font-size: font-size(caption, $invalid); - font-size: font-size(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss deleted file mode 100644 index 5981047d94d..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss +++ /dev/null @@ -1,15 +0,0 @@ -.font-size { - font-size: 0.8125rem; - font-size: 0.8125rem; - font-size: var(--p-font-size-75); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: font-size($invalid); - font-size: font-size($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: font-size(caption, $invalid); - font-size: font-size(caption, $invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: font-size(); - font-size: font-size(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss deleted file mode 100644 index 0f2b7456c60..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-size { - font-size: legacy-polaris-v8.font-size(caption); - font-size: legacy-polaris-v8.font-size(caption, base); - font-size: legacy-polaris-v8.font-size(caption, large-screen); - // Comment - font-size: legacy-polaris-v8.font-size($invalid); - font-size: legacy-polaris-v8.font-size(caption, $invalid); - font-size: legacy-polaris-v8.font-size(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss deleted file mode 100644 index ed966b59d7f..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-size { - font-size: 0.8125rem; - font-size: 0.8125rem; - font-size: var(--p-font-size-75); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.font-size($invalid); - font-size: legacy-polaris-v8.font-size($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.font-size(caption, $invalid); - font-size: legacy-polaris-v8.font-size(caption, $invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.font-size(); - font-size: legacy-polaris-v8.font-size(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts deleted file mode 100644 index 4b0c822d40c..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts +++ /dev/null @@ -1,154 +0,0 @@ -/* eslint-disable line-comment-position */ - -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; -import valueParser from 'postcss-value-parser'; - -import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants'; -import type {NamespaceOptions} from '../../utilities/sass'; -import { - createInlineComment, - getFunctionArgs, - isSassFunction, - namespace, - StopWalkingFunctionNodes, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -const processed = Symbol('processed'); - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedFontSize = namespace('font-size', options); - - return { - postcssPlugin: 'v9-scss-replace-font', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - let needsFix = false; - let needsComment = false; - const parsedValue = valueParser(decl.value); - - parsedValue.walk((node) => { - if (isSassFunction(namespacedFontSize, node)) { - const args = getFunctionArgs(node); - - // `font-size()` args reference: - // https://github.com/Shopify/polaris/blob/1738f17c739e06dcde4653a9783ca367e38b4e32/documentation/guides/legacy-polaris-v8-public-api.scss#L977 - const styleArg = args[0]; - const variantArg = args[1] ?? 'base'; - - if ( - !( - isKeyOf(fontSizeMap, styleArg) && - isKeyOf(fontSizeMap[styleArg], variantArg) - ) - ) { - needsComment = true; - return StopWalkingFunctionNodes; - } - - needsFix = true; - const fontSizeVariant = fontSizeMap[styleArg][variantArg]; - - if (fontSizeVariant.startsWith('--')) { - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: fontSizeVariant, - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: fontSizeVariant.length, - }, - ]; - } else { - // @ts-expect-error: We are intentionally changing the node type - node.type = 'word'; - node.value = fontSizeVariant; - } - return StopWalkingFunctionNodes; - } - }); - - if (needsComment) { - decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - decl.before( - createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), - ); - } - - if (needsFix) { - decl.value = parsedValue.toString(); - } - - // @ts-expect-error - Mark the declaration as processed - decl[processed] = true; - }, - }; -}; - -const fontSizeMap = { - caption: { - base: '0.8125rem', // 13px - 'large-screen': '--p-font-size-75', - }, - heading: { - base: '1.0625rem', // 17px - 'large-screen': '--p-font-size-200', - }, - subheading: { - base: '0.8125rem', // 13px - 'large-screen': '--p-font-size-75', - }, - input: { - base: '--p-font-size-200', - 'large-screen': '--p-font-size-100', - }, - body: { - base: '0.9375rem', // 15px - 'large-screen': '--p-font-size-100', - }, - button: { - base: '0.9375rem', // 15px - 'large-screen': '--p-font-size-100', - }, - 'button-large': { - base: '1.0625rem', // 17px - 'large-screen': '--p-font-size-200', - }, - 'display-x-large': { - base: '1.6875rem', // 27px - 'large-screen': '2.625rem', // 42px - }, - 'display-large': { - base: '--p-font-size-400', - 'large-screen': '--p-font-size-500', - }, - 'display-medium': { - base: '1.3125rem', // 21px - 'large-screen': '1.625rem', // 26px - }, - 'display-small': { - base: '--p-font-size-200', - 'large-screen': '--p-font-size-300', - }, -}; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss deleted file mode 100644 index a12e13944ab..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss +++ /dev/null @@ -1,10 +0,0 @@ -.font-line-height { - line-height: line-height(caption); - line-height: line-height(caption, base); - line-height: line-height(caption, large-screen); - line-height: line-height(display-x-large, base); - // Comment - line-height: line-height($invalid); - line-height: line-height(caption, $invalid); - line-height: line-height(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss deleted file mode 100644 index 6b4dc9271f8..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss +++ /dev/null @@ -1,16 +0,0 @@ -.font-line-height { - line-height: var(--p-font-line-height-2); - line-height: var(--p-font-line-height-2); - line-height: var(--p-font-line-height-1); - line-height: 2.25rem; - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: line-height($invalid); - line-height: line-height($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: line-height(caption, $invalid); - line-height: line-height(caption, $invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: line-height(); - line-height: line-height(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss deleted file mode 100644 index fa3e2a9d1ed..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-line-height { - line-height: legacy-polaris-v8.line-height(caption); - line-height: legacy-polaris-v8.line-height(caption, base); - line-height: legacy-polaris-v8.line-height(caption, large-screen); - line-height: legacy-polaris-v8.line-height(display-x-large, base); - // Comment - line-height: legacy-polaris-v8.line-height($invalid); - line-height: legacy-polaris-v8.line-height(caption, $invalid); - line-height: legacy-polaris-v8.line-height(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss deleted file mode 100644 index 2de4d6ccf73..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-line-height { - line-height: var(--p-font-line-height-2); - line-height: var(--p-font-line-height-2); - line-height: var(--p-font-line-height-1); - line-height: 2.25rem; - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: legacy-polaris-v8.line-height($invalid); - line-height: legacy-polaris-v8.line-height($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: legacy-polaris-v8.line-height(caption, $invalid); - line-height: legacy-polaris-v8.line-height(caption, $invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: legacy-polaris-v8.line-height(); - line-height: legacy-polaris-v8.line-height(); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts deleted file mode 100644 index 2f373005fa7..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts +++ /dev/null @@ -1,149 +0,0 @@ -/* eslint-disable line-comment-position */ - -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; -import valueParser from 'postcss-value-parser'; - -import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants'; -import type {NamespaceOptions} from '../../utilities/sass'; -import { - createInlineComment, - getFunctionArgs, - isSassFunction, - namespace, - StopWalkingFunctionNodes, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -const processed = Symbol('processed'); - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedLineHeight = namespace('line-height', options); - - return { - postcssPlugin: 'v9-scss-replace-line-height', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - let needsFix = false; - let needsComment = false; - const parsedValue = valueParser(decl.value); - - parsedValue.walk((node) => { - if (isSassFunction(namespacedLineHeight, node)) { - const args = getFunctionArgs(node); - - // `line-height()` args reference: - // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L961 - const styleArg = args[0]; - const variantArg = args[1] ?? 'base'; - - if ( - !( - isKeyOf(lineHeightMap, styleArg) && - isKeyOf(lineHeightMap[styleArg], variantArg) - ) - ) { - needsComment = true; - return StopWalkingFunctionNodes; - } - - needsFix = true; - const lineHeightVariant = lineHeightMap[styleArg][variantArg]; - - if (lineHeightVariant.startsWith('--')) { - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: lineHeightVariant, - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: lineHeightVariant.length, - }, - ]; - } else { - // @ts-expect-error: We are intentionally changing the node type - node.type = 'word'; - node.value = lineHeightVariant; - } - - return StopWalkingFunctionNodes; - } - }); - - if (needsComment) { - decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - decl.before( - createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), - ); - } - - if (needsFix) { - decl.value = parsedValue.toString(); - } - - // @ts-expect-error - Mark the declaration as processed - decl[processed] = true; - }, - }; -}; - -const lineHeightMap = { - caption: { - base: '--p-font-line-height-2', - 'large-screen': '--p-font-line-height-1', - }, - heading: { - base: '--p-font-line-height-3', - }, - subheading: { - base: '--p-font-line-height-1', - }, - input: { - base: '--p-font-line-height-3', - }, - body: { - base: '--p-font-line-height-2', - }, - button: { - base: '--p-font-line-height-1', - }, - 'button-large': { - base: '--p-font-line-height-2', - }, - 'display-x-large': { - base: '2.25rem', // 36px - 'large-screen': '2.75rem', // 44px - }, - 'display-large': { - base: '--p-font-line-height-4', - 'large-screen': '--p-font-line-height-5', - }, - 'display-medium': { - base: '--p-font-line-height-4', - 'large-screen': '--p-font-line-height-5', - }, - 'display-small': { - base: '--p-font-line-height-3', - 'large-screen': '--p-font-line-height-4', - }, -}; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss deleted file mode 100644 index a489262926b..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.my-class { - // Standard replacement - padding: spacing(); - padding: spacing(loose); - // With multiple values - padding: spacing() spacing(); - padding: spacing() 0 spacing() 0; - // With interpolation - padding: calc(50% - #{spacing()}); - // With negative interpolation - padding: -#{spacing()}; - // With other functions - padding: calc(#{rem(16px)} + #{spacing()}); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss deleted file mode 100644 index 309f1c22cc3..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.my-class { - // Standard replacement - padding: var(--p-space-4); - padding: var(--p-space-5); - // With multiple values - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) 0 var(--p-space-4) 0; - // With interpolation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // padding: calc(50% - var(--p-space-4)); - padding: calc(50% - #{spacing()}); - // With negative interpolation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // padding: -1 * var(--p-space-4); - padding: -#{spacing()}; - // With other functions - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // padding: calc(#{rem(16px)} + var(--p-space-4)); - padding: calc(#{rem(16px)} + #{spacing()}); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss deleted file mode 100644 index db00dc052f5..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.my-class { - // Standard replacement - padding: legacy-polaris-v8.spacing(); - padding: legacy-polaris-v8.spacing(loose); - // With multiple values - padding: legacy-polaris-v8.spacing() legacy-polaris-v8.spacing(); - padding: legacy-polaris-v8.spacing() 0 legacy-polaris-v8.spacing() 0; - // With interpolation - padding: calc(50% - #{legacy-polaris-v8.spacing()}); - // With negative interpolation - padding: -#{legacy-polaris-v8.spacing()}; - // With other functions - padding: calc( - #{legacy-polaris-v8.rem(16px)} + #{legacy-polaris-v8.spacing()} - ); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss deleted file mode 100644 index 6e4ed7a4eed..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.my-class { - // Standard replacement - padding: var(--p-space-4); - padding: var(--p-space-5); - // With multiple values - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) 0 var(--p-space-4) 0; - // With interpolation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // padding: calc(50% - var(--p-space-4)); - padding: calc(50% - #{legacy-polaris-v8.spacing()}); - // With negative interpolation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // padding: -1 * var(--p-space-4); - 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)} + #{legacy-polaris-v8.spacing()} - ); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss deleted file mode 100644 index 0a2528a4fe0..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss +++ /dev/null @@ -1,15 +0,0 @@ -.normal { - @include text-emphasis-normal; -} - -.strong { - @include text-emphasis-strong; -} - -.subdued { - @include text-emphasis-subdued; -} - -.subdued-with-args { - @include text-emphasis-subdued(green); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss deleted file mode 100644 index 17472599213..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss +++ /dev/null @@ -1,16 +0,0 @@ -.normal { - color: var(--p-text); - font-weight: var(--p-font-weight-regular); -} - -.strong { - font-weight: var(--p-font-weight-semibold); -} - -.subdued { - color: var(--p-text-subdued); -} - -.subdued-with-args { - color: var(--p-text-subdued); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss deleted file mode 100644 index dea6c823eb2..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.normal { - @include legacy-polaris-v8.text-emphasis-normal; -} - -.strong { - @include legacy-polaris-v8.text-emphasis-strong; -} - -.subdued { - @include legacy-polaris-v8.text-emphasis-subdued; -} - -.subdued-with-args { - @include legacy-polaris-v8.text-emphasis-subdued(green); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss deleted file mode 100644 index 4650b2e511c..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.normal { - color: var(--p-text); - font-weight: var(--p-font-weight-regular); -} - -.strong { - font-weight: var(--p-font-weight-semibold); -} - -.subdued { - color: var(--p-text-subdued); -} - -.subdued-with-args { - color: var(--p-text-subdued); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts deleted file mode 100644 index 730a5d53457..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; - -import type {NamespaceOptions} from '../../utilities/sass'; -import {getNamespacePattern} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; -import {scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacePattern = getNamespacePattern(options); - - const namespacedMixinRegExp = new RegExp( - String.raw`^${namespacePattern}([\w-]+)`, - ); - - return { - postcssPlugin: 'v9-scss-replace-text-emphasis', - AtRule(atRule) { - if (atRule.name !== 'include') return; - - // Extract mixin name e.g. name from `@include name;` or `@include name();` - const mixinName = atRule.params.match(namespacedMixinRegExp)?.[1]; - - if (!isKeyOf(staticMixins, mixinName)) return; - - atRule.replaceWith( - ...Object.entries(staticMixins[mixinName]).map(([prop, value]) => - postcss.decl({ - prop, - value, - }), - ), - ); - }, - }; -}; - -/** Mapping of static mixins to replacement declarations */ -const staticMixins = { - // Note: The below mixins do accept arguments, but the logic has - // since been removed from the mixins. - 'text-emphasis-subdued': { - color: 'var(--p-text-subdued)', - }, - 'text-emphasis-strong': { - 'font-weight': 'var(--p-font-weight-semibold)', - }, - 'text-emphasis-normal': { - color: 'var(--p-text)', - 'font-weight': 'var(--p-font-weight-regular)', - }, -}; diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss deleted file mode 100644 index 99dbb60357b..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss +++ /dev/null @@ -1,40 +0,0 @@ -$someElement: ( - someKey: 1000;, -); - -.scenario-1 { - z-index: z-index(content) + 1; - background-color: var(--p-background); -} - -.scenario-2 { - z-index: z-index(overlay) + 1; - background-color: var(--p-background); -} - -.scenario-3 { - z-index: z-index(content); - background-color: var(--p-background); -} - -.scenario-4 { - z-index: z-index(overlay); - background-color: var(--p-background); -} - -.scenario-5 { - z-index: z-index(someKey, $someElement); - background-color: var(--p-background); -} - -.scenario-6 { - z-index: calc(z-index(overlay) + z-index(content)); -} - -.scenario-7 { - z-index: calc(#{z-index(dev-ui, $fixed-element-stacking-order)} + 1); -} - -.scenario-8 { - z-index: z-index(modal, $fixed-element-stacking-order); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss deleted file mode 100644 index 99ee81813a5..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss +++ /dev/null @@ -1,48 +0,0 @@ -$someElement: ( - someKey: 1000;, -); - -.scenario-1 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: var(--p-z-1) + 1; */ - z-index: z-index(content) + 1; - background-color: var(--p-background); -} - -.scenario-2 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: var(--p-z-2) + 1; */ - z-index: z-index(overlay) + 1; - background-color: var(--p-background); -} - -.scenario-3 { - z-index: var(--p-z-1); - background-color: var(--p-background); -} - -.scenario-4 { - z-index: var(--p-z-2); - background-color: var(--p-background); -} - -.scenario-5 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: map.get($someElement, someKey); */ - z-index: z-index(someKey, $someElement); - background-color: var(--p-background); -} - -.scenario-6 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: calc(var(--p-z-2) + var(--p-z-1)); */ - z-index: calc(z-index(overlay) + z-index(content)); -} - -.scenario-7 { - z-index: calc(#{z-index(dev-ui, $fixed-element-stacking-order)} + 1); -} - -.scenario-8 { - z-index: var(--p-z-11); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss deleted file mode 100644 index 9a981245305..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss +++ /dev/null @@ -1,48 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; -$someElement: ( - someKey: 1000;, -); - -.scenario-1 { - z-index: legacy-polaris-v8.z-index(content) + 1; - background-color: var(--p-background); -} - -.scenario-2 { - z-index: legacy-polaris-v8.z-index(overlay) + 1; - background-color: var(--p-background); -} - -.scenario-3 { - z-index: legacy-polaris-v8.z-index(content); - background-color: var(--p-background); -} - -.scenario-4 { - z-index: legacy-polaris-v8.z-index(overlay); - background-color: var(--p-background); -} - -.scenario-5 { - z-index: legacy-polaris-v8.z-index(someKey, $someElement); - background-color: var(--p-background); -} - -.scenario-6 { - z-index: calc( - legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content) - ); -} - -.scenario-7 { - z-index: calc( - #{legacy-polaris-v8.z-index(dev-ui, $fixed-element-stacking-order)} + 1 - ); -} - -.scenario-8 { - z-index: legacy-polaris-v8.z-index( - modal, - legacy-polaris-v8.$fixed-element-stacking-order - ); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss deleted file mode 100644 index a8bc3374fdb..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; -$someElement: ( - someKey: 1000;, -); - -.scenario-1 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: var(--p-z-1) + 1; */ - z-index: legacy-polaris-v8.z-index(content) + 1; - background-color: var(--p-background); -} - -.scenario-2 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: var(--p-z-2) + 1; */ - z-index: legacy-polaris-v8.z-index(overlay) + 1; - background-color: var(--p-background); -} - -.scenario-3 { - z-index: var(--p-z-1); - background-color: var(--p-background); -} - -.scenario-4 { - z-index: var(--p-z-2); - background-color: var(--p-background); -} - -.scenario-5 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: map.get($someElement, someKey); */ - z-index: legacy-polaris-v8.z-index(someKey, $someElement); - background-color: var(--p-background); -} - -.scenario-6 { - /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */ - /* z-index: calc( - var(--p-z-2) + var(--p-z-1) - ); */ - z-index: calc( - legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content) - ); -} - -.scenario-7 { - z-index: calc( - #{legacy-polaris-v8.z-index(dev-ui, $fixed-element-stacking-order)} + 1 - ); -} - -.scenario-8 { - z-index: var(--p-z-11); -} diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts deleted file mode 100644 index 7aab5cc4491..00000000000 --- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts +++ /dev/null @@ -1,142 +0,0 @@ -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; -import type {API, FileInfo, Options} from 'jscodeshift'; -import type {FunctionNode, Node} from 'postcss-value-parser'; -import valueParser from 'postcss-value-parser'; - -import type {NamespaceOptions} from '../../utilities/sass'; -import { - namespace, - hasSassFunction, - isSassFunction, - hasNumericOperator, -} from '../../utilities/sass'; -import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -interface PluginOptions extends Options, NamespaceOptions {} - -const processed = Symbol('processed'); - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedZIndex = namespace('z-index', options); - const namespacedFixedElementStackingOrder = namespace( - '$fixed-element-stacking-order', - options, - ); - return { - postcssPlugin: 'v9-scss-replace-z-index', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - const parsedValue = valueParser(decl.value); - - if (!hasSassFunction(namespacedZIndex, parsedValue)) return; - - let containsUnknownSecondArgument = false; - - parsedValue.walk((node: Node) => { - if (!isSassFunction(namespacedZIndex, node)) return; - if (hasMoreThanOneArgument(node)) { - // If there's more than one argument to the zIndex fn - // We assume they're passing in a custom map - // In this case its unlikely this will resolve to a polaris token value - // transform legacy zIndex usage to map-get and move on. - - const [key, _, map] = node.nodes; - if ( - map.value === namespacedFixedElementStackingOrder && - isValidElement(key.value, fixedElementStackingOrder) - ) { - const fixedElementStackingOrderToken = - fixedElementStackingOrder[key.value]; - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: fixedElementStackingOrderToken, - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: fixedElementStackingOrderToken.length, - }, - ]; - } else { - // map.get arguments are in the reverse order to z-index arguments. - // map.get expects the map object first, and the key second. - containsUnknownSecondArgument = true; - node.value = 'map.get'; - node.nodes.reverse(); - } - } else { - const element = node.nodes[0]?.value ?? ''; - if (!isValidElement(element, zIndexMap)) return; - const zIndexCustomProperty = zIndexMap[element]; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: zIndexCustomProperty, - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: zIndexCustomProperty.length, - }, - ]; - } - }); - - if (hasNumericOperator(parsedValue) || containsUnknownSecondArgument) { - // Insert comment if the declaration value contains calculations - // or if the invocation of zIndex has more than one argument - decl.before(postcss.comment({text: POLARIS_MIGRATOR_COMMENT})); - decl.before( - postcss.comment({text: `${decl.prop}: ${parsedValue.toString()};`}), - ); - } else { - decl.value = parsedValue.toString(); - } - - // @ts-expect-error - Mark the declaration as processed - decl[processed] = true; - }, - }; -}; - -const zIndexMap = { - content: '--p-z-1', - overlay: '--p-z-2', -}; - -const fixedElementStackingOrder = { - 'global-ribbon': '--p-z-3', - 'top-bar': '--p-z-4', - 'context-bar': '--p-z-5', - 'small-screen-loading-bar': '--p-z-6', - 'nav-backdrop': '--p-z-7', - nav: '--p-z-8', - 'skip-to-content': '--p-z-9', - backdrop: '--p-z-10', - modal: '--p-z-11', - toast: '--p-z-12', -}; - -function isValidElement< - MapType extends typeof zIndexMap | typeof fixedElementStackingOrder, ->(element: unknown, mapObj: MapType): element is keyof typeof mapObj { - return Object.keys(mapObj).includes(element as string); -} - -const hasMoreThanOneArgument = (node: FunctionNode) => node.nodes.length > 1; diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss deleted file mode 100644 index d6b18775d69..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss +++ /dev/null @@ -1,7 +0,0 @@ -.border { - border-radius: var(--p-border-radius-base); - border-radius: var(--p-border-radius-full); - border-radius: var(--p-border-radius-slim); - border-radius: var(--p-border-radius-wide); - border-radius: var(--p-text-field-focus-ring-border-radius); -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss deleted file mode 100644 index adc5897b4e7..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss +++ /dev/null @@ -1,7 +0,0 @@ -.border { - border-radius: var(--p-border-radius-1); - border-radius: var(--p-border-radius-half); - border-radius: var(--p-border-radius-05); - border-radius: var(--p-border-radius-2); - border-radius: 0.4375rem; -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss deleted file mode 100644 index c09da330a6a..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss +++ /dev/null @@ -1,12 +0,0 @@ -.depth { - box-shadow: var(--p-button-drop-shadow); - box-shadow: var(--p-button-inner-shadow); - box-shadow: var(--p-button-pressed-inner-shadow); - box-shadow: var(--p-card-shadow); - box-shadow: var(--p-modal-shadow); - box-shadow: var(--p-popover-shadow); - box-shadow: var(--p-top-bar-shadow); - box-shadow: 1px 1px var(--p-shadow-from-ambient-light); - box-shadow: 1px 1px var(--p-shadow-from-dim-light); - box-shadow: 1px 1px var(--p-shadow-from-direct-light); -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss deleted file mode 100644 index eccf50af311..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss +++ /dev/null @@ -1,12 +0,0 @@ -.depth { - box-shadow: var(--p-shadow-button); - box-shadow: var(--p-shadows-inset-button); - box-shadow: var(--p-shadows-inset-button-pressed); - box-shadow: var(--p-shadow-card); - box-shadow: var(--p-shadow-modal); - box-shadow: var(--p-shadow-popover); - box-shadow: var(--p-shadow-top-bar); - box-shadow: 1px 1px rgba(23, 24, 24, 0.05); - box-shadow: 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: 1px 1px rgba(0, 0, 0, 0.15); -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss deleted file mode 100644 index 63d36ad80f7..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss +++ /dev/null @@ -1,4 +0,0 @@ -.font { - font-weight: var(--p-badge-font-weight); - font-weight: var(--p-button-font-weight); -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss deleted file mode 100644 index 904cf79fa0e..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss +++ /dev/null @@ -1,4 +0,0 @@ -.font { - font-weight: var(--p-font-weight-regular); - font-weight: var(--p-font-weight-medium); -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss deleted file mode 100644 index 990ef6b34a6..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss +++ /dev/null @@ -1,14 +0,0 @@ -.legacy { - display: var(--p-override-none); - flex: var(--p-override-one); - overflow: var(--p-override-visible); - padding: var(--p-override-zero); - background-color: var(--p-override-transparent); - width: var(--p-icon-size); - scale: var(--p-range-slider-thumb-scale); - mix-blend-mode: var(--p-badge-mix-blend-mode); - - &::before { - content: var(--p-non-null-content); - } -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss deleted file mode 100644 index 70f38cbd3f4..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss +++ /dev/null @@ -1,14 +0,0 @@ -.legacy { - display: none; - flex: 1; - overflow: visible; - padding: 0; - background-color: transparent; - width: var(--p-icon-size-small); - scale: 1.5; - mix-blend-mode: luminosity; - - &::before { - content: ''; - } -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss deleted file mode 100644 index fdf7ee6575b..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss +++ /dev/null @@ -1,4 +0,0 @@ -.motion { - transition: transform var(--p-duration-1-0-0) var(--p-ease); - transition: transform var(--p-duration-1-5-0) var(--p-ease); -} diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss deleted file mode 100644 index 3be72cb3970..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss +++ /dev/null @@ -1,4 +0,0 @@ -.motion { - transition: transform var(--p-duration-100) var(--p-ease); - transition: transform var(--p-duration-150) var(--p-ease); -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss deleted file mode 100644 index a5cc0febe3b..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss +++ /dev/null @@ -1,69 +0,0 @@ -@font-face { - font-family: 'Custom Font'; - font-weight: 400; -} - -.font-size { - // LENGTHS - font-size: 12px; - font-size: 1rem; - // Ignore - font-size: 1em; - font-size: #{1px}; - // Comment - font-size: 10px; - font-size: 12px + 1px; - - // REM FUNCTION - font-size: rem(12px); - font-size: rem(1rem); - // Comment - font-size: rem(1em); - font-size: rem(10px); - font-size: rem($invalid); - font-size: rem(); - font-size: rem(12px, $too-many-args); - font-size: rem(12px) 1px; - font-size: rem(1px) 12px; - font-size: rem(#{10px + 2px}) 12px; - font-size: rem(12px) + #{10px + 2px}; -} - -.font-weight { - // LENGTHS - font-weight: 400; - font-weight: 700; - // Comment - font-weight: 300; - font-weight: 400 + 300; - - // ALIAS - font-weight: normal; - font-weight: bold; - // Ignore - font-weight: inherit; - // Comment - font-weight: bolder; -} - -.font-line-height { - // LENGTHS - line-height: 16px; - line-height: 1rem; - // Comment - line-height: 10px; - - // REM FUNCTION - line-height: rem(16px); - line-height: rem(1rem); - // Comment - line-height: rem(1em); - line-height: rem(10px); - line-height: rem($invalid); - line-height: rem(); - line-height: rem(16px, $too-many-args); - line-height: rem(16px) 1px; - line-height: rem(1px) 16px; - line-height: rem(#{10px + 6px}) 16px; - line-height: rem(16px) + #{10px + 6px}; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss deleted file mode 100644 index 0d7da2dff8e..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss +++ /dev/null @@ -1,117 +0,0 @@ -@font-face { - font-family: 'Custom Font'; - font-weight: 400; -} - -.font-size { - // LENGTHS - font-size: var(--p-font-size-75); - font-size: var(--p-font-size-200); - // Ignore - font-size: 1em; - font-size: #{1px}; - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: 10px; - font-size: 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: var(--p-font-size-75) + 1px; - font-size: 12px + 1px; - - // REM FUNCTION - font-size: var(--p-font-size-75); - font-size: var(--p-font-size-200); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem(1em); - font-size: rem(1em); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem(10px); - font-size: rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem($invalid); - font-size: rem($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem(); - font-size: rem(); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem(var(--p-font-size-75), $too-many-args); - font-size: rem(12px, $too-many-args); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: var(--p-font-size-75) 1px; - font-size: rem(12px) 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem(1px) var(--p-font-size-75); - font-size: rem(1px) 12px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: rem(#{10px + 2px}) var(--p-font-size-75); - font-size: rem(#{10px + 2px}) 12px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: var(--p-font-size-75) + #{10px + 2px}; - font-size: rem(12px) + #{10px + 2px}; -} - -.font-weight { - // LENGTHS - font-weight: var(--p-font-weight-regular); - font-weight: var(--p-font-weight-bold); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-weight: 300; - font-weight: 300; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-weight: var(--p-font-weight-regular) + 300; - font-weight: 400 + 300; - - // ALIAS - font-weight: var(--p-font-weight-regular); - font-weight: var(--p-font-weight-bold); - // Ignore - font-weight: inherit; - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-weight: bolder; - font-weight: bolder; -} - -.font-line-height { - // LENGTHS - line-height: var(--p-font-line-height-1); - line-height: var(--p-font-line-height-1); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: 10px; - line-height: 10px; - - // REM FUNCTION - line-height: var(--p-font-line-height-1); - line-height: var(--p-font-line-height-1); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem(1em); - line-height: rem(1em); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem(10px); - line-height: rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem($invalid); - line-height: rem($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem(); - line-height: rem(); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem(var(--p-font-line-height-1), $too-many-args); - line-height: rem(16px, $too-many-args); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: var(--p-font-line-height-1) 1px; - line-height: rem(16px) 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem(1px) var(--p-font-line-height-1); - line-height: rem(1px) 16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: rem(#{10px + 6px}) var(--p-font-line-height-1); - line-height: rem(#{10px + 6px}) 16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // line-height: var(--p-font-line-height-1) + #{10px + 6px}; - line-height: rem(16px) + #{10px + 6px}; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss deleted file mode 100644 index 2af110f3593..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-size { - // REM FUNCTION - font-size: legacy-polaris-v8.rem(12px); - font-size: legacy-polaris-v8.rem(1rem); - // Comment - font-size: legacy-polaris-v8.rem(1em); - font-size: legacy-polaris-v8.rem(10px); - font-size: legacy-polaris-v8.rem($invalid); - font-size: legacy-polaris-v8.rem(); - font-size: legacy-polaris-v8.rem(12px, $too-many-args); - font-size: legacy-polaris-v8.rem(12px) 1px; - font-size: legacy-polaris-v8.rem(1px) 12px; - font-size: legacy-polaris-v8.rem(#{10px + 2px}) 12px; - font-size: legacy-polaris-v8.rem(12px) + #{10px + 2px}; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss deleted file mode 100644 index 9b8e72e6715..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.font-size { - // REM FUNCTION - font-size: var(--p-font-size-75); - font-size: var(--p-font-size-200); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem(1em); - font-size: legacy-polaris-v8.rem(1em); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem(10px); - font-size: legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem($invalid); - font-size: legacy-polaris-v8.rem($invalid); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem(); - font-size: legacy-polaris-v8.rem(); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem(var(--p-font-size-75), $too-many-args); - font-size: legacy-polaris-v8.rem(12px, $too-many-args); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: var(--p-font-size-75) 1px; - font-size: legacy-polaris-v8.rem(12px) 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem(1px) var(--p-font-size-75); - font-size: legacy-polaris-v8.rem(1px) 12px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: legacy-polaris-v8.rem(#{10px + 2px}) var(--p-font-size-75); - font-size: legacy-polaris-v8.rem(#{10px + 2px}) 12px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // font-size: var(--p-font-size-75) + #{10px + 2px}; - font-size: legacy-polaris-v8.rem(12px) + #{10px + 2px}; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts deleted file mode 100644 index 78dc2ec16f3..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts +++ /dev/null @@ -1,274 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin, AtRule} from 'postcss'; -import postcss from 'postcss'; -import valueParser from 'postcss-value-parser'; -import {toPx} from '@shopify/polaris-tokens'; - -import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants'; -import type {NamespaceOptions} from '../../utilities/sass'; -import { - createInlineComment, - getFunctionArgs, - isNumericOperator, - isSassFunction, - isTransformableLength, - isUnitlessZero, - namespace, - toTransformablePx, - StopWalkingFunctionNodes, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -const processed = Symbol('processed'); - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedRem = namespace('rem', options); - - return { - postcssPlugin: 'v9-styles-tokenize-font', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - if ( - decl.parent && - decl.parent.type === 'atrule' && - (decl.parent as AtRule).name === 'font-face' - ) { - return; - } - - const handlers = { - 'font-size': handleFontSize, - 'font-weight': handleFontWeight, - 'line-height': handleFontLineHeight, - }; - - if (!isKeyOf(handlers, decl.prop)) return; - - /** - * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.) - * - * Note: This is evaluated at the end of each visitor execution to determine whether - * or not to replace the declaration or insert a comment. - */ - const targets: {replaced: boolean}[] = []; - let hasNumericOperator = false; - - const parsedValue = valueParser(decl.value); - - handlers[decl.prop](); - - if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { - decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - decl.before( - createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), - ); - } else { - decl.value = parsedValue.toString(); - } - - // - // Handlers - // - - function handleFontSize() { - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - hasNumericOperator = true; - return; - } - - if (node.type === 'word') { - if (globalValues.has(node.value)) return; - - const dimension = valueParser.unit(node.value); - - if (!isTransformableLength(dimension)) return; - - targets.push({replaced: false}); - - const fontSizeInPx = isUnitlessZero(dimension) - ? `${dimension.number}px` - : toPx(`${dimension.number}${dimension.unit}`); - - if (!isKeyOf(fontSizeMap, fontSizeInPx)) return; - - targets[targets.length - 1]!.replaced = true; - - node.value = `var(${fontSizeMap[fontSizeInPx]})`; - return; - } - - if (node.type === 'function') { - if (isSassFunction(namespacedRem, node)) { - targets.push({replaced: false}); - - const args = getFunctionArgs(node); - - if (args.length !== 1) return; - - const fontSizeInPx = toTransformablePx(args[0]); - - if (!isKeyOf(fontSizeMap, fontSizeInPx)) return; - - targets[targets.length - 1]!.replaced = true; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: fontSizeMap[fontSizeInPx], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: fontSizeMap[fontSizeInPx].length, - }, - ]; - } - - return StopWalkingFunctionNodes; - } - }); - } - - function handleFontWeight() { - parsedValue.walk((node) => { - if (node.type === 'function') return StopWalkingFunctionNodes; - - if (isNumericOperator(node)) { - hasNumericOperator = true; - return; - } - - if (node.type === 'word') { - if (globalValues.has(node.value)) return; - - targets.push({replaced: false}); - - const fontWeight = node.value; - - if (!isKeyOf(fontWeightMap, fontWeight)) return; - - targets[targets.length - 1]!.replaced = true; - - node.value = `var(${fontWeightMap[fontWeight]})`; - } - }); - } - - function handleFontLineHeight() { - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - hasNumericOperator = true; - return; - } - - if (node.type === 'word') { - if (globalValues.has(node.value)) return; - - targets.push({replaced: false}); - - const lineHeighInPx = toTransformablePx(node.value); - - if (!isKeyOf(fontLineHeightMap, lineHeighInPx)) return; - - targets[targets.length - 1]!.replaced = true; - - node.value = `var(${fontLineHeightMap[lineHeighInPx]})`; - - return; - } - - if (node.type === 'function') { - if (isSassFunction(namespacedRem, node)) { - targets.push({replaced: false}); - - const args = getFunctionArgs(node); - - if (args.length !== 1) return; - - const lineHeightInPx = toTransformablePx(args[0]); - - if (!isKeyOf(fontLineHeightMap, lineHeightInPx)) return; - - targets[targets.length - 1]!.replaced = true; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: fontLineHeightMap[lineHeightInPx], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: fontLineHeightMap[lineHeightInPx].length, - }, - ]; - } - - return StopWalkingFunctionNodes; - } - }); - } - - // @ts-expect-error - Mark the declaration as processed - decl[processed] = true; - }, - }; -}; - -const globalValues = new Set(['inherit', 'initial', 'unset']); - -const fontSizeMap = { - '12px': '--p-font-size-75', - '14px': '--p-font-size-100', - '16px': '--p-font-size-200', - '20px': '--p-font-size-300', - '24px': '--p-font-size-400', - '28px': '--p-font-size-500', - '32px': '--p-font-size-600', - '40px': '--p-font-size-700', -}; - -const fontLineHeightMap = { - '16px': '--p-font-line-height-1', - '20px': '--p-font-line-height-2', - '24px': '--p-font-line-height-3', - '28px': '--p-font-line-height-4', - '32px': '--p-font-line-height-5', - '40px': '--p-font-line-height-6', - '48px': '--p-font-line-height-7', -}; - -const fontWeightMap = { - 400: '--p-font-weight-regular', - 500: '--p-font-weight-medium', - 600: '--p-font-weight-semibold', - 700: '--p-font-weight-bold', - // https://drafts.csswg.org/css-fonts-3/#propdef-font-weight - // 100 - Thin - // 200 - Extra Light (Ultra Light) - // 300 - Light - // 400 - Normal - normal: '--p-font-weight-regular', - // 500 - Medium - // 600 - Semi Bold (Demi Bold) - // 700 - Bold - bold: '--p-font-weight-bold', - // 800 - Extra Bold (Ultra Bold) - // 900 - Black (Heavy) -}; diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss deleted file mode 100644 index 61ef9d8ac38..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss +++ /dev/null @@ -1,147 +0,0 @@ -.easing { - transition-timing-function: linear; - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - transition-timing-function: linear(1); - transition-timing-function: ease; - transition-timing-function: ease-in; - transition-timing-function: ease-out; - transition-timing-function: ease-in-out; - transition-timing-function: cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - transition-timing-function: step-start; - transition-timing-function: step-end; - transition-timing-function: steps(1, jump-end); -} - -.easing-shorthand { - transition: opacity 300ms linear; - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - transition: opacity 300ms linear(1); - transition: opacity 300ms ease; - transition: opacity 300ms ease-in; - transition: opacity 300ms ease-out; - transition: opacity 300ms ease-in-out; - transition: opacity 300ms cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - transition: opacity 300ms step-start; - transition: opacity 300ms step-end; - transition: opacity 300ms steps(1, jump-end); -} - -.easing-multiple { - transition: opacity 300ms linear, left 300ms linear; - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - transition: opacity 300ms linear(1), left 300ms linear(1); - transition: opacity 300ms ease, left 300ms ease; - transition: opacity 300ms ease-in, left 300ms ease-in; - transition: opacity 300ms ease-out, left 300ms ease-out; - transition: opacity 300ms ease-in-out, left 300ms ease-in-out; - transition: opacity 300ms cubic-bezier(0, 0, 1, 1), - left 300ms cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - transition: opacity 300ms step-start, left 300ms step-start; - transition: opacity 300ms step-end, left 300ms step-start; - transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end); -} - -.duration { - transition-duration: 0; - transition-duration: 0ms; - transition-duration: 0s; - transition-duration: 50ms; - transition-duration: 0.05s; - transition-duration: 100ms; - transition-duration: 0.1s; - transition-duration: 150ms; - transition-duration: 0.15s; - transition-duration: 200ms; - transition-duration: 0.2s; - transition-duration: 250ms; - transition-duration: 0.25s; - transition-duration: 300ms; - transition-duration: 0.3s; - transition-duration: 350ms; - transition-duration: 0.35s; - transition-duration: 400ms; - transition-duration: 0.4s; - transition-duration: 450ms; - transition-duration: 0.45s; - transition-duration: 500ms; - transition-duration: 0.5s; - transition-duration: 5s; -} - -.duration-shorthand { - transition: opacity 0 linear; - transition: opacity 0ms linear; - transition: opacity 0s linear; - transition: opacity 50ms linear; - transition: opacity 0.05s linear; - transition: opacity 100ms linear; - transition: opacity 0.1s linear; - transition: opacity 150ms linear; - transition: opacity 0.15s linear; - transition: opacity 200ms linear; - transition: opacity 0.2s linear; - transition: opacity 250ms linear; - transition: opacity 0.25s linear; - transition: opacity 300ms linear; - transition: opacity 0.3s linear; - transition: opacity 350ms linear; - transition: opacity 0.35s linear; - transition: opacity 400ms linear; - transition: opacity 0.4s linear; - transition: opacity 450ms linear; - transition: opacity 0.45s linear; - transition: opacity 500ms linear; - transition: opacity 0.5s linear; - transition: opacity 5s linear; -} - -.duration-multiple { - transition: opacity 0 linear, left 0 linear; - transition: opacity 0ms linear, left 0ms linear; - transition: opacity 0s linear, left 0s linear; - transition: opacity 50ms linear, left 50ms linear; - transition: opacity 0.05s linear, left 0.05s linear; - transition: opacity 100ms linear, left 100ms linear; - transition: opacity 0.1s linear, left 0.1s linear; - transition: opacity 150ms linear, left 150ms linear; - transition: opacity 0.15s linear, left 0.15s linear; - transition: opacity 200ms linear, left 200ms linear; - transition: opacity 0.2s linear, left 0.2s linear; - transition: opacity 250ms linear, left 250ms linear; - transition: opacity 0.25s linear, left 0.25s linear; - transition: opacity 300ms linear, left 300ms linear; - transition: opacity 0.3s linear, left 0.3s linear; - transition: opacity 350ms linear, left 350ms linear; - transition: opacity 0.35s linear, left 0.35s linear; - transition: opacity 400ms linear, left 400ms linear; - transition: opacity 0.4s linear, left 0.4s linear; - transition: opacity 450ms linear, left 450ms linear; - transition: opacity 0.45s linear, left 0.45s linear; - transition: opacity 500ms linear, left 500ms linear; - transition: opacity 0.5s linear, left 0.5s linear; - transition: opacity 5s linear, left 5s linear; -} - -.animation { - animation: 300ms linear fadeIn; - animation-duration: 200ms; - animation-delay: 0.2s; - animation-timing-function: ease; -} - -.edge-cases { - // Without an easing function - transition: fill 300ms; - // Duration comes after easing func - transition: opacity linear 0.5s; - // Duration + Delay - transition: opacity 400ms linear 300ms; - // Duration + Delay after easing func - transition: opacity linear 400ms 100ms; - // can't process variables - transition-timing-function: $foo; - transition: opacity $foo 0.5s; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss deleted file mode 100644 index 5c1b23c00f3..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss +++ /dev/null @@ -1,224 +0,0 @@ -.easing { - transition-timing-function: var(--p-linear); - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: linear(1); - transition-timing-function: var(--p-ease); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - transition-timing-function: var(--p-ease-in-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: step-start; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: step-end; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: steps(1, jump-end); -} - -.easing-shorthand { - transition: opacity var(--p-duration-300) var(--p-linear); - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) linear(1); - transition: opacity 300ms linear(1); - transition: opacity var(--p-duration-300) var(--p-ease); - transition: opacity var(--p-duration-300) var(--p-ease-in); - transition: opacity var(--p-duration-300) var(--p-ease-out); - transition: opacity var(--p-duration-300) var(--p-ease-in-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) cubic-bezier(0, 0, 1, 1); - transition: opacity 300ms cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) step-start; - transition: opacity 300ms step-start; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) step-end; - transition: opacity 300ms step-end; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) steps(1, jump-end); - transition: opacity 300ms steps(1, jump-end); -} - -.easing-multiple { - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) linear(1), left var(--p-duration-300) linear(1); - transition: opacity 300ms linear(1), left 300ms linear(1); - transition: opacity var(--p-duration-300) var(--p-ease), - left var(--p-duration-300) var(--p-ease); - transition: opacity var(--p-duration-300) var(--p-ease-in), - left var(--p-duration-300) var(--p-ease-in); - transition: opacity var(--p-duration-300) var(--p-ease-out), - left var(--p-duration-300) var(--p-ease-out); - transition: opacity var(--p-duration-300) var(--p-ease-in-out), - left var(--p-duration-300) var(--p-ease-in-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) cubic-bezier(0, 0, 1, 1), left var(--p-duration-300) cubic-bezier(0, 0, 1, 1); - transition: opacity 300ms cubic-bezier(0, 0, 1, 1), - left 300ms cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) step-start, left var(--p-duration-300) step-start; - transition: opacity 300ms step-start, left 300ms step-start; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. - // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) step-end, left var(--p-duration-300) step-start; - transition: opacity 300ms step-end, left 300ms step-start; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. - // transition: opacity var(--p-duration-300) steps(1, jump-end), left var(--p-duration-300) steps(1, jump-end); - transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end); -} - -.duration { - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-50); - transition-duration: var(--p-duration-50); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-150); - transition-duration: var(--p-duration-150); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-250); - transition-duration: var(--p-duration-250); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-350); - transition-duration: var(--p-duration-350); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-450); - transition-duration: var(--p-duration-450); - transition-duration: var(--p-duration-500); - transition-duration: var(--p-duration-500); - transition-duration: var(--p-duration-5000); -} - -.duration-shorthand { - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-5000) var(--p-linear); -} - -.duration-multiple { - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear), - left var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear), - left var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear), - left var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear), - left var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear), - left var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear), - left var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear), - left var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear), - left var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear), - left var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear), - left var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear), - left var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear), - left var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear), - left var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear), - left var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear), - left var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear), - left var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-5000) var(--p-linear), - left var(--p-duration-5000) var(--p-linear); -} - -.animation { - animation: var(--p-duration-300) var(--p-linear) fadeIn; - animation-duration: var(--p-duration-200); - animation-delay: var(--p-duration-200); - animation-timing-function: var(--p-ease); -} - -.edge-cases { - // Without an easing function - transition: fill var(--p-duration-300); - // Duration comes after easing func - transition: opacity var(--p-linear) var(--p-duration-500); - // Duration + Delay - transition: opacity var(--p-duration-400) var(--p-linear) - var(--p-duration-300); - // Duration + Delay after easing func - transition: opacity var(--p-linear) var(--p-duration-400) - var(--p-duration-100); - // can't process variables - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Cannot statically analyze SCSS variable $foo. - transition-timing-function: $foo; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Cannot statically analyze SCSS variable $foo. - // transition: opacity $foo var(--p-duration-500); - transition: opacity $foo 0.5s; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts deleted file mode 100644 index 2516f14cdf7..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts +++ /dev/null @@ -1,304 +0,0 @@ -import type {Declaration} from 'postcss'; -import type {ParsedValue, Node} from 'postcss-value-parser'; -import valueParser from 'postcss-value-parser'; - -import { - isSassVariable, - hasNumericOperator, - isTransformableDuration, - isPolarisVar, - createSassMigrator as v9StylesTokenizeMotion, - setNodeValue, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; -import {scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default v9StylesTokenizeMotion( - 'v9-replace-sass-transition', - (_, {methods}, context) => { - function insertUnexpectedEasingFunctionComment( - node: Node, - decl: Declaration, - ) { - methods.report({ - severity: 'warning', - node: decl, - message: `Unexpected easing function '${node.value}'. See https://polaris.shopify.com/tokens/motion for possible values.`, - }); - } - - function mutateDurationValue(node: Node, decl: Declaration): void { - if (isPolarisVar(node)) { - return; - } - - if (isSassVariable(node)) { - methods.report({ - severity: 'warning', - node: decl, - message: `Cannot statically analyze SCSS variable ${node.value}.`, - }); - return; - } - - const unit = valueParser.unit(node.value); - if (unit) { - const constantDuration = `${normalizeStringifiedNumber(unit.number)}${ - unit.unit - }`; - - if (!isKeyOf(durationConstantsMap, constantDuration)) { - methods.report({ - severity: 'warning', - node: decl, - message: `No matching duration token for '${constantDuration}'.`, - }); - - return; - } - - const durationCustomProperty = durationConstantsMap[constantDuration]; - const targetValue = `var(${durationCustomProperty})`; - - if (context.fix) { - setNodeValue(node, targetValue); - } else { - methods.report({ - severity: 'error', - node: decl, - message: `Replace duration value with token: ${targetValue}`, - }); - } - } - } - - function mutateFunctionValue(node: Node, decl: Declaration): void { - if (isPolarisVar(node)) { - return; - } - - if (isSassVariable(node)) { - methods.report({ - severity: 'warning', - node: decl, - message: `Cannot statically analyze SCSS variable ${node.value}.`, - }); - return; - } - - if (node.type === 'function') { - const easingFuncHandlers = { - // Per the spec, these can all be functions: - // https://w3c.github.io/csswg-drafts/css-easing/#easing-functions - linear: insertUnexpectedEasingFunctionComment, - 'cubic-bezier': insertUnexpectedEasingFunctionComment, - steps: insertUnexpectedEasingFunctionComment, - }; - - if (isKeyOf(easingFuncHandlers, node.value)) { - easingFuncHandlers[node.value](node, decl); - return; - } - } - - if (node.type === 'word') { - if (isKeyOf(easingFuncConstantsMap, node.value)) { - const targetValue = `var(${easingFuncConstantsMap[node.value]})`; - - if (context.fix) { - setNodeValue(node, targetValue); - } else { - methods.report({ - severity: 'error', - node: decl, - message: `Replace easing function with token: ${targetValue}`, - }); - } - - return; - } - - if (cssEasingBuiltinFuncs.includes(node.value)) { - insertUnexpectedEasingFunctionComment(node, decl); - } - } - } - - function mutateDelayValue(node: Node, decl: Declaration): void { - // For now, we treat delays like durations - return mutateDurationValue(node, decl); - } - - function mutateShorthandValue( - decl: Declaration, - parsedValue: ParsedValue, - ): void { - const splitValues: Node[][] = [[]]; - - // Gathering up references of nodes into groups. Important to note that - // we're dealing with mutable structures here, so we are purposefully - // NOT making copies. - parsedValue.nodes.forEach((node) => { - if (node.type === 'div') { - splitValues.push([]); - } else { - splitValues[splitValues.length - 1].push(node); - } - }); - - splitValues.forEach((nodes) => { - // From the spec: - // - // Note that order is important within the items in this property: the - // first value that can be parsed as a time is assigned to the - // transition-duration, and the second value that can be parsed as a - // time is assigned to transition-delay. - // https://w3c.github.io/csswg-drafts/css-transitions-1/#transition-shorthand-property - // - // That sounds like an array to me! [0] is duration, [1] is delay. - const timings: Node[] = []; - - nodes.forEach((node) => { - const unit = valueParser.unit(node.value); - if (isTransformableDuration(unit)) { - timings.push(node); - } else { - // This node could be either the property to animate, or an easing - // function. We try mutate the easing function, but if not we assume - // it's the property to animate and therefore do not leave a comment. - mutateFunctionValue(node, decl); - } - }); - - if (timings[0]) { - mutateDurationValue(timings[0], decl); - } - - if (timings[1]) { - mutateDelayValue(timings[1], decl); - } - }); - } - - return (root) => { - methods.walkDecls(root, (decl) => { - const handlers: {[key: string]: () => void} = { - 'transition-duration': () => { - parsedValue.nodes.forEach((node) => { - mutateDurationValue(node, decl); - }); - }, - 'transition-delay': () => { - parsedValue.nodes.forEach((node) => { - mutateDelayValue(node, decl); - }); - }, - 'transition-timing-function': () => { - parsedValue.nodes.forEach((node) => { - mutateFunctionValue(node, decl); - }); - }, - transition: () => { - mutateShorthandValue(decl, parsedValue); - }, - 'animation-duration': () => { - parsedValue.nodes.forEach((node) => { - mutateDurationValue(node, decl); - }); - }, - 'animation-delay': () => { - parsedValue.nodes.forEach((node) => { - mutateDelayValue(node, decl); - }); - }, - 'animation-timing-function': () => { - parsedValue.nodes.forEach((node) => { - mutateFunctionValue(node, decl); - }); - }, - animation: () => { - mutateShorthandValue(decl, parsedValue); - }, - }; - - if (!handlers[decl.prop]) { - return; - } - - const parsedValue = valueParser(decl.value); - - if (hasNumericOperator(parsedValue)) { - methods.report({ - node: decl, - severity: 'warning', - message: 'Numeric operator detected.', - }); - } - - handlers[decl.prop](); - - if (context.fix) { - decl.value = parsedValue.toString(); - } - }); - }; - }, -); - -const durationConstantsMap = { - '0': '--p-duration-0', - '0s': '--p-duration-0', - '0ms': '--p-duration-0', - '50ms': '--p-duration-50', - '0.05s': '--p-duration-50', - '100ms': '--p-duration-100', - '0.1s': '--p-duration-100', - '150ms': '--p-duration-150', - '0.15s': '--p-duration-150', - '200ms': '--p-duration-200', - '0.2s': '--p-duration-200', - '250ms': '--p-duration-250', - '0.25s': '--p-duration-250', - '300ms': '--p-duration-300', - '0.3s': '--p-duration-300', - '350ms': '--p-duration-350', - '0.35s': '--p-duration-350', - '400ms': '--p-duration-400', - '0.4s': '--p-duration-400', - '450ms': '--p-duration-450', - '0.45s': '--p-duration-450', - '500ms': '--p-duration-500', - '0.5s': '--p-duration-500', - '5s': '--p-duration-5000', -}; - -const easingFuncConstantsMap = { - linear: '--p-linear', - ease: '--p-ease', - 'ease-in': '--p-ease-in', - 'ease-out': '--p-ease-out', - 'ease-in-out': '--p-ease-in-out', -}; - -// Per the spec for transition easing functions: -// https://w3c.github.io/csswg-drafts/css-easing/#easing-functions -const cssEasingBuiltinFuncs = [ - 'linear', - 'ease', - 'ease-in', - 'ease-out', - 'ease-in-out', - 'cubic-bezier', - 'step-start', - 'step-end', - 'steps', -]; - -function normalizeStringifiedNumber(number: string): string { - return Number(number).toString(); -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss deleted file mode 100644 index f6a88c5d3e4..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss +++ /dev/null @@ -1,88 +0,0 @@ -/* stylelint-disable */ - -.border { - /* --- LENGTHS --- */ - - /* Migrate */ - border: 1px solid var(--p-border-subdued); - border: 1px solid transparent; - border: 1px solid currentColor; - border: 1px solid color('sky'); - border: 0.0625rem solid var(--p-border-subdued); - border: solid 1px var(--p-border-subdued); - border: 1px solid rgba(141, 145, 150, 0.5); - border: 1px solid $var; - border-width: 1px; - border-width: 0.0625rem; - - /* Ignore */ - border: 0.0625em solid var(--p-border-subdued); - border: 0 solid var(--p-border-subdued); - border: (16px + 16px) solid var(--p-border-subdued); - border: var(--var); - border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued); - border-width: 0.0625em; - border-width: 0; - - /* Comment */ - border: 10px solid var(--p-border-subdued); - border: 10rem solid transparent; - border-width: 10px; - border-width: 10rem; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border: rem(1px) solid var(--p-border-subdued); - border: solid rem(1px) var(--p-border-subdued); - border-width: rem(1px); - border-width: rem(1px) rem(1px); - border-width: rem(1px) 1px; - border-width: rem(1px) 4in; - border-width: rem(1px) 1em; - border-width: rem(1px) 0 0 0; - - /* Ignore */ - border: calc(1rem + var(--var, #{rem(1px)})) solid var(--p-border-subdued); - border: calc(1rem + var(--var, #{rem(10px)})) solid var(--p-border-subdued); - border-width: calc(-1 * rem(1px)); - - /* Comment */ - border: rem(10px) solid var(--p-border-subdued); - border-width: rem(10px); - border-width: rem(10px) rem(10px); - border-width: rem(1px) rem(10px); - border-width: rem(10px) -1px; - border-width: rem(10px) + 1px; - border-width: rem($var * 1px); -} - -.border-radius { - /* --- LENGTHS --- */ - - /* Migrate */ - border-radius: 2px; - border-radius: 1rem; - - /* Ignore */ - border-radius: 0; - border-radius: 2em; - border-radius: calc(var(--p-space-2) * 3); - border-radius: 50%; - - /* Comment */ - border-radius: 1px; - border-radius: 20px / 50%; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border-radius: rem(8px); - - /* Ignore */ - border-radius: calc(var(--p-border-radius-base) * 2px); - - /* Comment */ - border-radius: rem(10px) rem(4px); - border-radius: rem(1px) * 5; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss deleted file mode 100644 index 40cbf4d90a3..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss +++ /dev/null @@ -1,118 +0,0 @@ -/* stylelint-disable */ - -.border { - /* --- LENGTHS --- */ - - /* Migrate */ - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: var(--p-border-width-1) solid transparent; - border: var(--p-border-width-1) solid currentColor; - border: var(--p-border-width-1) solid color('sky'); - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: solid var(--p-border-width-1) var(--p-border-subdued); - border: var(--p-border-width-1) solid rgba(141, 145, 150, 0.5); - border: var(--p-border-width-1) solid $var; - border-width: var(--p-border-width-1); - border-width: var(--p-border-width-1); - - /* Ignore */ - border: 0.0625em solid var(--p-border-subdued); - border: 0 solid var(--p-border-subdued); - border: (16px + 16px) solid var(--p-border-subdued); - border: var(--var); - border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued); - border-width: 0.0625em; - border-width: 0; - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border: 10px solid var(--p-border-subdued); - border: 10px solid var(--p-border-subdued); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border: 10rem solid transparent; - border: 10rem solid transparent; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: 10px; - border-width: 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: 10rem; - border-width: 10rem; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: solid var(--p-border-width-1) var(--p-border-subdued); - border-width: var(--p-border-width-1); - border-width: var(--p-border-width-1) var(--p-border-width-1); - border-width: var(--p-border-width-1) var(--p-border-width-1); - border-width: var(--p-border-width-1) 4in; - border-width: var(--p-border-width-1) 1em; - border-width: var(--p-border-width-1) 0 0 0; - - /* Ignore */ - border: calc(1rem + var(--var, #{rem(1px)})) solid var(--p-border-subdued); - border: calc(1rem + var(--var, #{rem(10px)})) solid var(--p-border-subdued); - border-width: calc(-1 * rem(1px)); - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border: rem(10px) solid var(--p-border-subdued); - border: rem(10px) solid var(--p-border-subdued); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: rem(10px); - border-width: rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: rem(10px) rem(10px); - border-width: rem(10px) rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: var(--p-border-width-1) rem(10px); - border-width: rem(1px) rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: rem(10px) -1px; - border-width: rem(10px) -1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: rem(10px) + var(--p-border-width-1); - border-width: rem(10px) + 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: rem($var * var(--p-border-width-1)); - border-width: rem($var * 1px); -} - -.border-radius { - /* --- LENGTHS --- */ - - /* Migrate */ - border-radius: var(--p-border-radius-05); - border-radius: var(--p-border-radius-4); - - /* Ignore */ - border-radius: 0; - border-radius: 2em; - border-radius: calc(var(--p-space-2) * 3); - border-radius: 50%; - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: 1px; - border-radius: 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: var(--p-border-radius-5) / 50%; - border-radius: 20px / 50%; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border-radius: var(--p-border-radius-2); - - /* Ignore */ - border-radius: calc(var(--p-border-radius-base) * 2px); - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: rem(10px) var(--p-border-radius-1); - border-radius: rem(10px) rem(4px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: rem(1px) * 5; - border-radius: rem(1px) * 5; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss deleted file mode 100644 index 8111f61de2c..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* stylelint-disable */ -@use 'global-styles/legacy-polaris-v8'; - -.border { - /* --- LENGTHS --- */ - - /* Migrate */ - border: 1px solid var(--p-border-subdued); - border: 1px solid transparent; - border: 1px solid currentColor; - border: 1px solid color('sky'); - border: 0.0625rem solid var(--p-border-subdued); - border: solid 1px var(--p-border-subdued); - border: 1px solid rgba(141, 145, 150, 0.5); - border: 1px solid $var; - border-width: 1px; - border-width: 0.0625rem; - - /* Ignore */ - border: 0.0625em solid var(--p-border-subdued); - border: 0 solid var(--p-border-subdued); - border: (16px + 16px) solid var(--p-border-subdued); - border: var(--var); - border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued); - border-width: 0.0625em; - border-width: 0; - - /* Comment */ - border: 10px solid var(--p-border-subdued); - border: 10rem solid transparent; - border-width: 10px; - border-width: 10rem; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border: legacy-polaris-v8.rem(1px) solid var(--p-border-subdued); - border: solid legacy-polaris-v8.rem(1px) var(--p-border-subdued); - border-width: legacy-polaris-v8.rem(1px); - border-width: legacy-polaris-v8.rem(1px) legacy-polaris-v8.rem(1px); - border-width: legacy-polaris-v8.rem(1px) 1px; - border-width: legacy-polaris-v8.rem(1px) 4in; - border-width: legacy-polaris-v8.rem(1px) 1em; - border-width: legacy-polaris-v8.rem(1px) 0 0 0; - - /* Ignore */ - border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(1px)})) solid - var(--p-border-subdued); - border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(10px)})) solid - var(--p-border-subdued); - border-width: calc(-1 * legacy-polaris-v8.rem(1px)); - - /* Comment */ - border: legacy-polaris-v8.rem(10px) solid var(--p-border-subdued); - border-width: legacy-polaris-v8.rem(10px); - border-width: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px); - border-width: legacy-polaris-v8.rem(1px) legacy-polaris-v8.rem(10px); - border-width: legacy-polaris-v8.rem(10px) -1px; - border-width: legacy-polaris-v8.rem(10px) + 1px; - border-width: legacy-polaris-v8.rem($var * 1px); -} - -.border-radius { - /* --- LENGTHS --- */ - - /* Migrate */ - border-radius: 2px; - border-radius: 1rem; - - /* Ignore */ - border-radius: 0; - border-radius: 2em; - border-radius: calc(var(--p-space-2) * 3); - border-radius: 50%; - - /* Comment */ - border-radius: 1px; - border-radius: 20px / 50%; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border-radius: legacy-polaris-v8.rem(8px); - - /* Ignore */ - border-radius: calc(var(--p-border-radius-base) * 2px); - - /* Comment */ - border-radius: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(4px); - border-radius: legacy-polaris-v8.rem(1px) * 5; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss deleted file mode 100644 index f0427a089ed..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss +++ /dev/null @@ -1,121 +0,0 @@ -/* stylelint-disable */ -@use 'global-styles/legacy-polaris-v8'; - -.border { - /* --- LENGTHS --- */ - - /* Migrate */ - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: var(--p-border-width-1) solid transparent; - border: var(--p-border-width-1) solid currentColor; - border: var(--p-border-width-1) solid color('sky'); - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: solid var(--p-border-width-1) var(--p-border-subdued); - border: var(--p-border-width-1) solid rgba(141, 145, 150, 0.5); - border: var(--p-border-width-1) solid $var; - border-width: var(--p-border-width-1); - border-width: var(--p-border-width-1); - - /* Ignore */ - border: 0.0625em solid var(--p-border-subdued); - border: 0 solid var(--p-border-subdued); - border: (16px + 16px) solid var(--p-border-subdued); - border: var(--var); - border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued); - border-width: 0.0625em; - border-width: 0; - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border: 10px solid var(--p-border-subdued); - border: 10px solid var(--p-border-subdued); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border: 10rem solid transparent; - border: 10rem solid transparent; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: 10px; - border-width: 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: 10rem; - border-width: 10rem; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border: var(--p-border-width-1) solid var(--p-border-subdued); - border: solid var(--p-border-width-1) var(--p-border-subdued); - border-width: var(--p-border-width-1); - border-width: var(--p-border-width-1) var(--p-border-width-1); - border-width: var(--p-border-width-1) var(--p-border-width-1); - border-width: var(--p-border-width-1) 4in; - border-width: var(--p-border-width-1) 1em; - border-width: var(--p-border-width-1) 0 0 0; - - /* Ignore */ - border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(1px)})) solid - var(--p-border-subdued); - border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(10px)})) solid - var(--p-border-subdued); - border-width: calc(-1 * legacy-polaris-v8.rem(1px)); - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border: legacy-polaris-v8.rem(10px) solid var(--p-border-subdued); - border: legacy-polaris-v8.rem(10px) solid var(--p-border-subdued); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: legacy-polaris-v8.rem(10px); - border-width: legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px); - border-width: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: var(--p-border-width-1) legacy-polaris-v8.rem(10px); - border-width: legacy-polaris-v8.rem(1px) legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: legacy-polaris-v8.rem(10px) -1px; - border-width: legacy-polaris-v8.rem(10px) -1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: legacy-polaris-v8.rem(10px) + var(--p-border-width-1); - border-width: legacy-polaris-v8.rem(10px) + 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-width: legacy-polaris-v8.rem($var * var(--p-border-width-1)); - border-width: legacy-polaris-v8.rem($var * 1px); -} - -.border-radius { - /* --- LENGTHS --- */ - - /* Migrate */ - border-radius: var(--p-border-radius-05); - border-radius: var(--p-border-radius-4); - - /* Ignore */ - border-radius: 0; - border-radius: 2em; - border-radius: calc(var(--p-space-2) * 3); - border-radius: 50%; - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: 1px; - border-radius: 1px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: var(--p-border-radius-5) / 50%; - border-radius: 20px / 50%; - - /* --- REM FUNCTION --- */ - - /* Migrate */ - border-radius: var(--p-border-radius-2); - - /* Ignore */ - border-radius: calc(var(--p-border-radius-base) * 2px); - - /* Comment */ - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: legacy-polaris-v8.rem(10px) var(--p-border-radius-1); - border-radius: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(4px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // border-radius: legacy-polaris-v8.rem(1px) * 5; - border-radius: legacy-polaris-v8.rem(1px) * 5; -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts deleted file mode 100644 index 3e6ea45d383..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts +++ /dev/null @@ -1,239 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type {Plugin} from 'postcss'; -import postcss from 'postcss'; -import valueParser from 'postcss-value-parser'; - -import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants'; -import type {NamespaceOptions} from '../../utilities/sass'; -import { - getFunctionArgs, - isNumericOperator, - isSassFunction, - isTransformableLength, - namespace, - toTransformablePx, - StopWalkingFunctionNodes, - createInlineComment, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default function transformer( - fileInfo: FileInfo, - _: API, - options: Options, -) { - return postcss(plugin(options)).process(fileInfo.source, { - syntax: require('postcss-scss'), - }).css; -} - -const processed = Symbol('processed'); - -interface PluginOptions extends Options, NamespaceOptions {} - -const plugin = (options: PluginOptions = {}): Plugin => { - const namespacedRem = namespace('rem', options); - - return { - postcssPlugin: 'v9-styles-tokenize-shape', - Declaration(decl) { - // @ts-expect-error - Skip if processed so we don't process it again - if (decl[processed]) return; - - let handler; - - if (borderProps.has(decl.prop)) handler = handleBorderProps; - else if (borderRadiusProps.has(decl.prop)) - handler = handleBorderRadiusProps; - else return; - - /** - * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.) - * - * Note: This is evaluated at the end of each visitor execution to determine whether - * or not to replace the declaration or insert a comment. - */ - const targets: {replaced: boolean}[] = []; - let hasNumericOperator = false; - const parsedValue = valueParser(decl.value); - - handler(); - - if (targets.some(({replaced}) => !replaced || hasNumericOperator)) { - // Insert comment if the declaration value contains calculations - decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT)); - decl.before( - createInlineComment(`${decl.prop}: ${parsedValue.toString()};`), - ); - } else { - decl.value = parsedValue.toString(); - } - - // - // Handlers - // - - function handleBorderProps() { - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - hasNumericOperator = true; - return; - } - - if (node.type === 'word') { - if (globalValues.has(node.value)) return; - - const dimension = valueParser.unit(node.value); - - if (!isTransformableLength(dimension)) return; - - targets.push({replaced: false}); - - const valueInPx = toTransformablePx(node.value); - - if (!isKeyOf(borderWidthLengthMap, valueInPx)) return; - - node.value = `var(${borderWidthLengthMap[valueInPx]})`; - - targets[targets.length - 1]!.replaced = true; - - return; - } - - if (node.type === 'function') { - if (isSassFunction(namespacedRem, node)) { - targets.push({replaced: false}); - - const args = getFunctionArgs(node); - - if (args.length !== 1) return; - - const valueInPx = toTransformablePx(args[0]); - - if (!isKeyOf(borderWidthLengthMap, valueInPx)) return; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: borderWidthLengthMap[valueInPx], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: borderWidthLengthMap[valueInPx].length, - }, - ]; - - targets[targets.length - 1]!.replaced = true; - } - - return StopWalkingFunctionNodes; - } - }); - } - - function handleBorderRadiusProps() { - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - hasNumericOperator = true; - return; - } - - if (node.type === 'word') { - if (globalValues.has(node.value)) return; - - const dimension = valueParser.unit(node.value); - - if (!isTransformableLength(dimension)) return; - - targets.push({replaced: false}); - - const valueInPx = toTransformablePx(node.value); - - if (!isKeyOf(borderRadiusLengthMap, valueInPx)) return; - - node.value = `var(${borderRadiusLengthMap[valueInPx]})`; - - targets[targets.length - 1]!.replaced = true; - - return; - } - - if (node.type === 'function') { - if (isSassFunction(namespacedRem, node)) { - targets.push({replaced: false}); - - const args = getFunctionArgs(node); - - if (args.length !== 1) return; - - const valueInPx = toTransformablePx(args[0]); - - if (!isKeyOf(borderRadiusLengthMap, valueInPx)) return; - - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: borderRadiusLengthMap[valueInPx], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: borderRadiusLengthMap[valueInPx].length, - }, - ]; - - targets[targets.length - 1]!.replaced = true; - } - - return StopWalkingFunctionNodes; - } - }); - } - }, - }; -}; - -const globalValues = new Set(['inherit', 'initial', 'unset']); - -const borderProps = new Set([ - 'border', - 'border-top', - 'border-right', - 'border-bottom', - 'border-left', - 'border-width', - 'border-top-width', - 'border-right-width', - 'border-bottom-width', - 'border-left-width', -]); - -const borderRadiusProps = new Set([ - 'border-radius', - 'border-top-left-radius', - 'border-top-right-radius', - 'border-bottom-left-radius', - 'border-bottom-right-radius', -]); - -const borderWidthLengthMap = { - '1px': '--p-border-width-1', - '2px': '--p-border-width-2', - '3px': '--p-border-width-3', - '4px': '--p-border-width-4', - '5px': '--p-border-width-5', -} as const; - -const borderRadiusLengthMap = { - '2px': '--p-border-radius-05', - '4px': '--p-border-radius-1', - '8px': '--p-border-radius-2', - '12px': '--p-border-radius-3', - '16px': '--p-border-radius-4', - '20px': '--p-border-radius-5', - '30px': '--p-border-radius-6', - '3px': '--p-border-radius-base', - '6px': '--p-border-radius-large', -} as const; diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss deleted file mode 100644 index c9a8cfc7e8c..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss +++ /dev/null @@ -1,62 +0,0 @@ -.space { - // LENGTHS - // Migrate - padding: 16px; - padding: 1rem; - padding: 16px 16px; - padding: 1rem 1rem; - padding: 16px 1rem; - padding: 0 16px; - padding: 1rem 0; - padding: 16px 4in; - padding: 16px 1em; - padding: (16px + 16px) 16px; - // Ignore - padding: 0; - padding: 1; - padding: 2; - padding: #{16px + 16px}; - padding: layout-width(nav); - padding: 10em; - padding: var(--var); - padding: var(--p-space-4); - padding: var(--p-space-4, 16px); - // Comment - padding: 10px; - padding: 10rem; - padding: 10px 10px; - padding: 16px 10px; - padding: 10rem 10rem; - padding: 1rem 10rem; - padding: 10px 10rem; - padding: 16px 10rem; - padding: 10px 1rem; - padding: 16px -16px; - padding: 16px + 16px; - padding: 16px + 16px 16px; - padding: $var + 16px; - padding: calc(16px + 16px); - padding: 16px + #{16px + 16px}; - // Skip negative lengths. Need to discuss replacement strategy e.g. - // calc(-1 * var(--p-space-*)) vs var(--p-space--*) - padding: -16px; - padding: -10px; - - // REM FUNCTION - // Migrate - padding: rem(16px); - padding: rem(16px) rem(16px); - padding: rem(16px) 16px; - padding: rem(16px) 4in; - padding: rem(16px) 1em; - // Ignore - padding: calc(10rem + var(--p-choice-size, #{rem(16px)})); - padding: calc(10rem + var(--p-choice-size, #{rem(10px)})); - // Comment - padding: rem(10px); - padding: rem(10px) rem(10px); - padding: rem(16px) rem(10px); - padding: rem(16px) -16px; - padding: rem(16px) + 16px; - padding: rem($var * 16px); -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss deleted file mode 100644 index 017cf3eb5cd..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss +++ /dev/null @@ -1,123 +0,0 @@ -.space { - // LENGTHS - // Migrate - padding: var(--p-space-4); - padding: var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: 0 var(--p-space-4); - padding: var(--p-space-4) 0; - padding: var(--p-space-4) 4in; - padding: var(--p-space-4) 1em; - padding: (16px + 16px) var(--p-space-4); - // Ignore - padding: 0; - padding: 1; - padding: 2; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - padding: #{16px + 16px}; - padding: layout-width(nav); - padding: 10em; - padding: var(--var); - padding: var(--p-space-4); - padding: var(--p-space-4, 16px); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - padding: 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: 10px 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // padding: var(--p-space-4) 10px; - padding: 16px 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - padding: 10rem 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - // padding: var(--p-space-4) 10rem; - padding: 1rem 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // error: Non-tokenizable value '10rem' - padding: 10px 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - // padding: var(--p-space-4) 10rem; - padding: 16px 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // padding: 10px var(--p-space-4); - padding: 10px 1rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-16px' - // padding: var(--p-space-4) -16px; - padding: 16px -16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: var(--p-space-4) + var(--p-space-4); - padding: 16px + 16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: var(--p-space-4) + var(--p-space-4) var(--p-space-4); - padding: 16px + 16px 16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: $var + var(--p-space-4); - padding: $var + 16px; - padding: calc(16px + 16px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: var(--p-space-4) + #{16px + 16px}; - padding: 16px + #{16px + 16px}; - // Skip negative lengths. Need to discuss replacement strategy e.g. - // calc(-1 * var(--p-space-*)) vs var(--p-space--*) - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-16px' - padding: -16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-10px' - padding: -10px; - - // REM FUNCTION - // Migrate - padding: var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) 4in; - padding: var(--p-space-4) 1em; - // Ignore - padding: calc(10rem + var(--p-choice-size, #{rem(16px)})); - padding: calc(10rem + var(--p-choice-size, #{rem(10px)})); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: rem(10px) rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // padding: var(--p-space-4) rem(10px); - padding: rem(16px) rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-16px' - // padding: var(--p-space-4) -16px; - padding: rem(16px) -16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // 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' - // warning: Numeric operator detected. - // padding: rem($var * var(--p-space-4)); - padding: rem($var * 16px); -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss deleted file mode 100644 index c45ab544272..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.space { - // LENGTHS - // Migrate - padding: 16px; - padding: 1rem; - padding: 16px 16px; - padding: 1rem 1rem; - padding: 16px 1rem; - padding: 0 16px; - padding: 1rem 0; - padding: 16px 4in; - padding: 16px 1em; - padding: (16px + 16px) 16px; - // Ignore - padding: 0; - padding: 1; - padding: 2; - padding: #{16px + 16px}; - padding: layout-width(nav); - padding: 10em; - padding: var(--var); - padding: var(--p-space-4); - padding: var(--p-space-4, 16px); - // Comment - padding: 10px; - padding: 10rem; - padding: 10px 10px; - padding: 16px 10px; - padding: 10rem 10rem; - padding: 1rem 10rem; - padding: 10px 10rem; - padding: 16px 10rem; - padding: 10px 1rem; - padding: 16px -16px; - padding: 16px + 16px; - padding: 16px + 16px 16px; - padding: $var + 16px; - padding: calc(16px + 16px); - padding: 16px + #{16px + 16px}; - // Skip negative lengths. Need to discuss replacement strategy e.g. - // calc(-1 * var(--p-space-*)) vs var(--p-space--*) - padding: -16px; - padding: -10px; - - // REM FUNCTION - // Migrate - padding: legacy-polaris-v8.rem(16px); - padding: legacy-polaris-v8.rem(16px) legacy-polaris-v8.rem(16px); - padding: legacy-polaris-v8.rem(16px) 16px; - padding: legacy-polaris-v8.rem(16px) 4in; - padding: legacy-polaris-v8.rem(16px) 1em; - // Ignore - padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(16px)})); - padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(10px)})); - // Comment - padding: legacy-polaris-v8.rem(10px); - padding: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px); - padding: legacy-polaris-v8.rem(16px) legacy-polaris-v8.rem(10px); - padding: legacy-polaris-v8.rem(16px) -16px; - padding: legacy-polaris-v8.rem(16px) + 16px; - padding: legacy-polaris-v8.rem($var * 16px); -} diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss deleted file mode 100644 index f881894d4f3..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss +++ /dev/null @@ -1,125 +0,0 @@ -@use 'global-styles/legacy-polaris-v8'; - -.space { - // LENGTHS - // Migrate - padding: var(--p-space-4); - padding: var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: 0 var(--p-space-4); - padding: var(--p-space-4) 0; - padding: var(--p-space-4) 4in; - padding: var(--p-space-4) 1em; - padding: (16px + 16px) var(--p-space-4); - // Ignore - padding: 0; - padding: 1; - padding: 2; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - padding: #{16px + 16px}; - padding: layout-width(nav); - padding: 10em; - padding: var(--var); - padding: var(--p-space-4); - padding: var(--p-space-4, 16px); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - padding: 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: 10px 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // padding: var(--p-space-4) 10px; - padding: 16px 10px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - padding: 10rem 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - // padding: var(--p-space-4) 10rem; - padding: 1rem 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // error: Non-tokenizable value '10rem' - padding: 10px 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10rem' - // padding: var(--p-space-4) 10rem; - padding: 16px 10rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // padding: 10px var(--p-space-4); - padding: 10px 1rem; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-16px' - // padding: var(--p-space-4) -16px; - padding: 16px -16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: var(--p-space-4) + var(--p-space-4); - padding: 16px + 16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: var(--p-space-4) + var(--p-space-4) var(--p-space-4); - padding: 16px + 16px 16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: $var + var(--p-space-4); - padding: $var + 16px; - padding: calc(16px + 16px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // padding: var(--p-space-4) + #{16px + 16px}; - padding: 16px + #{16px + 16px}; - // Skip negative lengths. Need to discuss replacement strategy e.g. - // calc(-1 * var(--p-space-*)) vs var(--p-space--*) - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-16px' - padding: -16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-10px' - padding: -10px; - - // REM FUNCTION - // Migrate - padding: var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) var(--p-space-4); - padding: var(--p-space-4) 4in; - padding: var(--p-space-4) 1em; - // Ignore - padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(16px)})); - padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(10px)})); - // Comment - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - padding: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '10px' - // padding: var(--p-space-4) legacy-polaris-v8.rem(10px); - padding: legacy-polaris-v8.rem(16px) legacy-polaris-v8.rem(10px); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // error: Non-tokenizable value '-16px' - // padding: var(--p-space-4) -16px; - padding: legacy-polaris-v8.rem(16px) -16px; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // 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' - // 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-codemods/src/codemods/v9-styles-tokenize-space/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-space/transform.ts deleted file mode 100644 index 7048192b240..00000000000 --- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/transform.ts +++ /dev/null @@ -1,183 +0,0 @@ -import valueParser from 'postcss-value-parser'; - -import { - getFunctionArgs, - isNumericOperator, - isSassFunction, - isTransformableLength, - namespace, - toTransformablePx, - StopWalkingFunctionNodes, - createSassMigrator as v9StylesTokenizeSpace, -} from '../../utilities/sass'; -import {isKeyOf} from '../../utilities/types'; -import {scss} from '../../utilities/constants'; - -export const extensions = scss.extensions; -export const options = { - ...scss.options, -}; - -export default v9StylesTokenizeSpace( - 'v9-styles-tokenize-space', - (_, {methods, options}, context) => { - const namespacedRem = namespace('rem', options); - - return (root) => { - methods.walkDecls(root, (decl) => { - if (!spaceProps.has(decl.prop)) return; - - const parsedValue = valueParser(decl.value); - - handleSpaceProps(); - - if (context.fix) { - decl.value = parsedValue.toString(); - } - - function handleSpaceProps() { - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - methods.report({ - node: decl, - severity: 'warning', - message: 'Numeric operator detected.', - }); - return; - } - - if (node.type === 'word') { - if (globalValues.has(node.value)) return; - - const dimension = valueParser.unit(node.value); - - if (!isTransformableLength(dimension)) return; - - const valueInPx = toTransformablePx(node.value); - - if (!isKeyOf(spaceMap, valueInPx)) { - methods.report({ - node: decl, - severity: 'error', - message: `Non-tokenizable value '${node.value}'`, - }); - return; - } - - if (context.fix) { - node.value = `var(${spaceMap[valueInPx]})`; - return; - } - - methods.report({ - node: decl, - severity: 'error', - message: `Prefer var(${spaceMap[valueInPx]}) Polaris token.`, - }); - return; - } - - if (node.type === 'function') { - if (isSassFunction(namespacedRem, node)) { - const args = getFunctionArgs(node); - - if (args.length !== 1) { - methods.report({ - node: decl, - severity: 'error', - message: `Expected 1 argument, got ${args.length}`, - }); - return; - } - - const valueInPx = toTransformablePx(args[0]); - - if (!isKeyOf(spaceMap, valueInPx)) { - methods.report({ - node: decl, - severity: 'error', - message: `Non-tokenizable value '${args[0].trim()}'`, - }); - return; - } - - if (context.fix) { - node.value = 'var'; - node.nodes = [ - { - type: 'word', - value: spaceMap[valueInPx], - sourceIndex: node.nodes[0]?.sourceIndex ?? 0, - sourceEndIndex: spaceMap[valueInPx].length, - }, - ]; - return; - } - - methods.report({ - node: decl, - severity: 'error', - message: `Prefer var(${spaceMap[valueInPx]}) Polaris token.`, - }); - } - - return StopWalkingFunctionNodes; - } - }); - } - }); - }; - }, -); - -const globalValues = new Set(['inherit', 'initial', 'unset']); - -const spaceProps = new Set([ - 'padding', - 'padding-top', - 'padding-right', - 'padding-bottom', - 'padding-left', - 'padding-inline', - 'padding-inline-start', - 'padding-inline-end', - 'padding-block', - 'padding-block-start', - 'padding-block-end', - 'margin', - 'margin-top', - 'margin-right', - 'margin-bottom', - 'margin-left', - 'margin-inline', - 'margin-inline-start', - 'margin-inline-end', - 'margin-block', - 'margin-block-start', - 'margin-block-end', - 'gap', - 'grid-gap', - 'row-gap', - 'grid-row-gap', - 'column-gap', - 'grid-column-gap', -]); - -const spaceMap = { - '1px': '--p-space-025', - '2px': '--p-space-05', - '4px': '--p-space-1', - '8px': '--p-space-2', - '12px': '--p-space-3', - '16px': '--p-space-4', - '20px': '--p-space-5', - '24px': '--p-space-6', - '32px': '--p-space-8', - '40px': '--p-space-10', - '48px': '--p-space-12', - '64px': '--p-space-16', - '80px': '--p-space-20', - '96px': '--p-space-24', - '112px': '--p-space-28', - '128px': '--p-space-32', -} as const; diff --git a/polaris-codemods/src/utilities/constants.ts b/polaris-codemods/src/utilities/constants.ts deleted file mode 100644 index c90fa32552b..00000000000 --- a/polaris-codemods/src/utilities/constants.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type {TransformInfo} from './types'; - -export const POLARIS_MIGRATOR_COMMENT = - 'polaris-migrator: Unable to migrate the following expression. Please upgrade manually.'; - -export const scss: TransformInfo = { - extensions: ['css', 'scss'], - options: { - namespace: { - name: 'namespace', - type: 'string', - description: 'Provide an optional SCSS module namespace to target.', - }, - }, -}; - -export const typescript: TransformInfo = { - extensions: ['js', 'jsx', 'ts', 'tsx'], - options: { - relative: { - name: 'relative', - type: 'boolean', - description: 'Are you targeting relative imports?', - }, - }, -}; diff --git a/polaris-codemods/src/utilities/imports.ts b/polaris-codemods/src/utilities/imports.ts deleted file mode 100644 index 36733a18ffd..00000000000 --- a/polaris-codemods/src/utilities/imports.ts +++ /dev/null @@ -1,291 +0,0 @@ -import type {Collection} from 'jscodeshift'; -import type core from 'jscodeshift'; - -export function hasImportDeclaration( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return Boolean( - source - .find(j.ImportDeclaration) - .filter((path) => path.node.source.value === sourcePath).length, - ); -} - -export function getImportDeclaration( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return source - .find(j.ImportDeclaration) - .filter((path) => path.node.importKind !== 'type') - .filter((path) => path.node.source.value === sourcePath); -} - -export function getRelativeImportDeclaration( - j: core.JSCodeshift, - source: Collection, - fileName = '', -) { - const relativeRegex = new RegExp(String.raw`^[\.\/]*${fileName}$`); - return source - .find(j.ImportDeclaration) - .filter( - (path) => - typeof path.node.source.value === 'string' && - relativeRegex.test(path.node.source.value), - ); -} - -export function getRelativeImportDeclarationValue( - j: core.JSCodeshift, - source: Collection, - fileName = '', -) { - const declarations = getRelativeImportDeclaration(j, source, fileName); - - if (!declarations.length) return null; - - return (declarations.nodes()[0]!.source!.value as string) || null; -} - -export function removeImportDeclaration( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - getImportDeclaration(j, source, sourcePath).remove(); -} - -export function renameImportDeclaration( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, - newSourcePath: string, -) { - getImportDeclaration(j, source, sourcePath).forEach( - (importDeclaration) => - (importDeclaration.node.source = j.stringLiteral(newSourcePath)), - ); -} - -export function insertImportDeclaration( - j: core.JSCodeshift, - source: Collection, - importSpecifier: string, - sourcePath: string, - afterSourcePath: string, -) { - const isSameModuleSpecifier = sourcePath === afterSourcePath; - if (isSameModuleSpecifier) { - insertImportSpecifier(j, source, sourcePath, importSpecifier); - } else { - getImportDeclaration(j, source, afterSourcePath).insertAfter( - j.importDeclaration.from({ - source: j.literal(sourcePath), - specifiers: [j.importSpecifier(j.identifier(importSpecifier))], - }), - ); - } -} - -export function getDefaultImportSpecifier( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return source - .find(j.ImportDeclaration) - .filter((path) => path.node.source.value === sourcePath) - .find(j.ImportDefaultSpecifier); -} - -export function removeDefaultImportSpecifier( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return getDefaultImportSpecifier(j, source, sourcePath).remove(); -} - -export function getDefaultImportSpecifierName( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - const specifiers = getDefaultImportSpecifier(j, source, sourcePath); - - if (!specifiers.length) return null; - - return specifiers.nodes()[0]!.local!.name; -} - -export function hasDefaultImportSpecifier( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return Boolean(getDefaultImportSpecifier(j, source, sourcePath).length); -} - -export function getImportAllSpecifiers( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return source - .find(j.ImportDeclaration) - .filter((path) => path.node.source.value === sourcePath) - .find(j.ImportSpecifier); -} - -export function getImportSpecifier( - j: core.JSCodeshift, - source: Collection, - specifier: string, - sourcePath: string, -) { - return getImportAllSpecifiers(j, source, sourcePath).filter( - (path) => path.value.imported.name === specifier, - ); -} - -export function getImportSpecifierName( - j: core.JSCodeshift, - source: Collection, - specifier: string, - sourcePath: string, -) { - const specifiers = getImportSpecifier(j, source, specifier, sourcePath); - - return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null; -} - -export function hasImportSpecifiers( - j: core.JSCodeshift, - source: Collection, - sourcePath: string, -) { - return Boolean(getImportAllSpecifiers(j, source, sourcePath)?.length); -} - -export function hasImportSpecifier( - j: core.JSCodeshift, - source: Collection, - specifier: string, - sourcePath: string, -) { - return Boolean(getImportSpecifier(j, source, specifier, sourcePath)?.length); -} - -export function insertImportSpecifier( - j: core.JSCodeshift, - source: Collection, - importSpecifier: string, - sourcePath: string, -) { - getImportDeclaration(j, source, sourcePath).replaceWith((declaration) => { - return j.importDeclaration.from({ - source: j.literal(sourcePath), - specifiers: [ - ...(declaration.value.specifiers || []).filter( - (item) => item.type === 'ImportSpecifier' && item.imported != null, - ), - j.importSpecifier(j.identifier(importSpecifier)), - ], - comments: declaration.value.comments || null, - }); - }); -} - -export function renameImportSpecifier( - j: core.JSCodeshift, - source: Collection, - specifier: string, - newSpecifier: string, - sourcePath: string, -) { - getImportSpecifier(j, source, specifier, sourcePath).replaceWith( - j.importSpecifier(j.identifier(newSpecifier)), - ); -} - -export function removeImportSpecifier( - j: core.JSCodeshift, - source: Collection, - specifier: string, - sourcePath: string, -) { - getImportSpecifier(j, source, specifier, sourcePath).remove(); -} - -interface NormalizeImportSourcePathsOptions { - relative?: boolean; - from: string; - to: string; -} - -export function normalizeImportSourcePaths( - j: core.JSCodeshift, - source: Collection, - options: NormalizeImportSourcePathsOptions = { - relative: false, - from: '', - to: '', - }, -) { - const {relative, from, to} = options; - const sourcePaths = { - from: '@shopify/polaris', - to: '@shopify/polaris', - }; - - if (relative) { - sourcePaths.from = getRelativeImportDeclarationValue(j, source, from) || ''; - - if (!sourcePaths.from) return null; - - sourcePaths.to = - getRelativeImportDeclarationValue(j, source, to) || - sourcePaths.from.replace(from, to); - } - - return sourcePaths; -} - -export function updateImports( - j: core.JSCodeshift, - source: Collection, - options: { - fromSpecifier: string; - toSpecifier: string; - fromSourcePath: string; - toSourcePath: string; - }, -) { - const {fromSpecifier, toSpecifier, fromSourcePath, toSourcePath} = options; - - // Insert new import - if (!hasImportDeclaration(j, source, toSourcePath)) { - insertImportDeclaration( - j, - source, - toSpecifier, - toSourcePath, - fromSourcePath, - ); - } - if (!hasImportSpecifier(j, source, toSpecifier, toSourcePath)) { - insertImportSpecifier(j, source, toSpecifier, toSourcePath); - } - - // Remove old import - if (hasImportSpecifier(j, source, fromSpecifier, fromSourcePath)) { - removeImportSpecifier(j, source, fromSpecifier, fromSourcePath); - } - if (!hasImportSpecifiers(j, source, fromSourcePath)) { - removeImportDeclaration(j, source, fromSourcePath); - } -} diff --git a/polaris-codemods/src/utilities/jsx.ts b/polaris-codemods/src/utilities/jsx.ts deleted file mode 100644 index e5eda149aab..00000000000 --- a/polaris-codemods/src/utilities/jsx.ts +++ /dev/null @@ -1,188 +0,0 @@ -import type {ASTPath, Collection, JSXAttribute, JSXElement} from 'jscodeshift'; -import type core from 'jscodeshift'; - -export function getJSXAttributes( - j: core.JSCodeshift, - element: ASTPath, - attributeName: string, -) { - return j(element) - .find(j.JSXOpeningElement) - .find(j.JSXAttribute) - .filter((attribute) => { - const matches = j(attribute) - .find(j.JSXIdentifier) - .filter((identifier) => identifier.value.name === attributeName); - return Boolean(matches.length); - }); -} - -export function hasJSXAttribute( - j: core.JSCodeshift, - element: ASTPath, - attributeName: string, -) { - return getJSXAttributes(j, element, attributeName).length > 0; -} - -export function hasJSXSpreadAttribute( - j: core.JSCodeshift, - element: ASTPath, -) { - return ( - j(element).find(j.JSXOpeningElement).find(j.JSXSpreadAttribute).length > 0 - ); -} - -export function removeJSXAttributes( - _j: core.JSCodeshift, - element: ASTPath, - attributeName: string, -) { - const jsxAttributes = element.value.attributes?.filter( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === attributeName, - ); - - if (!jsxAttributes) return; - - jsxAttributes.forEach((attr) => { - const jsxAttribute = attr as JSXAttribute; - - jsxAttribute.name.name = ''; - jsxAttribute.value = null; - }); -} - -export function insertJSXAttribute( - j: core.JSCodeshift, - element: ASTPath, - attributeName: string, - attributeValue?: string, -) { - const newComponent = j.jsxElement( - j.jsxOpeningElement(element.node.openingElement.name, [ - ...(element.node.openingElement.attributes || []), - j.jsxAttribute( - j.jsxIdentifier(attributeName), - attributeValue ? j.stringLiteral(attributeValue) : null, - ), - ]), - element.node.closingElement, - element.node.children, - ); - - return j(element).replaceWith(newComponent); -} - -export function replaceJSXAttributes( - j: core.JSCodeshift, - element: ASTPath, - attributeName: string, - newAttributeName: string, - newAttributeValue?: - | string - | { - [key: string]: string; - }, -) { - return getJSXAttributes(j, element, attributeName).forEach((attribute) => { - j(attribute) - .find(j.JSXIdentifier) - .replaceWith(j.jsxIdentifier(newAttributeName)); - - if (!newAttributeValue) { - return; - } - - j(attribute) - .find(j.StringLiteral) - .forEach((literal) => { - literal.node.value = - typeof newAttributeValue === 'string' - ? newAttributeValue - : newAttributeValue[literal.node.value]; - }); - }); -} - -export function replaceJSXElement( - j: core.JSCodeshift, - element: ASTPath, - componentName: string, -) { - const newComponent = j.jsxElement( - j.jsxOpeningElement( - j.jsxIdentifier(componentName), - element.node.openingElement.attributes, - ), - j.jsxClosingElement(j.jsxIdentifier(componentName)), - element.node.children, - ); - - return j(element).replaceWith(newComponent); -} - -export function renameProps( - _j: core.JSCodeshift, - source: Collection, - componentName: string, - props: {[from: string]: string}, -) { - const fromProps = Object.keys(props); - const isFromProp = (prop: unknown): prop is keyof typeof props => - fromProps.includes(prop as string); - - source.findJSXElements(componentName)?.forEach((path) => { - path.node.openingElement.attributes?.forEach((node) => { - if (node.type === 'JSXAttribute' && isFromProp(node.name.name)) { - node.name.name = props[node.name.name]; - } - }); - }); - - return source; -} - -export function insertJSXComment( - j: core.JSCodeshift, - element: ASTPath, - comment: string, - position: 'before' | 'after' = 'before', -) { - const commentContent = j.jsxEmptyExpression(); - commentContent.comments = [j.commentBlock(` ${comment} `, false, true)]; - - const jsxComment = j.jsxExpressionContainer(commentContent); - const lineBreak = j.jsxText('\n'); - - if (position === 'before') { - element.insertBefore(jsxComment); - element.insertBefore(lineBreak); - } - - if (position === 'after') { - element.insertAfter(lineBreak); - element.insertAfter(jsxComment); - } -} - -export function insertCommentBefore( - j: core.JSCodeshift, - path: ASTPath, - comment: string, -) { - const content = ` ${comment} `; - - path.value.comments = path.value.comments || []; - - const exists = path.value.comments.find( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - (comment) => comment.value === content, - ); - - // Avoiding duplicates of the same comment - if (exists) return; - - path.value.comments.push(j.commentBlock(content)); -} diff --git a/polaris-codemods/src/utilities/sass.ts b/polaris-codemods/src/utilities/sass.ts deleted file mode 100644 index 40fdde08445..00000000000 --- a/polaris-codemods/src/utilities/sass.ts +++ /dev/null @@ -1,603 +0,0 @@ -import type {FileInfo, API, Options} from 'jscodeshift'; -import type { - Root, - Result, - Plugin, - Container, - Declaration, - Node as PostCSSNode, - Rule as PostCSSRule, - Comment as PostCSSComment, - AtRule, -} from 'postcss'; -import postcss from 'postcss'; -import type { - Node, - ParsedValue, - FunctionNode, - Dimension, -} from 'postcss-value-parser'; -import valueParser from 'postcss-value-parser'; -import {toPx, getCustomPropertyNames, tokens} from '@shopify/polaris-tokens'; - -import {POLARIS_MIGRATOR_COMMENT} from './constants'; - -const defaultNamespace = ''; - -const polarisCustomPropertyRegEx = new RegExp( - getCustomPropertyNames(tokens).join('|'), -); - -function getNamespace(options?: NamespaceOptions) { - return options?.namespace || defaultNamespace; -} - -export function getNamespacePattern(options?: NamespaceOptions) { - const namespace = getNamespace(options); - - return namespace ? String.raw`${namespace}\.` : defaultNamespace; -} - -export interface NamespaceOptions { - namespace?: string; -} - -export function namespace(name: string, options?: NamespaceOptions) { - const namespace = getNamespace(options); - return namespace ? `${namespace}.${name}` : name; -} - -/** - * Checks if a `valueParser` node is a [Sass numeric operator](https://sass-lang.com/documentation/operators/numeric) - */ -export function isNumericOperator(node: Node): boolean { - return ( - node.value === '+' || - node.value === '-' || - node.value === '*' || - node.value === '/' || - node.value === '%' - ); -} - -/** - * Checks if any descendant `valueParser` node is a numeric operator - */ -export function hasNumericOperator( - parsedValue: ParsedValue, - deep = true, -): boolean { - let containsNumericOperator = false; - - parsedValue.walk((node) => { - if (isNumericOperator(node)) { - containsNumericOperator = true; - return StopWalkingFunctionNodes; - } - - if (!deep) { - return StopWalkingFunctionNodes; - } - }); - - return containsNumericOperator; -} - -/** - * Checks if a `valueParser` node is a [SASS variable](https://sass-lang.com/documentation/variables) - */ -export function isSassVariable(node: Node): boolean { - return node.type === 'word' && node.value.startsWith('$'); -} - -/** - * Checks if any descendant `valueParser` node is a SASS variable - */ -export function hasSassVariable( - parsedValue: ParsedValue, - deep = true, -): boolean { - let containsSassVariable = false; - - parsedValue.walk((node) => { - if (isSassVariable(node)) { - containsSassVariable = true; - return StopWalkingFunctionNodes; - } - - if (!deep) { - return StopWalkingFunctionNodes; - } - }); - - return containsSassVariable; -} - -/** - * Checks if a `valueParser` node is a given Sass function - * - * @example - * const namespacedRem = namespace('rem', options); - * - * if (isSassFunction(namespacedRem, node)) node // FunctionNode - */ -export function isSassFunction(name: string, node: Node): node is FunctionNode { - return node.type === 'function' && node.value === name; -} - -/** - * Checks if any descendant `valueParser` node is a given Sass function - * - * @example - * const namespacedRem = namespace('rem', options); - * - * if (!hasSassFunction(namespacedRem, parsedValue)) return; - */ -export function hasSassFunction( - name: string, - parsedValue: ParsedValue, - deep = true, -): boolean { - let containsSassFunction = false; - - parsedValue.walk((node) => { - if (isSassFunction(name, node)) { - containsSassFunction = true; - return StopWalkingFunctionNodes; - } - - if (!deep) { - return StopWalkingFunctionNodes; - } - }); - - return containsSassFunction; -} - -/** - * Check whether a string has Sass interpolation - */ -export function hasSassInterpolation(string: string) { - return /#\{.+?\}/.test(string); -} - -/** - * Check whether a string has negative Sass interpolation - */ -export function hasNegativeSassInterpolation(string: string) { - return /-#\{.+?\}/.test(string); -} - -/** - * Replace negative Sass interpolations with a multiplication operator and a negative number - * - * @example - * // Before - * -#{spacing()}; - * - * // After - * -1 * ${spacing()}; - */ -export function replaceNegativeSassInterpolation(parsedValue: ParsedValue) { - let newNodes: Node[] = []; - parsedValue.walk((node, index, nodes) => { - const containsInterpolation = /-#\{.+?/.test(node.value); - if (!containsInterpolation) return; - - node.value = node.value.replace('-#{', '#{'); - - const left = index > 0 ? nodes.slice(0, index) : []; - const right = nodes.length - 1 > index ? nodes.slice(index + 1) : []; - - newNodes = [ - ...left, - {type: 'word', value: '-1'}, - {type: 'space', value: ' '}, - {type: 'word', value: '*'}, - {type: 'space', value: ' '}, - node, - ...right, - ] as Node[]; - }); - parsedValue.nodes = newNodes; -} - -/** - * Remove the Sass interpolation from parsedValue - */ -export function removeSassInterpolation( - namespace: string, - parsedValue: ParsedValue, -) { - parsedValue.walk((node, index, nodes) => { - const regexp = new RegExp(`#{${namespace}`); - const containsInterpolation = regexp.test(node.value); - if (containsInterpolation) { - node.value = node.value.replace(/#\{/, ''); - nodes[index + 1].value = nodes[index + 1].value.replace(/}/, ''); - } - }); - - parsedValue.nodes = parsedValue.nodes.filter( - (node) => !(node.type === 'word' && node.value === ''), - ); -} - -export function getFunctionArgs(node: FunctionNode): string[] { - const args: string[] = []; - - let arg = ''; - - node.nodes.forEach((node) => { - if (node.type === 'div' && node.value === ',') { - args.push(arg); - arg = ''; - return; - } - - arg += valueParser.stringify(node); - }); - - if (arg) { - args.push(arg); - } - - return args; -} - -/** - * Removes surrounding quotes from a string - * @example - * const string = '"hello"'; - * stripQuotes(string); // hello - */ -export function stripQuotes(string: string) { - return string.replace(/^['"]|['"]$/g, ''); -} - -/** - * All transformable dimension units. These values are used to determine - * if a decl.value can be converted to pixels and mapped to a Polaris custom property. - */ -export const transformableLengthUnits = ['px', 'rem']; - -export function isUnitlessZero(dimension: false | Dimension) { - return dimension && dimension.unit === '' && dimension.number === '0'; -} - -export function isTransformableLength( - dimension: false | Dimension, -): dimension is Dimension { - if (!dimension) return false; - - return transformableLengthUnits.includes(dimension.unit); -} - -export function hasTransformableLength(parsedValue: ParsedValue): boolean { - let transformableLength = false; - - parsedValue.walk((node) => { - if ( - node.type === 'word' && - isTransformableLength(valueParser.unit(node.value)) - ) { - transformableLength = true; - } - }); - - return transformableLength; -} - -export function toTransformablePx(value: string) { - const dimension = valueParser.unit(value); - - if (!isTransformableLength(dimension)) return; - - return toPx(`${dimension.number}${dimension.unit}`); -} - -/** - * Exit early and stop traversing descendant nodes: - * https://www.npmjs.com/package/postcss-value-parser:~:text=Returning%20false%20in%20the%20callback%20will%20prevent%20traversal%20of%20descendent%20nodes - */ -export const StopWalkingFunctionNodes = false; - -/** - * All transformable duration units. These values are used to determine - * if a decl.value can be mapped to a Polaris custom property. - * - * Note: