Update SCSS files to use @use and @forward instead of @import (#4553)

daledupreez · web-flow · commit 17a8e9d99c20 · 2025-08-05T11:45:25.000+02:00
* Ignore SASS warnings from dependencies; switch from @import to @use * Update two unprefixed variables in mixins * Changelog * Document early return for test.scss check
diff --git a/changelog.txt b/changelog.txt
@@ -27,6 +27,7 @@
 * Dev - Move some testing and compiler node dependencies to devDependencies
 * Dev - Minor CSS change to comply with a SASS rule deprecation
 * Dev - Remove LPM feature flags
+* Dev - Update SCSS to replace @import with @use and @forward
 
 = 9.7.1 - 2025-07-28 =
 * Add - Add state mapping for Lithuania in express checkout
diff --git a/client/components/chip/styles.scss b/client/components/chip/styles.scss
@@ -1,4 +1,4 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .wcstripe-chip {
 	font-size: 12px;
@@ -14,38 +14,38 @@
 	gap: 2px;
 
 	&.wc-stripe-chip-gray {
-		background: $wp-gray-0;
-		color: $wp-gray-80;
+		background: styles.$wp-gray-0;
+		color: styles.$wp-gray-80;
 		svg {
-			fill: $wp-gray-80;
+			fill: styles.$wp-gray-80;
 		}
 	}
 	&.wc-stripe-chip-green {
-		background: $wp-green-0;
-		color: $wp-green-70;
+		background: styles.$wp-green-0;
+		color: styles.$wp-green-70;
 		svg {
-			fill: $wp-green-70;
+			fill: styles.$wp-green-70;
 		}
 	}
 	&.wc-stripe-chip-blue {
-		background: $wp-blue-0;
-		color: $wp-blue-70;
+		background: styles.$wp-blue-0;
+		color: styles.$wp-blue-70;
 		svg {
-			fill: $wp-blue-70;
+			fill: styles.$wp-blue-70;
 		}
 	}
 	&.wc-stripe-chip-red {
-		background: $wp-red-0;
-		color: $wp-red-70;
+		background: styles.$wp-red-0;
+		color: styles.$wp-red-70;
 		svg {
-			fill: $wp-red-70;
+			fill: styles.$wp-red-70;
 		}
 	}
 	&.wc-stripe-chip-yellow {
-		background: $wp-yellow-0;
-		color: $wp-yellow-70;
+		background: styles.$wp-yellow-0;
+		color: styles.$wp-yellow-70;
 		svg {
-			fill: $wp-yellow-70;
+			fill: styles.$wp-yellow-70;
 		}
 	}
 }
diff --git a/client/components/confirmation-modal/style.scss b/client/components/confirmation-modal/style.scss
@@ -1,4 +1,4 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .wcstripe-confirmation-modal {
 	// increasing the specificity of the styles, to ensure it is honored
@@ -11,7 +11,7 @@
 
 	// to ensure that the separator extends all the way, even with different versions of Gutenberg
 	.components-modal__content {
-		padding: 0 $grid-unit-30 $grid-unit-30;
+		padding: 0 styles.$grid-unit-30 styles.$grid-unit-30;
 
 		@media ( max-width: 599px ) {
 			display: flex;
@@ -24,7 +24,7 @@
 	}
 
 	.components-modal__header {
-		padding: 0 $grid-unit-30;
+		padding: 0 styles.$grid-unit-30;
 		@media ( max-width: 599px ) {
 			button {
 				display: none;
@@ -33,7 +33,7 @@
 	}
 
 	&__separator {
-		margin: $grid-unit-30 -#{$grid-unit-30};
+		margin: styles.$grid-unit-30 -#{styles.$grid-unit-30};
 	}
 
 	&__footer {
@@ -42,7 +42,7 @@
 
 		> * {
 			&:not( :first-child ) {
-				margin-left: $grid-unit-20;
+				margin-left: styles.$grid-unit-20;
 			}
 		}
 	}
diff --git a/client/components/inline-notice/style.scss b/client/components/inline-notice/style.scss
@@ -1,10 +1,10 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .wcstripe-inline-notice {
 	// increasing the specificity of the styles to override the Gutenberg ones
 	&#{&} {
 		margin: 0;
-		margin-bottom: $grid-unit-20;
+		margin-bottom: styles.$grid-unit-20;
 		border-left: 0;
 		padding: 12px;
 
@@ -13,19 +13,19 @@
 		}
 		&.is-dismissible {
 			padding-right: 12px;
-			gap: $grid-unit-20;
+			gap: styles.$grid-unit-20;
 		}
 		&.is-info {
-			background: $wp-blue-0;
+			background: styles.$wp-blue-0;
 		}
 		&.is-error {
-			background: $wp-red-0;
+			background: styles.$wp-red-0;
 		}
 		&.is-warning {
-			background: $wp-yellow-0;
+			background: styles.$wp-yellow-0;
 		}
 		&.is-success {
-			background: $wp-green-0;
+			background: styles.$wp-green-0;
 		}
 	}
 }
diff --git a/client/components/loadable/style.scss b/client/components/loadable/style.scss
@@ -1,8 +1,8 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .is-loadable-placeholder {
 	animation: loading-fade 1.6s ease-in-out infinite;
-	background-color: $light-gray-500;
+	background-color: styles.$light-gray-500;
 	color: transparent;
 	display: inline-block;
 
diff --git a/client/components/tooltip/style.scss b/client/components/tooltip/style.scss
@@ -1,4 +1,4 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .wcstripe-tooltip {
 	&__content-wrapper {
@@ -30,8 +30,8 @@
 	&__tooltip {
 		position: relative;
 
-		color: $white;
-		background-color: $gray-900;
+		color: styles.$white;
+		background-color: styles.$gray-900;
 		padding: 10px;
 		text-align: center;
 		text-wrap: balance;
@@ -46,7 +46,7 @@
 			left: 50%;
 			transform: translate(-50%, 22px);
 			border: solid 15px transparent;
-			border-top-color: $gray-900;
+			border-top-color: styles.$gray-900;
 		}
 
 		&-left-top {
diff --git a/client/entrypoints/payment-request-settings/style.scss b/client/entrypoints/payment-request-settings/style.scss
@@ -1,16 +1,16 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .payment-method-settings {
 	&__breadcrumbs {
 		margin-bottom: 40px;
 	}
 
 	&__option-muted-text {
-		color: #757575;
+		color: styles.$gray-700;
 	}
 
 	&__option-help-text {
-		color: #757575;
+		color: styles.$gray-700;
 		padding-left: 30px;
 
 		@media ( min-width: 600px ) {
@@ -26,10 +26,10 @@
 	}
 
 	&__preview {
-		border: 1px dashed #ddd;
+		border: 1px dashed styles.$gray-300;
 		box-sizing: border-box;
 		border-radius: 3px;
-		background-color: #f0f0f0;
+		background-color: styles.$gray-100;
 		padding: 16px;
 	}
 
@@ -52,7 +52,7 @@
 	.components-card-body {
 		padding: calc(16px) calc(24px);
 
-		@include breakpoint( '>660px' ) {
+		@include styles.breakpoint( '>660px' ) {
 			padding: 24px 24px 24px 24px;
 		}
 	}
@@ -62,10 +62,10 @@
 		display: none;
 		height: 40px;
 		margin: 1px 17px 1px 1px; // 1px to accommodate for box-shadow
-		box-shadow: 0 0 0 1px #ddd;
-		background: #fff;
+		box-shadow: 0 0 0 1px styles.$gray-300;
+		background: styles.$white;
 
-		@include breakpoint( '>660px' ) {
+		@include styles.breakpoint( '>660px' ) {
 			display: inline-block;
 		}
 	}
diff --git a/client/settings/general-settings-section/styles.scss b/client/settings/general-settings-section/styles.scss
@@ -1,11 +1,11 @@
-@import '../../styles/abstracts/breakpoints';
+@use '../../styles/abstracts/breakpoints';
 
 .payment-methods {
 	&__unavailable-methods {
 		display: none;
 		margin: 0 0 0 1.5rem;
 
-		@include breakpoint( '>660px' ) {
+		@include breakpoints.breakpoint( '>660px' ) {
 			display: flex;
 		}
 	}
diff --git a/client/settings/payment-method-icon/style.scss b/client/settings/payment-method-icon/style.scss
@@ -1,12 +1,12 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .woocommerce-gateway-stripe__payment-method-icon {
 	display: inline-flex;
 	align-items: center;
 	vertical-align: middle;
 	max-width: 160px;
 
-	@include breakpoint( '>660px' ) {
+	@include styles.breakpoint( '>660px' ) {
 		max-width: inherit;
 	}
 
diff --git a/client/settings/payment-request-section/styles.scss b/client/settings/payment-request-section/styles.scss
@@ -1,4 +1,4 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .express-checkouts {
 	.express-checkouts-list {
@@ -10,7 +10,7 @@
 			justify-content: flex-start;
 			align-items: center;
 
-			@include breakpoint( '>660px' ) {
+			@include styles.breakpoint( '>660px' ) {
 				padding: 24px 24px 24px 24px;
 				flex-wrap: nowrap;
 			}
@@ -35,9 +35,9 @@
 				flex: 0 0 63.69px;
 				height: 40px;
 				margin: 1px 17px 1px 1px; // 1px to accommodate for box-shadow
-				box-shadow: 0 0 0 1px #ddd;
+				box-shadow: 0 0 0 1px styles.$gray-300;
 
-				@include breakpoint( '>660px' ) {
+				@include styles.breakpoint( '>660px' ) {
 					display: flex;
 				}
 			}
@@ -47,7 +47,7 @@
 				font-size: 14px;
 				font-weight: 600;
 				line-height: 20px;
-				color: $gray-900;
+				color: styles.$gray-900;
 				margin-bottom: 4px;
 			}
 
diff --git a/client/settings/payment-settings/style.scss b/client/settings/payment-settings/style.scss
@@ -1,8 +1,8 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .wcstripe-modal-button-group-container {
 	display: flex;
-	gap: $grid-unit-20;
+	gap: styles.$grid-unit-20;
 }
 
 .account-details {
@@ -56,5 +56,5 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: $grid-unit-20;
+	gap: styles.$grid-unit-20;
 }
diff --git a/client/settings/stripe-auth-account/styles.scss b/client/settings/stripe-auth-account/styles.scss
@@ -1,4 +1,4 @@
-@import '../../styles/abstracts/styles.scss';
+@use '../../styles/abstracts/styles';
 
 .woocommerce-stripe-auth {
 	> p {
@@ -9,12 +9,12 @@
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
-		gap: $grid-unit-20;
-		margin: $grid-unit-40 0;
+		gap: styles.$grid-unit-20;
+		margin: styles.$grid-unit-40 0;
 
 		&__dotted-line {
 			position: relative;
-			border-top: 1px dashed $gray-600;
+			border-top: 1px dashed styles.$gray-600;
 			margin: 1px;
 			width: 50px;
 
@@ -25,7 +25,7 @@
 				top: -2.5px;
 				width: 4px;
 				height: 4px;
-				background-color: $gray-600;
+				background-color: styles.$gray-600;
 				border-radius: 50%;
 			}
 			&::before {
@@ -39,27 +39,27 @@
 			border-radius: 6px;
 		}
 		.woocommerce-stripe-woo-white-logo {
-			background-color: $studio-woocommerce-purple;
+			background-color: styles.$studio-woocommerce-purple;
 			padding: 5px;
 		}
 	}
 	&__actions {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: $grid-unit-20;
+		gap: styles.$grid-unit-20;
 	}
 	&__status-panel {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: $grid-unit-20;
+		gap: styles.$grid-unit-20;
 
 		.wcstripe-status {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
-			gap: $grid-unit;
+			gap: styles.$grid-unit;
 		}
 		.wcstripe-status-text {
 			font-size: 11px;
@@ -68,8 +68,8 @@
 		}
 	}
 	&__help {
-		color: $gray-700;
-		font-size: $helptext-font-size;
+		color: styles.$gray-700;
+		font-size: styles.$helptext-font-size;
 		font-style: normal;
 	}
 }
diff --git a/client/styles/abstracts/_colors.scss b/client/styles/abstracts/_colors.scss
diff --git a/client/styles/abstracts/_mixins.scss b/client/styles/abstracts/_mixins.scss
diff --git a/client/styles/abstracts/styles.scss b/client/styles/abstracts/styles.scss
diff --git a/readme.txt b/readme.txt
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../styles/abstracts/styles.scss';`
	`1`	`+@use '../../styles/abstracts/styles';`
`2`	`2`
`3`	`3`	`.wcstripe-chip {`
`4`	`4`	`font-size: 12px;`
`@@ -14,38 +14,38 @@`
`14`	`14`	`gap: 2px;`
`15`	`15`
`16`	`16`	`&.wc-stripe-chip-gray {`
`17`		`- background: $wp-gray-0;`
`18`		`- color: $wp-gray-80;`
	`17`	`+ background: styles.$wp-gray-0;`
	`18`	`+ color: styles.$wp-gray-80;`
`19`	`19`	`svg {`
`20`		`- fill: $wp-gray-80;`
	`20`	`+ fill: styles.$wp-gray-80;`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`	`&.wc-stripe-chip-green {`
`24`		`- background: $wp-green-0;`
`25`		`- color: $wp-green-70;`
	`24`	`+ background: styles.$wp-green-0;`
	`25`	`+ color: styles.$wp-green-70;`
`26`	`26`	`svg {`
`27`		`- fill: $wp-green-70;`
	`27`	`+ fill: styles.$wp-green-70;`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`	`&.wc-stripe-chip-blue {`
`31`		`- background: $wp-blue-0;`
`32`		`- color: $wp-blue-70;`
	`31`	`+ background: styles.$wp-blue-0;`
	`32`	`+ color: styles.$wp-blue-70;`
`33`	`33`	`svg {`
`34`		`- fill: $wp-blue-70;`
	`34`	`+ fill: styles.$wp-blue-70;`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`	`&.wc-stripe-chip-red {`
`38`		`- background: $wp-red-0;`
`39`		`- color: $wp-red-70;`
	`38`	`+ background: styles.$wp-red-0;`
	`39`	`+ color: styles.$wp-red-70;`
`40`	`40`	`svg {`
`41`		`- fill: $wp-red-70;`
	`41`	`+ fill: styles.$wp-red-70;`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`	`&.wc-stripe-chip-yellow {`
`45`		`- background: $wp-yellow-0;`
`46`		`- color: $wp-yellow-70;`
	`45`	`+ background: styles.$wp-yellow-0;`
	`46`	`+ color: styles.$wp-yellow-70;`
`47`	`47`	`svg {`
`48`		`- fill: $wp-yellow-70;`
	`48`	`+ fill: styles.$wp-yellow-70;`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`		`-@import '../../styles/abstracts/styles.scss';`
	`1`	`+@use '../../styles/abstracts/styles';`
`2`	`2`
`3`	`3`	`.wcstripe-inline-notice {`
`4`	`4`	`// increasing the specificity of the styles to override the Gutenberg ones`
`5`	`5`	`&#{&} {`
`6`	`6`	`margin: 0;`
`7`		`- margin-bottom: $grid-unit-20;`
	`7`	`+ margin-bottom: styles.$grid-unit-20;`
`8`	`8`	`border-left: 0;`
`9`	`9`	`padding: 12px;`
`10`	`10`
`@@ -13,19 +13,19 @@`
`13`	`13`	`}`
`14`	`14`	`&.is-dismissible {`
`15`	`15`	`padding-right: 12px;`
`16`		`- gap: $grid-unit-20;`
	`16`	`+ gap: styles.$grid-unit-20;`
`17`	`17`	`}`
`18`	`18`	`&.is-info {`
`19`		`- background: $wp-blue-0;`
	`19`	`+ background: styles.$wp-blue-0;`
`20`	`20`	`}`
`21`	`21`	`&.is-error {`
`22`		`- background: $wp-red-0;`
	`22`	`+ background: styles.$wp-red-0;`
`23`	`23`	`}`
`24`	`24`	`&.is-warning {`
`25`		`- background: $wp-yellow-0;`
	`25`	`+ background: styles.$wp-yellow-0;`
`26`	`26`	`}`
`27`	`27`	`&.is-success {`
`28`		`- background: $wp-green-0;`
	`28`	`+ background: styles.$wp-green-0;`
`29`	`29`	`}`
`30`	`30`	`}`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`		`-@import '../../styles/abstracts/breakpoints';`
	`1`	`+@use '../../styles/abstracts/breakpoints';`
`2`	`2`
`3`	`3`	`.payment-methods {`
`4`	`4`	`&__unavailable-methods {`
`5`	`5`	`display: none;`
`6`	`6`	`margin: 0 0 0 1.5rem;`
`7`	`7`
`8`		`- @include breakpoint( '>660px' ) {`
	`8`	`+ @include breakpoints.breakpoint( '>660px' ) {`
`9`	`9`	`display: flex;`
`10`	`10`	`}`
`11`	`11`	`}`