From 52f37a5f2a60d2143aff9e0d9931ff0cee7217c8 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Mon, 25 Nov 2019 21:02:40 -0800
Subject: [PATCH] Enable stylelint 'selector-max-id' rule and disable only on
 occurrence

Enabling 'selector-max-id' rule, and changing in rare exceptions like
`#bodyContent` to `.mw-body > .content` where there's only one less
specific option.

Bug: T239183
Change-Id: I9d929eaae09475b2e20d96cb19081aba3aec5877
---
 .stylelintrc.json                                |  1 -
 resources/skins.minerva.base.styles/common.less  |  4 ++--
 .../skins.minerva.base.styles/pageactions.less   |  6 +++---
 .../skins.minerva.base.styles/print/article.less | 16 +++++++++-------
 .../skins.minerva.base.styles/print/footer.less  |  2 ++
 resources/skins.minerva.base.styles/ui.less      |  7 ++++++-
 .../skins.minerva.content.styles/hacks.less      |  4 +++-
 .../tablet/common.less                           |  9 +++++----
 .../skins.minerva.mainMenu.styles/MainMenu.less  |  2 +-
 .../MainMenuFooter.less                          |  4 +++-
 .../MainMenuItem.less                            |  3 ++-
 .../skins.minerva.mainPage.styles/common.less    |  8 ++++----
 .../skins.minerva.talk.styles/talkpage.less      |  1 +
 .../minerva.less                                 |  4 ++++
 .../mediawiki.action.edit.styles/minerva.less    |  4 +++-
 skinStyles/mediawiki.action.history.styles.less  |  6 ++++--
 .../mediawiki.special.search.styles/minerva.less |  2 +-
 .../minerva.less                                 |  3 +++
 .../minerva.less                                 |  2 +-
 .../minerva.less                                 |  2 +-
 .../minerva.less                                 |  2 ++
 skinStyles/mobile.special.styles/minerva.less    |  8 +++-----
 22 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 5020a0819..56252a412 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,7 +4,6 @@
 		"declaration-no-important": null,
 		"property-blacklist": "transition",
 		"selector-list-comma-newline-after": null,
-		"selector-max-id": null,
 		"value-keyword-case": null
 	}
 }
diff --git a/resources/skins.minerva.base.styles/common.less b/resources/skins.minerva.base.styles/common.less
index 77cd34edf..4b7795be1 100644
--- a/resources/skins.minerva.base.styles/common.less
+++ b/resources/skins.minerva.base.styles/common.less
@@ -25,14 +25,14 @@
 	display: none !important;
 }
 
-#mw-mf-viewport {
+#mw-mf-viewport { // stylelint-disable-line selector-max-id
 	position: relative;
 	height: 100%;
 }
 
 // We need to ensure the content has the chrome background - otherwise it will
 // overlap the menu during the main menu reveal/hide animation
-#mw-mf-page-center {
+#mw-mf-page-center { // stylelint-disable-line selector-max-id
 	width: 100%;
 	min-height: 100%;
 	position: relative;
diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less
index 894e45208..b85bf2bb7 100644
--- a/resources/skins.minerva.base.styles/pageactions.less
+++ b/resources/skins.minerva.base.styles/pageactions.less
@@ -22,7 +22,7 @@
 	opacity: 0.25;
 }
 
-#page-actions {
+#page-actions { // stylelint-disable-line selector-max-id
 	position: relative;
 }
 
@@ -92,11 +92,11 @@
 // On small devices that don't support Javascript, hide the page actions bar
 @media all and ( max-width: @width-breakpoint-mobile - 1 ) {
 	.client-nojs {
-		#page-actions {
+		#page-actions { // stylelint-disable-line selector-max-id
 			display: none;
 		}
 
-		#section_0 {
+		#section_0 { // stylelint-disable-line selector-max-id
 			border: 0;
 		}
 	}
diff --git a/resources/skins.minerva.base.styles/print/article.less b/resources/skins.minerva.base.styles/print/article.less
index c65e922c0..eb5e64b85 100644
--- a/resources/skins.minerva.base.styles/print/article.less
+++ b/resources/skins.minerva.base.styles/print/article.less
@@ -4,7 +4,9 @@
 @dividerHeight: 2px;
 @dividerSpacing: 28px;
 
-.hatnote {
+// stylelint-disable-next-line selector-max-id
+.hatnote,
+.pre-content #page-actions {
 	display: none;
 }
 
