Add migration to increase Layout coverage

[aaronccasanova]

Write a new @shopify/polaris-migrator script to increase Layout coverage. The migration should walk the following declaration and apply passing values.

{
    "z-index:",
    "display:",
    "text-align:",
    "position:",
    "align-items:",
    "align-self:",
    "justify-content:",
    "justify-self:",
    "flex:",
    "flex-shrink:",
    "flex-wrap:",
    "flex-grow:",
    "flex-basis:",
    "flex-direction:",
    "order:",
    "display:",
    "grid:",
    "grid-row-start:",
    "grid-row-end:",
    "grid-column:",
    "grid-row:",
    "grid-template:",
    "grid-template-rows:",
    "grid-template-columns:",
    "grid-template-areas:",
    "grid-auto-rows:",
    "grid-auto-columns:",
    "grid-column-end:",
    "grid-column-start:",
    "grid-area:",
    "height:",
    "width:",
    "transform:",
}

Related legacy API

• z-index

Failing lines

Review failures and determine what is possible to migrate:

• Note values that are easily replaced
• Otherwise, discuss replacement values with team

Data

• 👉 layout failing lines grouped by property
• failing-lines-all.json
• failing-lines-categorized.json
• grouped-failing-lines-categorized.json
• sorted-failing-lines-categorized.json

Related PRs

• Add migration for sass z-index fn #7310

[gwyneplaine]

We now have two PRs for migrating z-index on web waiting review and merge.
The first is a variety of "safe" migrations converting standard invocations of legacy-polaris-v8.z-index i.e.

- z-index: legacy-polaris-v8.z-index(content);
+ z-index: var(--p-z-1) ;

The second contains a variety of more complicated migrations.
Case 1
Invocations of legacy-polaris-v8.z-index with the legacy-polaris-v8.$fixed-element-stacking-order sass map
We know the result of these invocations, and those corresponding to a token value are converted.

- z-index: legacy-polaris-v8.z-index(modal, legacy-polaris-v8.$fixed-element-stacking-order);
+ z-index: var(--p-z-11);

Case 2
Any legacy-polaris-v8.z-index invoked within an arithmetic expression. i.e.

z-index: legacy-polaris-v8.z-index(content) + 1;

These are generally wrapped in a calc (although this may defer on a case by case basis)

- z-index: legacy-polaris-v8.z-index(content) + 1;
+ z-index: calc(var(--p-z-1) + 1);

Case 3
Lastly, any invocations of legacy-polaris-v8.z-index with custom sass maps are converted to a map.get invocations.
These invocations have their arguments reversed, as map.get expects the first argument to be the sass map and the second to be the key (this is inversed in legacy-polaris-v8.z-index)

- z-index: legacy-polaris-v8.z-index( search-query-container, variables.$stacking-order);
+ z-index: map.get(variables.$stacking-order, search-query-container);

Next steps:

• Evaluate best steps for coupling sass-migrator invocation post codemod. This is to ensure that map.get is in scope everywhere we replace z-index with it. This may just be a documented additional step for codemod users.
• Document the z-index codemod