Bump actions, pmap genPng, fix nodejs version, fix issues with node 14.17

.changeset/swift-shoes-beam.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Bump GitHub action versions and add p-map for gen-og-images CI failure

.github/workflows/changelog.yml

@@ -17,12 +17,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Setup Node with v16.13.0
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.13.0
 

.github/workflows/ci-a11y-vrt.yml

@@ -21,16 +21,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node with v16.13.0
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.13.0
           cache: yarn
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/.turbo
@@ -59,18 +59,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Chromatic git history to track changes
 
       - name: Setup Node with v16.13.0
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.13.0
           cache: yarn
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/.turbo

.github/workflows/ci.yml

@@ -9,32 +9,32 @@ on:
 
 jobs:
   build:
-    name: 'Validate with Node v${{ matrix.node_version }}'
+    name: 'Validate with Node v${{ matrix.node-version }}'
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node_version: ['14.17.0', '16.13.0']
+        node-version: ['14.17.0', '16.13.0']
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Setup Node with v${{ matrix.node_version }}
+      - name: Setup Node with v${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          node_version: ${{ matrix.node_version }}
+          node-version: ${{ matrix.node-version }}
           cache: yarn
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/.eslintcache
             **/.turbo
             node_modules/.cache/turbo
             polaris.shopify.com/.next/cache
-          key: ${{ runner.os }}-node${{ matrix.node_version }}-test-v1-${{ github.sha }}
+          key: ${{ runner.os }}-node${{ matrix.node-version }}-test-v1-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-node${{ matrix.node_version }}-test-v1-
+            ${{ runner.os }}-node${{ matrix.node-version }}-test-v1-
 
       - name: Install dependencies
         run: yarn --frozen-lockfile

.github/workflows/non-committable.yml

@@ -9,7 +9,7 @@ jobs:
   check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: dorny/paths-filter@v2
         id: filter
         with:

.github/workflows/publish-polaris-for-vscode.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         name: Checkout
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         name: Use Node.js 16.x
         with:
           node-version: 16

.github/workflows/release.yml

@@ -13,10 +13,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           cache: 'yarn'

.github/workflows/size-limit.yml

@@ -12,8 +12,8 @@ jobs:
     env:
       CI_JOB_NUMBER: 1
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: yarn

.github/workflows/snapit.yml

@@ -39,7 +39,7 @@ jobs:
                 repo: context.repo.repo,
                 pull_number: context.issue.number,
               })
-              
+
               // Pull request from fork
               if (context.payload.repository.full_name !== pullRequest.data.head.repo.full_name) {
                 const errorMessage = '`/snapit` is not supported on pull requests from forked repositories.'
@@ -58,7 +58,7 @@ jobs:
             }
 
       - name: Checkout default branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # issue_comment requires us to checkout the branch
       # https://github.com/actions/checkout/issues/331#issuecomment-1120113003
@@ -78,7 +78,7 @@ jobs:
           fi
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
 

documentation/Nodejs support.md

@@ -23,7 +23,7 @@ The `package.json` engines. This should match the `.github/workflows/ci.yml` and
 The GitHub actions `.github/workflows/ci.yml` file. This should match the `package.json` and list all supported versions.
 
 ```yml
-node_version: ['14.17.0', '16.13.0']
+node-version: ['14.17.0', '16.13.0']
 ```
 
 The `dev.yml` file which creates a local development environment. This should match the `.nvmrc` file.

polaris-migrator/plopfile.mjs

@@ -1,6 +1,6 @@
-import * as fs from 'node:fs';
-import * as url from 'node:url';
-import * as path from 'node:path';
+import * as fs from 'fs';
+import * as url from 'url';
+import * as path from 'path';
 
 import {plopDir} from 'plop-dir';
 

polaris-migrator/rollup.config.mjs

@@ -1,6 +1,6 @@
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as url from 'node:url';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as url from 'url';
 
 import {babel} from '@rollup/plugin-babel';
 import {nodeResolve} from '@rollup/plugin-node-resolve';

polaris-migrator/src/migrate.ts

@@ -1,5 +1,5 @@
-import fs from 'node:fs';
-import path from 'node:path';
+import fs from 'fs';
+import path from 'path';
 
 // @ts-expect-error TS can't resolve the type of this import
 import * as jscodeshift from 'jscodeshift/src/Runner';

polaris-migrator/src/migrations/replace-border-declarations/replace-border-declarations.ts

@@ -98,7 +98,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
             node.value = `var(${borderWidthLengthMap[valueInPx]})`;
 
