From 77906db0ff846a5c7f2497294ff519ca773435ee Mon Sep 17 00:00:00 2001
From: Sam Seay <samueljseay@gmail.com>
Date: Thu, 10 Jun 2021 21:09:27 +1200
Subject: [PATCH] Use sass-migrator to migrate division to math.div
 (https://github.com/woocommerce/woocommerce-admin/pull/7136)

---
 .../woocommerce-admin/bin/packages/build.js   |  4 +-
 .../settings/historical-data/style.scss       |  4 +-
 .../client/dashboard/style.scss               |  2 +-
 .../activity-panel/activity-header/style.scss |  4 +-
 .../homescreen/activity-panel/style.scss      |  2 +-
 .../client/stylesheets/abstracts/_mixins.scss |  6 +--
 plugins/woocommerce-admin/package-lock.json   | 44 +++++++++++++++++++
 .../packages/components/src/chart/style.scss  |  2 +-
 .../components/src/pagination/style.scss      |  8 ++--
 .../src/search-list-control/style.scss        |  2 +-
 .../components/src/stepper/style.scss         |  4 +-
 plugins/woocommerce-admin/webpack.config.js   |  1 +
 12 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/plugins/woocommerce-admin/bin/packages/build.js b/plugins/woocommerce-admin/bin/packages/build.js
index 40d5495a89a..37b0debfa16 100755
--- a/plugins/woocommerce-admin/bin/packages/build.js
+++ b/plugins/woocommerce-admin/bin/packages/build.js
@@ -139,9 +139,11 @@ async function buildScssFile( styleFile ) {
 			path.resolve( __dirname, '../../node_modules' ),
 		],
 		data:
+			'@forward "sass:math"; @use "sass:math";' +
 			[ 'colors', 'variables', 'breakpoints', 'mixins' ]
 				.map( ( imported ) => `@import "_${ imported }";` )
-				.join( ' ' ) + fs.readFileSync( styleFile, 'utf8' ),
+				.join( ' ' ) +
+			fs.readFileSync( styleFile, 'utf8' ),
 	} );
 
 	const postCSSConfig = require( '@wordpress/postcss-plugins-preset' );
