Components: Simplify RangeControl, Tabs, and BorderBoxControl styles

packages/components/CHANGELOG.md

@@ -67,6 +67,7 @@
 
 ### Internal
 
+-   `RangeControl`, `Tabs`, `BorderBoxControl`: Remove unused styles and simplify SCSS nesting while preserving specificity and rendered styles ([#85086](https://github.com/WordPress/gutenberg/pull/85086)).
 -   Remove obsolete JavaScript style configuration and unused style helpers ([#85038](https://github.com/WordPress/gutenberg/pull/85038)).
 -   Update Ariakit to 0.4.42 ([#85066](https://github.com/WordPress/gutenberg/pull/85066)).
 -   Update `@testing-library/user-event` to 14.6.8 for component tests ([#85068](https://github.com/WordPress/gutenberg/pull/85068)).

packages/components/src/border-box-control/style.module.scss

@@ -1,18 +1,14 @@
 @use "@wordpress/base-styles/variables" as *;
 
-.linked-border-control {
+.linked-border-control.linked-border-control {
 	/* Preserve the original `&&` specificity so this beats BorderControl's margin reset. */
-	&#{&} {
-		flex: 1;
-		margin-inline-end: 24px;
-	}
+	flex: 1;
+	margin-inline-end: 24px;
 }
 
 /* No inline-end gutter is needed when the toggle sits in the header row. */
-.linked-border-control-full-width {
-	&#{&} {
-		margin-inline-end: 0;
-	}
+.linked-border-control-full-width.linked-border-control-full-width {
+	margin-inline-end: 0;
 }
 
 /* The label row the linked/unlinked toggle joins when a visible label is
@@ -75,10 +71,8 @@
 	}
 }
 
-.right-border-control {
+.right-border-control.right-border-control {
 	/* Physical `margin: 0` and logical `margin-inline-start` cascade together,
 	   so this needs the same specificity boost as the centred control. */
-	&#{&} {
-		margin-inline-start: auto;
-	}
+	margin-inline-start: auto;
 }

packages/components/src/range-control/style.module.scss

@@ -265,11 +265,6 @@
 	:where(.root.is-rtl) & {
 		margin-right: $grid-unit-20 !important; /* stylelint-disable-line logical-css/require-logical-properties -- Match the locale-based isRTL() position calculations. */
 	}
-
-	@at-root input[type="number"]#{&} {
-		height: 30px;
-		min-height: 30px;
-	}
 }
 .action-right {
 	display: block;

packages/components/src/tabs/style.module.scss

@@ -101,76 +101,74 @@
 }
 
 .tab {
-	& {
-		/* Resets */
-		border-radius: 0;
-		background: transparent;
-		border: none;
-		box-shadow: none;
-
-		flex: 1 0 auto;
-		white-space: nowrap;
-		display: flex;
-		align-items: center;
-		/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Preserve the existing pointer cursor during the migration. */
-		cursor: pointer;
-		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
-		font-family: $font-family-body;
-		font-weight: 400;
-		font-size: $font-size-medium;
-		color: var(--wpds-color-foreground-interactive-neutral);
-
-		&:is([aria-selected="true"], [aria-disabled="true"]) {
-			cursor: default;
-		}
+	/* Resets */
+	border-radius: 0;
+	background: transparent;
+	border: none;
+	box-shadow: none;
+
+	flex: 1 0 auto;
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Preserve the existing pointer cursor during the migration. */
+	cursor: pointer;
+	line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
+	font-family: $font-family-body;
+	font-weight: 400;
+	font-size: $font-size-medium;
+	color: var(--wpds-color-foreground-interactive-neutral);
+
+	&:is([aria-selected="true"], [aria-disabled="true"]) {
+		cursor: default;
+	}
 
-		&[aria-disabled="true"] {
-			color: var(--wpds-color-foreground-interactive-neutral-disabled);
-		}
+	&[aria-disabled="true"] {
+		color: var(--wpds-color-foreground-interactive-neutral-disabled);
+	}
 
-		&:not([aria-disabled="true"]):is(
-			:not([aria-selected="true"]):hover,
-			:not([aria-selected="true"]):active,
-			[data-focus-visible]
-		) {
-			color: var(--wpds-color-foreground-interactive-neutral-active);
+	&:not([aria-disabled="true"]):is(
+		:not([aria-selected="true"]):hover,
+		:not([aria-selected="true"]):active,
+		[data-focus-visible]
+	) {
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 
-			&::after {
-				background-color: var(--wpds-color-background-interactive-neutral-weak-active);
-				opacity: 1;
-			}
+		&::after {
+			background-color: var(--wpds-color-background-interactive-neutral-weak-active);
+			opacity: 1;
 		}
+	}
 
-		&:focus:not(:disabled) {
-			box-shadow: none;
-			outline: none;
-		}
+	&:focus:not(:disabled) {
+		box-shadow: none;
+		outline: none;
+	}
 
-		// Interaction background and focus indicator.
-		position: relative;
-		isolation: isolate;
-		&::after {
-			position: absolute;
-			z-index: -1;
-			pointer-events: none;
+	// Interaction background and focus indicator.
+	position: relative;
+	isolation: isolate;
+	&::after {
+		position: absolute;
+		z-index: -1;
+		pointer-events: none;
 
-			// Draw the indicator.
-			// Outline works for Windows high contrast mode as well.
-			outline: var(--wp-admin-border-width-focus) solid transparent;
-			border-radius: $radius-small;
+		// Draw the indicator.
+		// Outline works for Windows high contrast mode as well.
+		outline: var(--wp-admin-border-width-focus) solid transparent;
+		border-radius: $radius-small;
 
-			// Animation
-			opacity: 0;
+		// Animation
+		opacity: 0;
 
-			@media not (prefers-reduced-motion) {
-				transition: opacity 0.1s linear;
-			}
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
 		}
+	}
 
-		&[data-focus-visible]::after {
-			outline-color: $components-color-accent;
-			opacity: 1;
-		}
+	&[data-focus-visible]::after {
+		outline-color: $components-color-accent;
+		opacity: 1;
 	}
 
 	[aria-orientation="horizontal"] & {