@@ -26,13 +28,10 @@
 	.tagline {
 		font-size: 36px;
 	}
-
-	#page-actions {
-		display: none;
-	}
 }
 
-#bodyContent {
+// Prefer class & direct child selector `.mw-body > .content` over `#bodyContent`.
+.mw-body > .content {
 	padding-top: 55px;
 	position: relative;
 
@@ -61,8 +60,9 @@
 	}
 }
 
+// Prefer class & direct child selector `.mw-body > .content` over `#bodyContent`.
 .thumb:after,
-#bodyContent:before {
+.mw-body > .content:before {
 	position: absolute;
 	left: 0;
 	content: '';
@@ -79,6 +79,7 @@
 	font-size: 28px;
 }
 
+// stylelint-disable selector-max-id
 #mw-content-text {
 	font-size: 36px;
 
@@ -121,3 +122,4 @@
 		font-size: 30px;
 	}
 }
+// stylelint-enable selector-max-id
diff --git a/resources/skins.minerva.base.styles/print/footer.less b/resources/skins.minerva.base.styles/print/footer.less
index ac74a4333..f8913384c 100644
--- a/resources/skins.minerva.base.styles/print/footer.less
+++ b/resources/skins.minerva.base.styles/print/footer.less
@@ -7,6 +7,7 @@
 	font-size: 30px;
 }
 
+// stylelint-disable selector-max-id
 #mw-mf-page-center > footer {
 	border-top: solid 4px #000;
 	padding-top: 23px;
@@ -54,3 +55,4 @@
 		}
 	}
 }
+// stylelint-enable selector-max-id
diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less
index 9d0f0f72d..eb39afcfe 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -31,6 +31,7 @@ main {
 }
 
 // FIXME: should we use .mw-body here instead?
+// stylelint-disable selector-max-id
 #content {
 	// avoid margin collapsing (see T147956)
 	border-top: 1px solid transparent;
@@ -41,6 +42,7 @@ main {
 #content {
 	background-color: @skinContentBgColor;
 }
+// stylelint-enable selector-max-id
 
 .header-container {
 	border-bottom: 1px solid @colorGray12;
@@ -53,6 +55,7 @@ main {
 	}
 }
 
+// stylelint-disable-next-line selector-max-id
 .navigation-drawer--loading,
 // if footer has last modified line hide it (T173545)
 #footer-info-lastmod {
@@ -132,7 +135,7 @@ main {
 	}
 }
 
-#searchInput {
+#searchInput { // stylelint-disable-line selector-max-id
 	cursor: text;
 }
 
@@ -236,6 +239,7 @@ input.search {
 	}
 }
 
+// stylelint-disable selector-max-id
 #page-secondary-actions {
 	// Clears floating on table of contents on stub pages.
 	clear: both;
@@ -279,6 +283,7 @@ input.search {
 .post-content {
 	margin: 0 @contentMargin;
 }
+// stylelint-enable selector-max-id
 
 // T217197
 .minerva__subtitle {
diff --git a/resources/skins.minerva.content.styles/hacks.less b/resources/skins.minerva.content.styles/hacks.less
index b2087f983..bee1d0c0e 100644
--- a/resources/skins.minerva.content.styles/hacks.less
+++ b/resources/skins.minerva.content.styles/hacks.less
@@ -24,6 +24,7 @@ FIXME: Review all of these hacks to see if they still apply.
 		display: none;
 	}
 
+	// stylelint-disable selector-max-id
 	/* Hide cleanup templates by default to non-javascript users as these stop them from reading the article itself
 	 * Edit page notices */
 	.action-edit .fmbox,
@@ -35,6 +36,7 @@ FIXME: Review all of these hacks to see if they still apply.
 		// It's important as some of these are tables which become display: table on larger screens
 		display: none !important;
 	}
+	// stylelint-enable selector-max-id
 
 	table {
 		// A lot of templates introduce floating and horizontal margins inline styles
@@ -107,7 +109,7 @@ FIXME: Review all of these hacks to see if they still apply.
 }
 
 // FIXME: Remove when filetoc is stripped from file pages a la table of contents (toc)
-#filetoc {
+#filetoc { // stylelint-disable-line selector-max-id
 	display: none;
 }
 
