Add migration for sass z-index fn #7310

gwyneplaine · 2022-09-30T06:27:13Z

WHY are these changes introduced?
Part of #7211

WHAT is this pull request doing?
Adding a replace-sass-z-index migration script.

Running npx @shopify/polaris-migrator replace-sass-z-index "**/*.scss" will target z-index function usage and do the following:

If more than one argument exists we assume the code is invoking z-index to map-get on a custom sass map. In this case, we add a comment with a migration warning and code snippet replacing the legacy-polaris-v8.z-index usage with map-get
If there's a calculation in the same declaration but the legacy-polaris-v8.z-index invocation is valid and corresponds to a polaris token, we add a comment with a migration warning and a code snippet replacing that invocation with a css variable invocation pointing at the corresponding polaris-token.
If its just a valid legacy-polaris-v8.z-index invocation that corresponds to an existing polaris token, we replace it with a css-variable invocation pointing at the corresponding polaris-token.
Otherwise we ignore the declaration.

Things our codemod doesn't presently understand but should:

interpolations. calc(#{legacy-polaris-v8.z-index} + 1) for example is completely ignored by our code. As post-css interprets this as an invocation of a function called #{legacy-polaris-v8.z-index. It doesn't seem to understand interpolations at the moment. We can probably use something like style-lint's hasInterpolation to work around this, (ty @aaronccasanova), but not something we should worry about for first pass imo.

polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts

sam-b-rose

This looks 💯 great catch on the unnecessary ...node.nodes as well.

Feel free to /snapit and test and/or run on web 🚢

We can circle back for function reuse and clean up after the other length PR is merged.

polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts

polaris-migrator/src/migrations/replace-sass-z-index/tests/replace-sass-z-index.test.ts

gwyneplaine · 2022-10-04T02:30:22Z

/snapit

github-actions · 2022-10-04T02:35:48Z

🫰✨ Thanks @gwyneplaine! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

gwyneplaine · 2022-10-11T00:36:11Z

/snapit

github-actions · 2022-10-11T00:40:14Z

🫰✨ Thanks @gwyneplaine! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

gwyneplaine · 2022-10-11T02:46:41Z

/snapit

github-actions · 2022-10-11T02:50:32Z

🫰✨ Thanks @gwyneplaine! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

gwyneplaine · 2022-10-11T04:37:11Z

Added additional usecase of z-index([validKey], $fixed-element-stacking-order)
which contains a larger subset of our z-index tokens.

gwyneplaine · 2022-10-11T05:24:53Z

/snapit

github-actions · 2022-10-11T05:28:48Z

🫰✨ Thanks @gwyneplaine! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

gwyneplaine · 2022-10-18T03:45:43Z

Gonna let this rock after https://github.com/Shopify/web/pull/74921 is merged.
@aaronccasanova will hold off on refactoring to your target array strategy, preference is to get this in and then iterate in a subsequent PR

…-z-index.test.ts

…ass-z-index.ts Remove unnecessary nodes check in hasMoreThanOneArgument Co-authored-by: Aaron Casanova <[email protected]>

…ies/sass.ts

…tion

gwyneplaine · 2022-10-19T02:18:33Z

Both web PRs for this migration have now been merged:

Manual: https://github.com/Shopify/web/pull/74921
Safe automatic: https://github.com/Shopify/web/pull/74918

Merging this in now, subsequent PR incoming to refactor to @aaronccasanova's collection strategy shortly 👍

@lgriffee

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#7342](#7342) [`dc2990acf`](dc2990a) Thanks [@lgriffee](https://github.com/lgriffee)! - Rename `replace-sass-length` migration to `replace-spacing-lengths` Add `gap` properties to `replace-sass-space` migration - [#7310](#7310) [`8fb215836`](8fb2158) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Add sass z-index migration - [#7335](#7335) [`699b70713`](699b707) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add migration to `replace-typography-declarations` - [#7375](#7375) [`8194e174a`](8194e17) Thanks [@samrose3](https://github.com/samrose3)! - Add Sass color function migration - [#7387](#7387) [`a0fa96ed4`](a0fa96e) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `replace-border-declarations` migration ### Patch Changes - [#7487](#7487) [`60191f353`](60191f3) Thanks [@lgriffee](https://github.com/lgriffee)! - Update numeric operator detection to check all node types - [#7412](#7412) [`6d82e8965`](6d82e89) Thanks [@samrose3](https://github.com/samrose3)! - Enhance Sass spacing migration to catch Sass interpolations - [#7423](#7423) [`0591db26a`](0591db2) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Update `replace-typography-declarations` comment strategy - [#7459](#7459) [`933a9d71b`](933a9d7) Thanks [@lgriffee](https://github.com/lgriffee)! - Add missing values to borderRadius length map ## @shopify/[email protected] ### Minor Changes - [#7429](#7429) [`e87330f5b`](e87330f) Thanks [@aveline](https://github.com/aveline)! - Update `AlphaStack` to be polymorphic, add list reset styles and allow spacing to change based on breakpoint - [#7450](#7450) [`74237ebc5`](74237eb) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `minHeight` and `minWidth` on `Box` - [#7432](#7432) [`85c022033`](85c0220) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `overflowX`, `overflowY`, and `width` props to `Box` - [#7491](#7491) [`a9eff60e1`](a9eff60) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `section` element types to `Box` - [#7389](#7389) [`4f184c658`](4f184c6) Thanks [@aveline](https://github.com/aveline)! - Added `breakWord` prop to `Text` - [#7430](#7430) [`87981ac01`](87981ac) Thanks [@aveline](https://github.com/aveline)! - Added `legend` as supported element for `Text` component - [#7438](#7438) [`4b4411930`](4b44119) Thanks [@aveline](https://github.com/aveline)! - Simplify `AlphaCard` by removing `hasBorderRadius` prop and `shadow` prop ### Patch Changes - [#7405](#7405) [`ea2615881`](ea26158) Thanks [@laurkim](https://github.com/laurkim)! - Fixed how optional `id` prop rendered in `Text` - [#7434](#7434) [`62288755a`](6228875) Thanks [@laurkim](https://github.com/laurkim)! - Fixed reference to `width` custom property in `Box` - [#7396](#7396) [`3be27bae8`](3be27ba) Thanks [@laurkim](https://github.com/laurkim)! - Updated alias and scale types in `Box` with type tests to check they exist in our token groups. Updated `get-props` script to parse utility types with unions. - [#7435](#7435) [`4097d539b`](4097d53) Thanks [@kyledurand](https://github.com/kyledurand)! - Cleaned up styles on Box - [#7410](#7410) [`13546e344`](13546e3) Thanks [@kyledurand](https://github.com/kyledurand)! - Apply default value to Columns - [#7483](#7483) [`7a78e07bf`](7a78e07) Thanks [@laurkim](https://github.com/laurkim)! - Fixed missing `children` prop in `Columns` prop type - [#7492](#7492) [`612e02786`](612e027) Thanks [@henryyi](https://github.com/henryyi)! - Only apply scroll-lock with scrollbar when body is scrollable - [#7481](#7481) [`4f5f6cf50`](4f5f6cf) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed horizontal scroll bug in Scrollable - [#7471](#7471) [`2f16b2310`](2f16b23) Thanks [@kyledurand](https://github.com/kyledurand)! - Added viewport addon to storybook and matched values to our breakpoints - [#7433](#7433) [`90487fd70`](90487fd) Thanks [@kellymiller-shop](https://github.com/kellymiller-shop)! - fixed heading offset on IndexTable - [#7453](#7453) [`3191d13c0`](3191d13) Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed IndexTable not rendering bulk actions on resize - [#7395](#7395) [`89fea23f7`](89fea23) Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed scrolling performance for IndexTable on safari - [#7442](#7442) [`77057d5b6`](77057d5) Thanks [@kyledurand](https://github.com/kyledurand)! - Fix SkeletonPage actions layout ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`dc2990acf`](dc2990a), [`8fb215836`](8fb2158), [`60191f353`](60191f3), [`6d82e8965`](6d82e89), [`0591db26a`](0591db2), [`699b70713`](699b707), [`8194e174a`](8194e17), [`933a9d71b`](933a9d7), [`a0fa96ed4`](a0fa96e)]: - @shopify/[email protected] ## [email protected] ### Minor Changes - [#7396](#7396) [`3be27bae8`](3be27ba) Thanks [@laurkim](https://github.com/laurkim)! - Updated alias and scale types in `Box` with type tests to check they exist in our token groups. Updated `get-props` script to parse utility types with unions. - [#7393](#7393) [`cd4577a3f`](cd4577a) Thanks [@martenbjork](https://github.com/martenbjork)! - Update markdown file structure to not require folders for each markdown page. Now you can simply create a markdown.md file and it will be rendered as a page. - [#7418](#7418) [`c5cfe9026`](c5cfe90) Thanks [@kyledurand](https://github.com/kyledurand)! - Support beta status components - [#7449](#7449) [`31437dfb2`](31437df) Thanks [@jjgali](https://github.com/jjgali)! - Removed duplicate image on error messages page. - [#7491](#7491) [`a9eff60e1`](a9eff60) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `section` element types to `Box` - [#7441](#7441) [`0d446cb46`](0d446cb) Thanks [@jjgali](https://github.com/jjgali)! - Remove section on compositions vs patterns. - [#7420](#7420) [`d462e2e5d`](d462e2e) Thanks [@jjgali](https://github.com/jjgali)! - Clarify rules for formatting dates and times. ### Patch Changes - [#7398](#7398) [`c21ea83d4`](c21ea83) Thanks [@tracytees](https://github.com/tracytees)! - - Updated the "Getting started" and "Polaris 101" pages - Removed /design, /develop, /shared-resources, /patterns-components-and-tokens - [#7426](#7426) [`442d51ddf`](442d51d) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix nav bug - [#7452](#7452) [`8a05e840f`](8a05e84) Thanks [@gui-santos](https://github.com/gui-santos)! - fix visual bug in token page's navigation where text was breaking into two lines - [#7469](#7469) [`a8d80cfd5`](a8d80cf) Thanks [@chazdean](https://github.com/chazdean)! - Updated `AlphaStack` component docs - [#7483](#7483) [`7a78e07bf`](7a78e07) Thanks [@laurkim](https://github.com/laurkim)! - Fixed missing `children` prop in `Columns` prop type - [#7436](#7436) [`95a8ac0d2`](95a8ac0) Thanks [@laurkim](https://github.com/laurkim)! - Fix references to `Box` margin props in alpha layout examples - [#7444](#7444) [`e0d6b00ba`](e0d6b00) Thanks [@kyledurand](https://github.com/kyledurand)! - Fix tile image and increase example widths on alpha components - [#7427](#7427) [`25e70a8d9`](25e70a8) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Declare sandbox nav in a more idiomatic fashion - [#7482](#7482) [`0ec6961aa`](0ec6961) Thanks [@alex-page](https://github.com/alex-page)! - Bump GitHub action versions and add p-map for gen-og-images CI failure - Updated dependencies \[[`ea2615881`](ea26158), [`62288755a`](6228875), [`3be27bae8`](3be27ba), [`4097d539b`](4097d53), [`e87330f5b`](e87330f), [`74237ebc5`](74237eb), [`85c022033`](85c0220), [`13546e344`](13546e3), [`7a78e07bf`](7a78e07), [`a9eff60e1`](a9eff60), [`4f184c658`](4f184c6), [`612e02786`](612e027), [`4f5f6cf50`](4f5f6cf), [`87981ac01`](87981ac), [`2f16b2310`](2f16b23), [`90487fd70`](90487fd), [`3191d13c0`](3191d13), [`89fea23f7`](89fea23), [`77057d5b6`](77057d5), [`4b4411930`](4b44119)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`ea2615881`](ea26158), [`62288755a`](6228875), [`3be27bae8`](3be27ba), [`4097d539b`](4097d53), [`e87330f5b`](e87330f), [`74237ebc5`](74237eb), [`85c022033`](85c0220), [`13546e344`](13546e3), [`7a78e07bf`](7a78e07), [`a9eff60e1`](a9eff60), [`4f184c658`](4f184c6), [`612e02786`](612e027), [`4f5f6cf50`](4f5f6cf), [`87981ac01`](87981ac), [`2f16b2310`](2f16b23), [`90487fd70`](90487fd), [`3191d13c0`](3191d13), [`89fea23f7`](89fea23), [`77057d5b6`](77057d5), [`4b4411930`](4b44119)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

gwyneplaine changed the title ~~initial migration mod for legacy-polaris-v8.z-index sass fn~~ Add migration for sass z-index fn Sep 30, 2022

gwyneplaine commented Sep 30, 2022

View reviewed changes

polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts Outdated Show resolved Hide resolved

gwyneplaine commented Sep 30, 2022

View reviewed changes

polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts Outdated Show resolved Hide resolved

gwyneplaine added the #gsd:29805 label Sep 30, 2022

gwyneplaine self-assigned this Sep 30, 2022

sam-b-rose approved these changes Sep 30, 2022

View reviewed changes

polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts Outdated Show resolved Hide resolved

aaronccasanova reviewed Sep 30, 2022

View reviewed changes

gwyneplaine marked this pull request as ready for review October 3, 2022 22:33

gwyneplaine force-pushed the replace-sass-z-index branch from 74bc3cd to f3fa524 Compare October 3, 2022 22:43

gwyneplaine force-pushed the replace-sass-z-index branch from e8d8b9b to 8d0a77a Compare October 11, 2022 04:55

Shopify deleted a comment from github-actions bot Oct 11, 2022

gwyneplaine force-pushed the replace-sass-z-index branch from 8d0a77a to 1bb1a8c Compare October 13, 2022 03:43

gwyneplaine and others added 8 commits October 19, 2022 10:55

initial migration mod for legacy-polaris-v8.z-index sass fn

433c7ef

changeset

1bd4c4c

re-add replace-sass-z-index fixture to fixtures array in replace-sass…

09b60d1

…-z-index.test.ts

remove commented out ...node.nodes.slice(1)

8fd6dd3

add additional check to cover when no node arguments exist

8241646

Update polaris-migrator/src/migrations/replace-sass-z-index/replace-s…

ea4b486

…ass-z-index.ts Remove unnecessary nodes check in hasMoreThanOneArgument Co-authored-by: Aaron Casanova <[email protected]>

replace inlined isNumericOperator with import from ../../utilities/sass

f944b8c

refactor replace-sass-z-index to use sass utilities from ../../utilit…

d2faa3d

…ies/sass.ts

gwyneplaine added 4 commits October 19, 2022 10:55

fix map-get migration bug

23b4f99

add additional case for $fixed-element-stacking-order

cce3739

fix tests

f981c6d

add initial documentation, update map-get to map.get for easier migra…

be6c6f8

…tion

gwyneplaine force-pushed the replace-sass-z-index branch from 4a8d4ad to be6c6f8 Compare October 18, 2022 23:57

gwyneplaine merged commit 8fb2158 into main Oct 19, 2022

gwyneplaine deleted the replace-sass-z-index branch October 19, 2022 02:18

github-actions bot mentioned this pull request Oct 19, 2022

Version Packages #7406

Merged

This was referenced Oct 20, 2022

Add migration to increase Layout coverage #7211

Closed

Polaris migrations platform #6614

Closed

github-actions bot mentioned this pull request Oct 21, 2022

Version Packages bekturfs/polaris#1

Open

Add migration for sass z-index fn #7310

Add migration for sass z-index fn #7310

Uh oh!

Conversation

gwyneplaine commented Sep 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sam-b-rose left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gwyneplaine commented Oct 4, 2022

Uh oh!

github-actions bot commented Oct 4, 2022

Uh oh!

gwyneplaine commented Oct 11, 2022

Uh oh!

github-actions bot commented Oct 11, 2022

Uh oh!

gwyneplaine commented Oct 11, 2022

Uh oh!

github-actions bot commented Oct 11, 2022

Uh oh!

gwyneplaine commented Oct 11, 2022

Uh oh!

gwyneplaine commented Oct 11, 2022

Uh oh!

github-actions bot commented Oct 11, 2022

Uh oh!

gwyneplaine commented Oct 18, 2022

Uh oh!

gwyneplaine commented Oct 19, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gwyneplaine commented Sep 30, 2022 •

edited

Loading