Stylelint: Another round of cleanup

.stylelintignore

@@ -11,6 +11,7 @@
 
 # Ignore CSS copied in from elsewhere
 projects/js-packages/components/components/boost-score-graph/style-uplot.scss
+projects/packages/jetpack-mu-wpcom/src/features/custom-css/custom-css/css/blank.css
 projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks
 projects/plugins/crm/css/lib
 projects/plugins/crm/css/semantic-ui

projects/js-packages/ai-client/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/js-packages/ai-client/src/components/message/style.scss

@@ -18,6 +18,7 @@
 	.jetpack-ai-assistant__message-content {
 		flex-grow: 2;
 		margin: 0 8px;
+		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
 		line-height: 1.4em;
 		display: flex;
 		gap: 4px;

projects/js-packages/components/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/js-packages/components/components/boost-score-graph/style-tooltip.scss

@@ -43,6 +43,7 @@ $white: #fff;
     &__date {
         font-size: 1em;
         font-weight: 600;
+        // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
         line-height: 1.6em;
     }
 
@@ -69,4 +70,4 @@ $white: #fff;
         left: 50%;
         transform: translateX(-50%);
     }
-}
+}

projects/js-packages/components/components/dot-pager/style.scss

@@ -50,6 +50,11 @@
 
 .dot-pager__control-choose-page {
 	cursor: pointer;
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	padding: 0;
+	background-color: var(--jp-white-off);
 
 	&:disabled {
 		cursor: default;
@@ -58,14 +63,6 @@
 	&:focus-visible {
 		box-shadow: 0 0 0 2px var(--jp-gray-90);
 	}
-}
-
-.dot-pager__control-choose-page {
-	border-radius: 50%;
-	width: 6px;
-	height: 6px;
-	padding: 0;
-	background-color: var(--jp-white-off);
 
 	&:hover {
 		background-color: var(--jp-gray-20);
@@ -76,9 +73,6 @@
 	}
 }
 
-.dot-pager {
-
-	&__button {
-		margin-right: 10px;
-	}
+.dot-pager__button {
+	margin-right: 10px;
 }

projects/js-packages/components/components/icon-tooltip/style.scss

@@ -9,6 +9,14 @@ $arrow-color: var( --jp-gray );
 
 // Namespace to avoid overriding global styles
 .icon-tooltip-helper {
+	// POPOVER_HELPER_WIDTH
+	width: 124px;
+	height: 18px;
+	position: absolute;
+	top: 0;
+	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
+	left: -53px;
+	pointer-events: none;
 
 	/*
 	* Fix arrow placement - section start
@@ -71,17 +79,6 @@ $arrow-color: var( --jp-gray );
 	}
 }
 
-.icon-tooltip-helper {
-	// POPOVER_HELPER_WIDTH
-	width: 124px;
-	height: 18px;
-	position: absolute;
-	top: 0;
-	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
-	left: -53px;
-	pointer-events: none;
-}
-
 .icon-tooltip-container {
 	// Recover events
 	pointer-events: all;

projects/js-packages/components/components/icons/style.module.scss

@@ -24,10 +24,6 @@
 		}
 	}
 
-	&.instagram {
-		fill: var( --color-instagram );
-	}
-
 	&.twitter {
 		fill: var( --color-twitter );
 	}

projects/js-packages/components/components/popover/style.scss

@@ -19,7 +19,8 @@
 
 	&__body p {
 		font-weight: 400;
+		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
 		line-height: 1.6em;
 		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	}
-}
+}

projects/js-packages/connection/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/js-packages/connection/components/connection-error-notice/styles.module.scss

@@ -76,10 +76,6 @@
 	margin-bottom: 25px;
 }
 
-.error {
-	margin-bottom: 25px;
-}
-
 .message {
 	margin-right: var( --spacing-base ); // 8px
 	flex-grow: 1;

projects/js-packages/connection/components/disconnect-dialog/style.scss

@@ -79,19 +79,6 @@
 		width: calc(100% - 48px); // Help with the margin on the row.
 	}
 
-	&__content{
-		background: var( --jp-white-off );
-		margin: 0;
-		padding: 2rem 1rem;
-		border-radius: 4px;
-		text-align: center;
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-
 	&__actions{
 		background: var( --jp-white );
 		padding: 2rem 0;
@@ -157,9 +144,19 @@
 	}
 }
 
-// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling.
 .jp-connection__disconnect-dialog__content {
-
+	background: var( --jp-white-off );
+	margin: 0;
+	padding: 2rem 1rem;
+	border-radius: 4px;
+	text-align: center;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling.
 	@media (max-height: 900px) {
 
 		.jp-components__decorative-card {

projects/js-packages/licensing/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/js-packages/licensing/components/golden-token-modal/styles.module.scss

@@ -68,10 +68,12 @@ $tablet-width: 760px;
 .headline {
 	margin-bottom: 8px;
 	font-weight: 500;
+	// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
 	line-height: 110%;
 }
 
 .paragraph {
+	// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
 	line-height: 140%;
 }
 

projects/js-packages/publicize-components/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss

@@ -72,7 +72,7 @@
 	cursor: pointer;
 }
 
-.remove {
+.remove, %remove {
 	position: absolute;
 	top: -4px;
 	right: -4px;
@@ -103,7 +103,7 @@
 
 .remove-loading {
 
-	@extend .remove;
+	@extend %remove;
 	// This is to make the close button appear in the right place when we are loading the image.
 	// With this it is possible to close/stop loading images if the request takes too long.
 	top: -56px;

projects/js-packages/publicize-components/src/components/social-previews/modal.scss

@@ -78,6 +78,11 @@
 			display: flex;
 			justify-content: center;
 		}
+
+		// Mastodon
+		.mastodon-preview {
+			max-width: 578px;
+		}
 	}
 
 	@media ( min-width: $break-small ) {
@@ -100,19 +105,9 @@
 	}
 
 	// Facebook
-
 	.facebook-preview {
 		width: 100%;
 	}
-
-	// Mastodon
-
-	.components-tab-panel__tab-content {
-
-		.mastodon-preview {
-			max-width: 578px;
-		}
-	}
 }
 
 // Modal containing the upgrade nudge

projects/packages/account-protection/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/packages/account-protection/src/css/strength-meter.css

@@ -113,9 +113,6 @@
     display: flex;
     align-items: center;
     gap: 4px;
-}
-
-.branding {
 
     .powered-by {
         font-size: 12px;

projects/packages/backup/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/packages/backup/src/js/components/masthead/calypso-colors.scss

@@ -13,16 +13,18 @@ $light-gray-700:         #c3c4c7;
 $gray-original:          #87a6bc;
 $gray:                   desaturate( $gray-original, 100% ); // Intermediary transform to match dotcom's colors
 
-// $gray color functions:
-//
-// lighten( $gray, 10% )
-// lighten( $gray, 20% )
-// lighten( $gray, 30% )
-// darken( $gray, 10% )
-// darken( $gray, 20% )
-// darken( $gray, 30% )
-//
-// See wordpress.com/design-handbook/colors/ for more info.
+/**
+ * $gray color functions:
+ *
+ *   lighten( $gray, 10% )
+ *   lighten( $gray, 20% )
+ *   lighten( $gray, 30% )
+ *   darken( $gray, 10% )
+ *   darken( $gray, 20% )
+ *   darken( $gray, 30% )
+ *
+ * See wordpress.com/design-handbook/colors/ for more info.
+ */
 
 $gray-light:             lighten( $gray, 33% ); //#f6f6f6
 $gray-dark:              darken( $gray, 38% ); //#404040
@@ -57,4 +59,4 @@ $link-highlight:         tint($blue-medium, 20%);
 $white:                  rgba(255,255,255,1);
 $transparent:            rgba(255,255,255,0);
 
-$border-ultra-light-gray: #e8f0f5;
+$border-ultra-light-gray: #e8f0f5;

projects/packages/classic-theme-helper/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/packages/classic-theme-helper/src/social-menu/social-menu.css

@@ -48,10 +48,8 @@ Genericons
 	text-decoration: inherit;
 	vertical-align: top;
 	width: 1em;
-}
 
-/* Default */
-.jetpack-social-navigation-genericons a::before {
+	/* Default */
 	content: "\f415";
 }
 

projects/packages/forms/changelog/fix-stylelint-round_x_of_cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Linting: Do additional stylesheet cleanup.

projects/packages/forms/src/blocks/contact-form/components/help-message/style.scss

@@ -2,7 +2,7 @@
 .help-message {
 	display: flex;
 	font-size: 13px;
-	line-height: 1.4em;
+	line-height: 1.4;
 	margin-bottom: 1em;
 	margin-top: -0.5em;
 

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -777,6 +777,7 @@
 
 			// For some reason, when keeping the rule below together with the above selector,
 			// on production builds, the attributes are being reordered, causing side-effects
+			// stylelint-disable-next-line no-duplicate-selectors
 			.notched-label__notch {
 				border-left: none;
 				border-right: none;

projects/packages/forms/src/contact-form/css/editor-inline-editing-style.css

@@ -622,10 +622,6 @@ input[type="submit"].button-primary:disabled {
 	color: #fff;
 }
 
-input[type="submit"].button-primary {
-	color: #fff;
-}
-
 
 /* ==========================================================================
 ** Inline editor styles

projects/packages/forms/src/contact-form/css/file-field.css

@@ -265,16 +265,13 @@
 
 .jetpack-form-file-field__success {
 	color: #008A20;
+	display: none;
 }
 
 .jetpack-form-file-field__error {
 	color: #b32d2e;
 }
 
-.jetpack-form-file-field__success {
-	display: none;
-}
-
 .jetpack-form-file-field__preview.is-error .jetpack-form-file-field__uploading,
 .jetpack-form-file-field__preview.is-complete .jetpack-form-file-field__uploading {
 	display: none;

projects/packages/forms/src/contact-form/css/grunion.css

@@ -474,6 +474,7 @@
 For some reason, when keeping the rule below together with the above selector,
 on production builds, the attributes are being reordered, causing side-effects
 */
+/* stylelint-disable-next-line no-duplicate-selectors*/
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch {
 	border-left: none;
 	border-right: none;