diff --git a/resources/skins.minerva.content.styles/tablet/common.less b/resources/skins.minerva.content.styles/tablet/common.less
index 32ddbac2a..ce64ff294 100644
--- a/resources/skins.minerva.content.styles/tablet/common.less
+++ b/resources/skins.minerva.content.styles/tablet/common.less
@@ -6,10 +6,8 @@ A file for css that optimises the Minerva skin on larger devices.
 @import '../../../minerva.less/minerva.mixins.less';
 
 @media screen and ( min-width: @width-breakpoint-tablet ) {
-	.client-js {
-		#searchIcon {
-			display: none;
-		}
+	.client-js #searchIcon { // stylelint-disable-line selector-max-id
+		display: none;
 	}
 
 	.header {
@@ -27,6 +25,7 @@ A file for css that optimises the Minerva skin on larger devices.
 		}
 	}
 
+	// stylelint-disable selector-max-id
 	// FIXME: Have a class that identifies all of these selectors
 	.pre-content,
 	/* Form only pages e.g. Special:MobileOptions */
@@ -36,6 +35,7 @@ A file for css that optimises the Minerva skin on larger devices.
 		max-width: @contentMaxWidthTablet;
 		margin: 0 @contentPaddingTablet;
 	}
+	// stylelint-enable selector-max-id
 
 	.content {
 		// Classes added by thumbnails
@@ -88,6 +88,7 @@ A file for css that optimises the Minerva skin on larger devices.
 }
 
 @media screen and ( min-width: @width-breakpoint-desktop ) {
+	// stylelint-disable-next-line selector-max-id
 	.banner-container,
 	/* FIXME: Generic header class needed me-thinks! */
 	.header,
diff --git a/resources/skins.minerva.mainMenu.styles/MainMenu.less b/resources/skins.minerva.mainMenu.styles/MainMenu.less
index 496b8f8ca..53e8f5bd1 100644
--- a/resources/skins.minerva.mainMenu.styles/MainMenu.less
+++ b/resources/skins.minerva.mainMenu.styles/MainMenu.less
@@ -3,7 +3,7 @@
 @import '../../minerva.less/minerva.variables.less';
 @import '../../minerva.less/minerva.mixins.less';
 
-/* stylelint-disable no-descending-specificity */
+// stylelint-disable no-descending-specificity, selector-max-id
 
 // .menu
 #mw-mf-page-left {
diff --git a/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less b/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less
index e6cb02340..5f0629af9 100644
--- a/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less
+++ b/resources/skins.minerva.mainMenu.styles/MainMenuFooter.less
@@ -2,9 +2,10 @@
 
 // todo: use .menu (or make a new BEM class). At time of writing, this would require additional
 //       changes to have sufficient specificity.
+// stylelint-disable selector-max-id
 #mw-mf-page-left {
 	ul {
-		// This is, like, the area for the disclaimare.
+		// This is, like, the area for the disclaimer.
 		&.hlist {
 			li {
 				background-color: transparent;
@@ -30,3 +31,4 @@
 		}
 	}
 }
+// stylelint-enable selector-max-id
diff --git a/resources/skins.minerva.mainMenu.styles/MainMenuItem.less b/resources/skins.minerva.mainMenu.styles/MainMenuItem.less
index 4c1b65944..1491272cd 100644
--- a/resources/skins.minerva.mainMenu.styles/MainMenuItem.less
+++ b/resources/skins.minerva.mainMenu.styles/MainMenuItem.less
@@ -1,6 +1,6 @@
 @import '../../minerva.less/minerva.variables.less';
 
-/* stylelint-disable no-descending-specificity */
+// stylelint-disable no-descending-specificity, selector-max-id
 
 @menuLinkLineHeight: 24px;
 
@@ -74,3 +74,4 @@
 		}
 	}
 }
+// stylelint-enable no-descending-specificity, selector-max-id
diff --git a/resources/skins.minerva.mainPage.styles/common.less b/resources/skins.minerva.mainPage.styles/common.less
index 5beafdf36..303674727 100644
--- a/resources/skins.minerva.mainPage.styles/common.less
+++ b/resources/skins.minerva.mainPage.styles/common.less
@@ -1,6 +1,7 @@
 @import '../../minerva.less/minerva.variables.less';
 @import '../../minerva.less/minerva.mixins.less';
 
+// stylelint-disable selector-max-id
 .page-Main_Page {
 	#section_0 {
 		border: 0;
@@ -18,9 +19,8 @@
 		}
 	}
 