diff --git a/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss b/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss
index 97b574730de..b469c228fb3 100644
--- a/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss
+++ b/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss
@@ -1,9 +1,7 @@
-
-
 .woocommerce-settings-historical-data__columns {
 	display: grid;
 	grid-column-gap: $gap-large;
-	grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
+	grid-template-columns: calc(50% - #{math.div($gap-large, 2)}) calc(50% - #{math.div($gap-large, 2)});
 
 	.woocommerce-settings-historical-data__column {
 		align-self: end;
diff --git a/plugins/woocommerce-admin/client/dashboard/style.scss b/plugins/woocommerce-admin/client/dashboard/style.scss
index 213f280f717..5d074661f94 100644
--- a/plugins/woocommerce-admin/client/dashboard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/style.scss
@@ -5,7 +5,7 @@
 
 .woocommerce-dashboard__columns {
 	display: grid;
-	grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
+	grid-template-columns: calc(50% - #{math.div($gap-large, 2)}) calc(50% - #{math.div($gap-large, 2)});
 	grid-column-gap: $gap-large;
 
 	// Auto-position fix for IE11.
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
index c109187edbd..3a5e5e0c680 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
@@ -37,10 +37,10 @@
 }
 
 .woocommerce-layout__inbox-badge {
-	margin-left: $gap-small / 2;
+	margin-left: math.div($gap-small, 2);
 	background-color: $gray-700;
 	border-radius: 13px;
-	padding: 0 $gap-small / 2;
+	padding: 0 math.div($gap-small, 2);
 	color: $white;
 	display: inline-block;
 	text-align: center;
diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/style.scss b/plugins/woocommerce-admin/client/homescreen/activity-panel/style.scss
index 76d2304bac6..8bd0c317c28 100644
--- a/plugins/woocommerce-admin/client/homescreen/activity-panel/style.scss
+++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/style.scss
@@ -43,7 +43,7 @@
 	}
 
 	.woocommerce-activity-card {
-		padding: $gap-largest/2 $gutter $gutter;
+		padding: math.div($gap-largest, 2) $gutter $gutter;
 
 		&:not(:last-of-type) {
 			border-bottom: 1px solid $gray-200;
diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
index 80f93c65271..f30bc93d958 100644
--- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
@@ -1,7 +1,7 @@
 // Rem output with px fallback
 @mixin font-size( $sizeValue: 16, $lineHeight: false ) {
 	font-size: $sizeValue + px;
-	font-size: ( $sizeValue / 16 ) + rem;
+	font-size: math.div($sizeValue, 16) + rem;
 	@if ( $lineHeight ) {
 		line-height: $lineHeight;
 	}
@@ -168,8 +168,8 @@
 		&:nth-child(#{$i}) {
 			grid-column-start: #{($i - 1) % $wrap-after + 1};
 			grid-column-end: #{($i - 1) % $wrap-after + 2};
-			grid-row-start: #{floor(( $i - 1 ) / $wrap-after) + 1};
-			grid-row-end: #{floor(( $i - 1 ) / $wrap-after) + 2};
+			grid-row-start: #{floor(math.div($i - 1, $wrap-after)) + 1};
+			grid-row-end: #{floor(math.div($i - 1, $wrap-after)) + 2};
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/package-lock.json b/plugins/woocommerce-admin/package-lock.json
index 78ec193de4b..66176d0b270 100644
--- a/plugins/woocommerce-admin/package-lock.json
+++ b/plugins/woocommerce-admin/package-lock.json
@@ -9681,6 +9681,7 @@
 				"@wordpress/components": "10.2.0",
 				"@wordpress/compose": "3.23.1",
 				"@wordpress/date": "3.13.0",
+				"@wordpress/deprecated": "^3.1.1",
 				"@wordpress/dom": "2.16.0",
 				"@wordpress/element": "2.19.0",
 				"@wordpress/html-entities": "2.10.0",
@@ -9781,6 +9782,18 @@
 						"rememo": "^3.0.0",
 						"tinycolor2": "^1.4.1",
 						"uuid": "^7.0.2"
+					},
+					"dependencies": {
+						"@wordpress/deprecated": {
+							"version": "2.12.3",
+							"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
+							"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
+							"dev": true,
+							"requires": {
+								"@babel/runtime": "^7.13.10",
+								"@wordpress/hooks": "^2.12.3"
+							}
+						}
 					}
 				},
 				"@wordpress/compose": {
@@ -9805,6 +9818,16 @@
 						"use-memo-one": "^1.1.1"
 					},
 					"dependencies": {
+						"@wordpress/deprecated": {
+							"version": "2.12.3",
+							"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
+							"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
+							"dev": true,
+							"requires": {
+								"@babel/runtime": "^7.13.10",
+								"@wordpress/hooks": "^2.12.3"
+							}
+						},
 						"@wordpress/is-shallow-equal": {
 							"version": "3.1.3",
 							"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-3.1.3.tgz",
@@ -9816,6 +9839,27 @@
 						}
 					}
 				},
+				"@wordpress/deprecated": {
+					"version": "3.1.1",
+					"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-3.1.1.tgz",
+					"integrity": "sha512-0hILlCNhf0DukFo3hMWybf9q507cxnIHhC1GQ1crZtTqzKS2QY2C1/77V4YGPdBShUj5j1dPriYCzfB5jFFgqQ==",
+					"dev": true,
+					"requires": {
+						"@babel/runtime": "^7.13.10",
+						"@wordpress/hooks": "^3.1.1"
+					},
+					"dependencies": {
+						"@wordpress/hooks": {
+							"version": "3.1.1",
+							"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.1.1.tgz",
+							"integrity": "sha512-9f6H9WBwu6x/MM4ZCVLGGBuMiBcyaLapmAku5IwcWaeB2PtPduwjmk2NfGx35TuhBQD554DUg8WtTjIS019UAg==",
+							"dev": true,
+							"requires": {
+								"@babel/runtime": "^7.13.10"
+							}
+						}
+					}
+				},
 				"@wordpress/hooks": {
 					"version": "2.12.3",
 					"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.12.3.tgz",
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/style.scss b/plugins/woocommerce-admin/packages/components/src/chart/style.scss
index eff07e3defe..f67eae47d82 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/style.scss
@@ -77,7 +77,7 @@
 		order: 1;
 		margin-top: -8px;
 		margin-left: 0;
-		padding-left: $gap / 2;
+		padding-left: math.div($gap, 2);
 		border-right: 0;
 		min-height: 0;
 	}
diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/style.scss b/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
index 3f66ca76638..deb55ded018 100644
--- a/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
@@ -54,8 +54,8 @@
 }
 
 .woocommerce-pagination__page-arrows-label {
-	margin-top: $spacing / 2;
-	margin-right: $spacing / 2;
+	margin-top: math.div($spacing, 2);
+	margin-right: math.div($spacing, 2);
 }
 
 .woocommerce-pagination__page-picker {
@@ -66,7 +66,7 @@
 		margin-left: 0;
 	}
 	.woocommerce-pagination__page-picker-input {
-		margin-left: $spacing / 2;
+		margin-left: math.div($spacing, 2);
 		width: 60px;
 		height: 34px;
 		box-shadow: none;
@@ -98,7 +98,7 @@
 		}
 
 		.components-base-control__label {
-			margin-right: $spacing / 2;
+			margin-right: math.div($spacing, 2);
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
index 94b26492357..ff285096b0b 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
@@ -191,7 +191,7 @@
 
 		.woocommerce-search-list__item-count {
 			flex: 0 1 auto;
-			padding: $gap-smallest/2 $gap-smaller;
+			padding: math.div($gap-smallest, 2) $gap-smaller;
 			border: 1px solid $gray-100;
 			border-radius: 12px;
 			font-size: 0.8em;
diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/style.scss b/plugins/woocommerce-admin/packages/components/src/stepper/style.scss
index 4b70c83807d..38c8af2fb30 100644
--- a/plugins/woocommerce-admin/packages/components/src/stepper/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/stepper/style.scss
@@ -115,7 +115,7 @@
 		align-self: flex-start;
 		flex-grow: 1;
 		border-bottom: 1px solid $gray-100;
-		margin-top: $step-icon-size / 2 + $gap-smaller;
+		margin-top: math.div($step-icon-size, 2) + $gap-smaller;
 
 		&:last-child {
 			display: none;
@@ -146,7 +146,7 @@
 		.woocommerce-stepper__step::after {
 			content: '';
 			position: absolute;
-			left: $step-icon-size / 2 + $gap-smaller;
+			left: math.div($step-icon-size, 2) + $gap-smaller;
 			top: $step-icon-size + ( $gap-smaller * 2 );
 			height: calc(100% - #{$step-icon-size} - #{$gap-smaller * 2});
 			border-left: 1px solid $gray-100;
diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js
index a1fd3e814c8..c6ebf492b23 100644
--- a/plugins/woocommerce-admin/webpack.config.js
+++ b/plugins/woocommerce-admin/webpack.config.js
@@ -143,6 +143,7 @@ const webpackConfig = {
 							},
 							webpackImporter: true,
 							additionalData:
+								'@use "sass:math";' +
 								'@import "_colors"; ' +
 								'@import "_variables"; ' +
 								'@import "_breakpoints"; ' +