From 06bd80eb85aef37e4ced618254fe9a789fa19c46 Mon Sep 17 00:00:00 2001 From: Jan Jakes Date: Wed, 20 Jul 2022 09:45:06 +0200 Subject: [PATCH] Use pnpm patch for @woocommerce/components CSS fix The style.css of @woocommerce/components contains invalid CSS strings like "(1fr)[2]" that are not parseable by SASS. This patch fixes them to "1fr [2]" format. [MAILPOET-4485] --- docker-compose.yml | 1 + mailpoet/tasks/npm_post_install.sh | 3 - package.json | 5 ++ patches/@woocommerce__components@10.0.0.patch | 76 +++++++++++++++++++ pnpm-lock.yaml | 10 ++- 5 files changed, 90 insertions(+), 5 deletions(-) create mode 100644 patches/@woocommerce__components@10.0.0.patch diff --git a/docker-compose.yml b/docker-compose.yml index c655660260..c55890a5e8 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -53,6 +53,7 @@ services: - './package.json:/var/www/html/wp-content/plugins/package.json' - './pnpm-lock.yaml:/var/www/html/wp-content/plugins/pnpm-lock.yaml' - './pnpm-workspace.yaml:/var/www/html/wp-content/plugins/pnpm-workspace.yaml' + - './patches:/var/www/html/wp-content/plugins/patches' - './mailpoet:/var/www/html/wp-content/plugins/mailpoet' - './mailpoet-premium:/var/www/html/wp-content/plugins/mailpoet-premium' - './packages:/var/www/html/wp-content/plugins/packages' diff --git a/mailpoet/tasks/npm_post_install.sh b/mailpoet/tasks/npm_post_install.sh index 183420fc67..0e7abb0d02 100755 --- a/mailpoet/tasks/npm_post_install.sh +++ b/mailpoet/tasks/npm_post_install.sh @@ -20,6 +20,3 @@ sed -i -- "s/_focusedField\.focus()/_focusedField\.trigger('focus')/g" node_modu # Fix strict mode issues in Backbone.Supermodel sed -i -- "s/ lastKeyIndex = keyPath.length-1;/ var lastKeyIndex = keyPath.length-1;/g" node_modules/backbone.supermodel/build/backbone.supermodel.js sed -i -- "s/ key = keyPath\[i\];/ var key = keyPath\[i\];/g" node_modules/backbone.supermodel/build/backbone.supermodel.js - -# Fix @woocommerce/components having invalid CSS not parseable by SASS -sed -i -- "s/[(]1fr[)]/1fr /g" node_modules/@woocommerce/components/build-style/style.css diff --git a/package.json b/package.json index 1d795e14e6..a94892ffbc 100644 --- a/package.json +++ b/package.json @@ -10,5 +10,10 @@ "packageManager": "pnpm@7.6.0", "volta": { "node": "17.9.1" + }, + "pnpm": { + "patchedDependencies": { + "@woocommerce/components@10.0.0": "patches/@woocommerce__components@10.0.0.patch" + } } } diff --git a/patches/@woocommerce__components@10.0.0.patch b/patches/@woocommerce__components@10.0.0.patch new file mode 100644 index 0000000000..a359dbcaec --- /dev/null +++ b/patches/@woocommerce__components@10.0.0.patch @@ -0,0 +1,76 @@ +diff --git a/build-style/style.css b/build-style/style.css +index b7f1a3fa68dd147c6b3911b584012d7df092bc09..e1372fe5f579de516e4babd5c1c7e21beacbc27a 100644 +--- a/build-style/style.css ++++ b/build-style/style.css +@@ -2760,7 +2760,7 @@ a.woocommerce-list__item { + grid-template-columns: 1fr; + } + .woocommerce-summary.has-2-items { +- -ms-grid-columns: (1fr)[2]; ++ -ms-grid-columns: 1fr [2]; + grid-template-columns: repeat(2, 1fr); + } + .woocommerce-summary.has-2-items .woocommerce-summary__item-container:nth-of-type(2n) .woocommerce-summary__item { +@@ -2772,7 +2772,7 @@ a.woocommerce-list__item { + border-bottom-color: #e0e0e0; + } + .woocommerce-summary.has-3-items { +- -ms-grid-columns: (1fr)[3]; ++ -ms-grid-columns: 1fr [3]; + grid-template-columns: repeat(3, 1fr); + } + .woocommerce-summary.has-3-items .woocommerce-summary__item-container:nth-of-type(3n) .woocommerce-summary__item { +@@ -2784,7 +2784,7 @@ a.woocommerce-list__item { + border-bottom-color: #e0e0e0; + } + .woocommerce-summary.has-4-items, .woocommerce-summary.has-7-items, .woocommerce-summary.has-8-items { +- -ms-grid-columns: (1fr)[4]; ++ -ms-grid-columns: 1fr [4]; + grid-template-columns: repeat(4, 1fr); + } + .woocommerce-summary.has-4-items .woocommerce-summary__item-container:nth-of-type(4n) .woocommerce-summary__item, .woocommerce-summary.has-7-items .woocommerce-summary__item-container:nth-of-type(4n) .woocommerce-summary__item, .woocommerce-summary.has-8-items .woocommerce-summary__item-container:nth-of-type(4n) .woocommerce-summary__item { +@@ -2800,7 +2800,7 @@ a.woocommerce-list__item { + border-bottom-color: #e0e0e0; + } + .woocommerce-summary.has-5-items { +- -ms-grid-columns: (1fr)[5]; ++ -ms-grid-columns: 1fr [5]; + grid-template-columns: repeat(5, 1fr); + } + .woocommerce-summary.has-5-items .woocommerce-summary__item-container:nth-of-type(5n) .woocommerce-summary__item { +@@ -2816,7 +2816,7 @@ a.woocommerce-list__item { + } + @media (min-width: 1441px) { + .woocommerce-summary.has-6-items { +- -ms-grid-columns: (1fr)[6]; ++ -ms-grid-columns: 1fr [6]; + grid-template-columns: repeat(6, 1fr); + } + .woocommerce-summary.has-6-items .woocommerce-summary__item-container:nth-of-type(6n) .woocommerce-summary__item { +@@ -2831,7 +2831,7 @@ a.woocommerce-list__item { + margin-right: calc(100% - 80px); + } + .woocommerce-summary.has-9-items, .woocommerce-summary.has-10-items { +- -ms-grid-columns: (1fr)[5]; ++ -ms-grid-columns: 1fr [5]; + grid-template-columns: repeat(5, 1fr); + } + .woocommerce-summary.has-9-items .woocommerce-summary__item-container:nth-of-type(5n) .woocommerce-summary__item, .woocommerce-summary.has-10-items .woocommerce-summary__item-container:nth-of-type(5n) .woocommerce-summary__item { +@@ -2853,7 +2853,7 @@ a.woocommerce-list__item { + margin-right: calc(100% - 80px); + } + .woocommerce-summary.has-6-items, .woocommerce-summary.has-9-items { +- -ms-grid-columns: (1fr)[3]; ++ -ms-grid-columns: 1fr [3]; + grid-template-columns: repeat(3, 1fr); + } + .woocommerce-summary.has-6-items .woocommerce-summary__item-container:nth-of-type(3n) .woocommerce-summary__item, .woocommerce-summary.has-9-items .woocommerce-summary__item-container:nth-of-type(3n) .woocommerce-summary__item { +@@ -2867,7 +2867,7 @@ a.woocommerce-list__item { + border-bottom-color: #e0e0e0; + } + .woocommerce-summary.has-10-items { +- -ms-grid-columns: (1fr)[4]; ++ -ms-grid-columns: 1fr [4]; + grid-template-columns: repeat(4, 1fr); + } + .woocommerce-summary.has-10-items .woocommerce-summary__item-container:nth-of-type(4n) .woocommerce-summary__item { \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 71ca34a7b7..bf8a7cab17 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,10 @@ lockfileVersion: 5.4 +patchedDependencies: + '@woocommerce/components@10.0.0': + hash: prtmohnt73dk73q3vnzuiaioji + path: patches/@woocommerce__components@10.0.0.patch + importers: .: @@ -192,7 +197,7 @@ importers: '@emotion/react': 11.8.2_yhhwp62ayfwdsajg6mapyglucm '@emotion/styled': 11.8.1_tynkqtbjedbrxh4wfjztxjncwq '@types/select2': 4.0.55 - '@woocommerce/components': 10.0.0_j4iraxlqgettcbpgjfq3wssi4m + '@woocommerce/components': 10.0.0_prtmohnt73dk73q3vnzuiaioji_j4iraxlqgettcbpgjfq3wssi4m '@wordpress/a11y': 3.8.0 '@wordpress/api-fetch': 6.6.0 '@wordpress/block-editor': 8.3.1_zlylvskpbsx6y7yplr6ejap2ga @@ -5454,7 +5459,7 @@ packages: react: 17.0.2 dev: true - /@woocommerce/components/10.0.0_j4iraxlqgettcbpgjfq3wssi4m: + /@woocommerce/components/10.0.0_prtmohnt73dk73q3vnzuiaioji_j4iraxlqgettcbpgjfq3wssi4m: resolution: {integrity: sha512-gal/58XaVSl6ZsfKmc2ZCf6Bd2+baP2GJClqWoqA7qUCWsPzY6xvWXykTKZW79qzfttKjL7Pt/FDU2LuiQp2Kg==} peerDependencies: '@wordpress/data': ^6.2.1 @@ -5509,6 +5514,7 @@ packages: - '@babel/core' - '@types/react' dev: false + patched: true /@woocommerce/csv-export/1.5.0: resolution: {integrity: sha512-VPzBcEEWkkHEg8r1McVkUtE6H+fbV10wFNn5NCA5PDbc4rmjqISYz7L7gBNAhCOq1RL8N9722ZceGCEJhifpYA==}