-	#page-secondary-actions {
-		a {
-			margin-top: 1em;
-		}
+	#page-secondary-actions a {
+		margin-top: 1em;
 	}
 }
+// stylelint-enable selector-max-id
diff --git a/resources/skins.minerva.talk.styles/talkpage.less b/resources/skins.minerva.talk.styles/talkpage.less
index c958104c9..c2a84ecb2 100644
--- a/resources/skins.minerva.talk.styles/talkpage.less
+++ b/resources/skins.minerva.talk.styles/talkpage.less
@@ -39,6 +39,7 @@
 
 // Only run on talk pages
 .client-js .skin-minerva--talk-simplified {
+	// stylelint-disable-next-line selector-max-id
 	.toc,
 	#mf-section-0,
 	.section-heading + div {
diff --git a/skinStyles/ext.confirmEdit.fancyCaptcha.styles/minerva.less b/skinStyles/ext.confirmEdit.fancyCaptcha.styles/minerva.less
index d5c113ea7..9ffea4acf 100644
--- a/skinStyles/ext.confirmEdit.fancyCaptcha.styles/minerva.less
+++ b/skinStyles/ext.confirmEdit.fancyCaptcha.styles/minerva.less
@@ -1,6 +1,7 @@
 @import '../../minerva.less/minerva.variables.less';
 @import '../../minerva.less/minerva.mixins.less';
 
+// stylelint-disable selector-max-id
 /* fancycaptcha reload button */
 .confirmedit-captcha-reload,
 #mf-captcha-reload-container {
@@ -13,6 +14,7 @@
 		color: @colorProgressive;
 	}
 }
+// stylelint-enable selector-max-id
 
 .mw-createacct-captcha-assisted {
 	display: block;
@@ -38,6 +40,7 @@
 			margin: 0;
 		}
 
+		// stylelint-disable selector-max-id
 		input:not( [ type='submit' ] ),
 		img,
 		#wpCaptchaWord {
@@ -48,6 +51,7 @@
 				border-top: 0;
 			}
 		}
+		// stylelint-enable selector-max-id
 
 		// CAPTCHA's are well known by internet users, save the space of the explanation
 		> p,
diff --git a/skinStyles/mediawiki.action.edit.styles/minerva.less b/skinStyles/mediawiki.action.edit.styles/minerva.less
index fb9cc6dc7..595178941 100644
--- a/skinStyles/mediawiki.action.edit.styles/minerva.less
+++ b/skinStyles/mediawiki.action.edit.styles/minerva.less
@@ -10,7 +10,7 @@
 		display: none;
 	}
 
-	> #wpTextbox1 {
+	> #wpTextbox1 { // stylelint-disable-line selector-max-id
 		border: 1px solid @colorGray12;
 		max-height: 70vh;
 	}
@@ -18,6 +18,7 @@
 
 .action-submit,
 .action-edit {
+	// stylelint-disable selector-max-id
 	#page-secondary-actions,
 	#page-actions {
 		display: none;
@@ -76,4 +77,5 @@
 			text-align: left;
 		}
 	}
+	// stylelint-enable selector-max-id
 }
diff --git a/skinStyles/mediawiki.action.history.styles.less b/skinStyles/mediawiki.action.history.styles.less
index 87ce9442d..ae2637ea9 100644
--- a/skinStyles/mediawiki.action.history.styles.less
+++ b/skinStyles/mediawiki.action.history.styles.less
@@ -4,7 +4,7 @@
 @import 'mediawiki.ui/mixins.buttons.less';
 
 .action-history {
-	#mw-content-text > form {
+	#mw-content-text > form { // stylelint-disable-line selector-max-id
 		margin: 0;
 	}
 
@@ -14,7 +14,7 @@
 
 	// form element wrapping history page content. Overrides #mw-content-text > form
 	// for tablet widths.
-	#mw-history-compare {
+	#mw-history-compare { // stylelint-disable-line selector-max-id
 		width: 100%;
 		max-width: 100%;
 	}
@@ -68,6 +68,7 @@
 		margin-bottom: 1em;
 	}
 
+	// stylelint-disable selector-max-id
 	#pagehistory {
 		margin-bottom: 24px;
 		padding: 0;
@@ -172,6 +173,7 @@
 			margin-left: @revision-selectors-width;
 		}
 	}