-            targets.at(-1)!.replaced = true;
+            targets[targets.length - 1]!.replaced = true;
 
             return;
           }
@@ -125,7 +125,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
                 },
               ];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
             }
 
             if (isSassFunction(namespacedBorder, node)) {
@@ -151,7 +151,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
                 },
               ];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
             }
 
             if (isSassFunction(namespacedBorderWidth, node)) {
@@ -177,7 +177,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
                 },
               ];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
             }
 
             return StopWalkingFunctionNodes;
@@ -206,7 +206,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
             node.value = `var(${borderRadiusLengthMap[valueInPx]})`;
 
-            targets.at(-1)!.replaced = true;
+            targets[targets.length - 1]!.replaced = true;
 
             return;
           }
@@ -233,7 +233,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
                 },
               ];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
             }
 
             if (isSassFunction(namespacedBorderRadius, node)) {
@@ -259,7 +259,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
                 },
               ];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
             }
 
             return StopWalkingFunctionNodes;

polaris-migrator/src/migrations/replace-spacing-lengths/replace-spacing-lengths.ts

@@ -87,7 +87,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
             if (!isKeyOf(spaceMap, valueInPx)) return;
 
-            targets.at(-1)!.replaced = true;
+            targets[targets.length - 1]!.replaced = true;
 
             node.value = `var(${spaceMap[valueInPx]})`;
             return;
@@ -105,7 +105,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
               if (!isKeyOf(spaceMap, valueInPx)) return;
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
 
               node.value = 'var';
               node.nodes = [

polaris-migrator/src/migrations/replace-typography-declarations/replace-typography-declarations.ts

@@ -106,7 +106,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
               const fontFamilyCustomProperty = fontFamilyMap[family];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
 
               node.value = 'var';
               node.nodes = [
@@ -146,7 +146,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
             if (!isKeyOf(fontSizeMap, fontSizeInPx)) return;
 
-            targets.at(-1)!.replaced = true;
+            targets[targets.length - 1]!.replaced = true;
 
             node.value = `var(${fontSizeMap[fontSizeInPx]})`;
             return;
@@ -173,7 +173,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
               const fontSizeVariant = fontSizeStyle[variantArg];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
 
               if (fontSizeVariant.startsWith('--')) {
                 node.value = 'var';
@@ -203,7 +203,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
               if (!isKeyOf(fontSizeMap, fontSizeInPx)) return;
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
 
               node.value = 'var';
               node.nodes = [
@@ -239,7 +239,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
             if (!isKeyOf(fontWeightMap, fontWeight)) return;
 
-            targets.at(-1)!.replaced = true;
+            targets[targets.length - 1]!.replaced = true;
 
             node.value = `var(${fontWeightMap[fontWeight]})`;
           }
@@ -262,7 +262,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
             if (!isKeyOf(fontLineHeightMap, lineHeighInPx)) return;
 
-            targets.at(-1)!.replaced = true;
+            targets[targets.length - 1]!.replaced = true;
 
             node.value = `var(${fontLineHeightMap[lineHeighInPx]})`;
 
@@ -290,7 +290,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
               const lineHeightVariant = lineHeightStyle[variantArg];
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
 
               if (lineHeightVariant.startsWith('--')) {
                 node.value = 'var';
@@ -320,7 +320,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
               if (!isKeyOf(fontLineHeightMap, lineHeightInPx)) return;
 
-              targets.at(-1)!.replaced = true;
+              targets[targets.length - 1]!.replaced = true;
 
               node.value = 'var';
               node.nodes = [

polaris-migrator/src/utilities/testUtils.ts

@@ -1,6 +1,6 @@
 /* eslint-disable jest/no-export, jest/valid-title, @typescript-eslint/no-var-requires */
-import fs from 'node:fs';
-import path from 'node:path';
+import fs from 'fs';
+import path from 'path';
 
 import prettier from 'prettier';
 

polaris.shopify.com/package.json

@@ -59,6 +59,7 @@
     "js-yaml": "^4.1.0",
     "lodash.set": "^4.3.2",
     "playroom": "^0.28.0",
+    "p-map": "^5.5.0",
     "marked": "^4.0.16",
     "puppeteer": "^16.0.0",
     "style-loader": "^3.3.1",

polaris.shopify.com/playroom.config.js

@@ -3,7 +3,7 @@
 // So we need to build into that public asset folder. Hence no dev mode and HMR
 // Workaround: restart the next dev server after each change to the playroom config and associated files.
 
-const path = require('node:path');
+const path = require('path');
 const {breakpoints, toPx} = require('@shopify/polaris-tokens');
 const {playroom} = require('./constants');