From 713d0ac2fd40651d0c02f0f803237199d237e7c1 Mon Sep 17 00:00:00 2001
From: Stephen Niedzielski <stephen@niedzielski.com>
Date: Tue, 10 Mar 2020 13:13:42 -0600
Subject: [PATCH] [dev] Favor LESS media queries to ResourceLoader

Prior to this patch, Vector used a mixture of LESS media queries and
ResourceLoader (RL) media queries[0]. So far as I can tell[1], the
latter only instructs RL to wrap the contents of a LESS file within a
query (there are no conditionals placed on style loading). Further,
according to a coauthor of RL (Roan), RL media query support was most
likely a replacement for `@media foo { @import foo.css }` to inline
print styles from a separate style sheet which Vector itself does not
use. The LESS solution is much more intuitive since it's not MediaWiki-
specific and only the LESS code needs to be considered instead of LESS
_and_ the RL configuration in skin.json.

This patch moves both screen media queries to screen.less for the
aforementioned consistency and to avoid nesting queries. It is hoped
that these changes will help make future work easier, such as those to
margin likely to take place in making the sidebar collapsible.

[0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries
[1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector

Bug: T246419
Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1
---
 resources/skins.vector.styles/screen-hd.less | 31 -----------
 resources/skins.vector.styles/screen.less    | 58 ++++++++++++++++----
 skin.json                                    |  7 +--
 3 files changed, 47 insertions(+), 49 deletions(-)
 delete mode 100644 resources/skins.vector.styles/screen-hd.less

diff --git a/resources/skins.vector.styles/screen-hd.less b/resources/skins.vector.styles/screen-hd.less
deleted file mode 100644
index 811b725..0000000
--- a/resources/skins.vector.styles/screen-hd.less
+++ /dev/null
@@ -1,31 +0,0 @@
-/* Vector screen styles for high definition displays */
-
-@import '../../variables.less';
-
-.mw-body,
-#mw-head-base,
-#left-navigation,
-#mw-data-after-content,
-#footer {
-	margin-left: 11em;
-}
-
-.mw-body {
-	padding: 1.25em 1.5em 1.5em 1.5em;
-}
-
-#footer {
-	padding: 1.25em;
-}
-
-#mw-panel {
-	padding-left: 0.5em;
-}
-
-#p-search {
-	margin-right: 1em;
-}
-
-#p-personal {
-	right: 1em;
-}
diff --git a/resources/skins.vector.styles/screen.less b/resources/skins.vector.styles/screen.less
index ec8f24d..64908a7 100644
--- a/resources/skins.vector.styles/screen.less
+++ b/resources/skins.vector.styles/screen.less
@@ -1,13 +1,47 @@
 /* Vector screen styles */
-@import '../../variables.less';
-@import 'common.less';
-@import 'PersonalMenu.less';
-@import 'SearchBox.less';
-@import 'VectorTabs.less';
-@import 'watchstar.less';
-@import 'VectorMenu.less';
-@import 'Navigation.less';
-@import 'Portal.less';
-@import 'Sidebar.less';
-@import 'Footer.less';
-@import 'externalLinks.less';
+@media screen {
+	@import '../../variables.less';
+	@import 'common.less';
+	@import 'PersonalMenu.less';
+	@import 'SearchBox.less';
+	@import 'VectorTabs.less';
+	@import 'watchstar.less';
+	@import 'VectorMenu.less';
+	@import 'Navigation.less';
+	@import 'Portal.less';
+	@import 'Sidebar.less';
+	@import 'Footer.less';
+	@import 'externalLinks.less';
+}
+
+/* Vector screen styles for high definition displays. These rules cross the above components and are
+   grouped together here only for the sake of the media query common to each. */
+@media screen and ( min-width: 982px ) {
+	.mw-body,
+	#mw-head-base,
+	#left-navigation,
+	#mw-data-after-content,
+	#footer {
+		margin-left: 11em;
+	}
+
+	.mw-body {
+		padding: 1.25em 1.5em 1.5em 1.5em;
+	}
+
+	#footer {
+		padding: 1.25em;
+	}
+
+	#mw-panel {
+		padding-left: 0.5em;
+	}
+
+	#p-search {
+		margin-right: 1em;
+	}
+
+	#p-personal {
+		right: 1em;
+	}
+}
diff --git a/skin.json b/skin.json
index a85c31f..6f2920f 100644
--- a/skin.json
+++ b/skin.json
@@ -50,12 +50,7 @@
 				"mobile"
 			],
 			"styles": {
-				"resources/skins.vector.styles/screen.less": {
-					"media": "screen"
-				},
-				"resources/skins.vector.styles/screen-hd.less": {
-					"media": "screen and ( min-width: 982px )"
-				},
+				"resources/skins.vector.styles/screen.less": [],
 				"resources/skins.vector.styles/print.less": []
 			}
 		},