+	// stylelint-enable selector-max-id
 
 	// hide page instructions
 	.mw-history-legend,
diff --git a/skinStyles/mediawiki.special.search.styles/minerva.less b/skinStyles/mediawiki.special.search.styles/minerva.less
index 3fefe7524..53d0767f4 100644
--- a/skinStyles/mediawiki.special.search.styles/minerva.less
+++ b/skinStyles/mediawiki.special.search.styles/minerva.less
@@ -7,7 +7,7 @@
 }
 
 @media all and ( min-width: @width-breakpoint-tablet ) {
-	#search {
+	#search { // stylelint-disable-line selector-max-id
 		display: none;
 	}
 }
diff --git a/skinStyles/mediawiki.special.userlogin.common.styles/minerva.less b/skinStyles/mediawiki.special.userlogin.common.styles/minerva.less
index 18e445930..8923cbacd 100644
--- a/skinStyles/mediawiki.special.userlogin.common.styles/minerva.less
+++ b/skinStyles/mediawiki.special.userlogin.common.styles/minerva.less
@@ -1,6 +1,8 @@
 @import '../../minerva.less/minerva.variables.less';
 @import '../../minerva.less/minerva.mixins.less';
 
+// stylelint-disable selector-max-id
+
 // Hide the texts inside these selectors because they push the login form below the fold
 // `#user-button` serves no purpose on the login screen as you are not logged in so cannot use.
 #userloginprompt,
@@ -155,3 +157,4 @@
 		margin-top: @margin;
 	}
 }
+// stylelint-enable selector-max-id
diff --git a/skinStyles/mobile.special.mobilediff.styles/minerva.less b/skinStyles/mobile.special.mobilediff.styles/minerva.less
index 19673ad48..ecd91bc6c 100644
--- a/skinStyles/mobile.special.mobilediff.styles/minerva.less
+++ b/skinStyles/mobile.special.mobilediff.styles/minerva.less
@@ -3,7 +3,7 @@
 @media all and ( max-width: @width-breakpoint-tablet ) {
 	// T233151: Remove post-content margin on mobile diff page drawer
 	// .post-content margin
-	#mw-mf-userinfo .post-content {
+	#mw-mf-userinfo .post-content { // stylelint-disable-line selector-max-id
 		margin: 0;
 	}
 }
diff --git a/skinStyles/mobile.special.mobilemenu.styles/minerva.less b/skinStyles/mobile.special.mobilemenu.styles/minerva.less
index f438db02d..4b813a9fc 100644
--- a/skinStyles/mobile.special.mobilemenu.styles/minerva.less
+++ b/skinStyles/mobile.special.mobilemenu.styles/minerva.less
@@ -11,7 +11,7 @@ body.navigation-full-screen {
 		visibility: visible !important;
 	}
 
-	#mw-mf-page-center {
+	#mw-mf-page-center { // stylelint-disable-line selector-max-id
 		display: none;
 	}
 }
diff --git a/skinStyles/mobile.special.mobileoptions.styles/minerva.less b/skinStyles/mobile.special.mobileoptions.styles/minerva.less
index 449b35a62..a162ccc8a 100644
--- a/skinStyles/mobile.special.mobileoptions.styles/minerva.less
+++ b/skinStyles/mobile.special.mobileoptions.styles/minerva.less
@@ -1,5 +1,6 @@
 @import '../../minerva.less/minerva.variables.less';
 
+// stylelint-disable selector-max-id
 @media all and ( min-width: @width-breakpoint-tablet ) {
 	.ns-special .pre-content {
 		background: #fff;
@@ -30,3 +31,4 @@
 		font-size: 1.2em;
 	}
 }
+// stylelint-enable selector-max-id
diff --git a/skinStyles/mobile.special.styles/minerva.less b/skinStyles/mobile.special.styles/minerva.less
index e1fbaad02..1dfcd5e8b 100644
--- a/skinStyles/mobile.special.styles/minerva.less
+++ b/skinStyles/mobile.special.styles/minerva.less
@@ -16,11 +16,9 @@
 }
 
 .ns-special {
-	#content {
-		#section_0 {
-			font-size: 1.5em;
-			font-weight: bold;
-		}
+	#content #section_0 { // stylelint-disable-line selector-max-id
+		font-size: 1.5em;
+		font-weight: bold;
 	}
 
 	.heading-holder {