From ac069fbec1222bcb196d3d33fe073b901748370f Mon Sep 17 00:00:00 2001
From: Stephen Niedzielski <stephen@niedzielski.com>
Date: Tue, 10 Mar 2020 15:01:09 -0600
Subject: [PATCH] [dev] Consolidate ResourceLoader LESS style files

Move styles.less to index.less and import print.less from it. This keeps
the reasoning about styles constrained to LESS instead of spread out
over LESS _and_ ResourceLoader. The former is preferable since LESS is
more standardized than ResourceLoader.

The approach of moving styles.less to index.less and then referencing
print.less was chosen with the intent that it'd be easier to assume
styles are screen styles unless a media query says otherwise.

This patch also makes the variables import common among print and screen
styles.

Bug: T246419
Change-Id: I981d0937aaacb7cba082c337f98c90e90b46b340
---
 .../skins.vector.styles/{screen.less => index.less}      | 5 ++++-
 resources/skins.vector.styles/print.less                 | 3 +--
 skin.json                                                | 9 ++-------
 stories/skin.stories.js                                  | 2 +-
 4 files changed, 8 insertions(+), 11 deletions(-)
 rename resources/skins.vector.styles/{screen.less => index.less} (93%)

diff --git a/resources/skins.vector.styles/screen.less b/resources/skins.vector.styles/index.less
similarity index 93%
rename from resources/skins.vector.styles/screen.less
rename to resources/skins.vector.styles/index.less
index 64908a7..6add478 100644
--- a/resources/skins.vector.styles/screen.less
+++ b/resources/skins.vector.styles/index.less
@@ -1,6 +1,7 @@
+@import '../../variables.less';
+
 /* Vector screen styles */
 @media screen {
-	@import '../../variables.less';
 	@import 'common.less';
 	@import 'PersonalMenu.less';
 	@import 'SearchBox.less';
@@ -45,3 +46,5 @@
 		right: 1em;
 	}
 }
+
+@import 'print.less';
diff --git a/resources/skins.vector.styles/print.less b/resources/skins.vector.styles/print.less
index d0825cb..8d7f9b9 100644
--- a/resources/skins.vector.styles/print.less
+++ b/resources/skins.vector.styles/print.less
@@ -1,4 +1,3 @@
-@import '../../variables.less';
 @wmui-color-base0: #000;
 
 @color-base: @wmui-color-base0;
@@ -8,7 +7,7 @@
 
 @media print {
 
-	/* These styles retain the existing typography in screen.less
+	/* These styles retain the existing typography in index.less
 	In future (when deploying these styles) we may want to refactor skins.vector.styles
 	to apply certain styles in print as well as screen mode. */
 	.toc,
diff --git a/skin.json b/skin.json
index 6f2920f..4b1f626 100644
--- a/skin.json
+++ b/skin.json
@@ -49,19 +49,14 @@
 				"desktop",
 				"mobile"
 			],
-			"styles": {
-				"resources/skins.vector.styles/screen.less": [],
-				"resources/skins.vector.styles/print.less": []
-			}
+			"styles": [ "resources/skins.vector.styles/index.less" ]
 		},
 		"skins.vector.styles.responsive": {
 			"targets": [
 				"desktop",
 				"mobile"
 			],
-			"styles": [
-				"resources/skins.vector.styles.responsive.less"
-			]
+			"styles": [ "resources/skins.vector.styles.responsive.less" ]
 		},
 		"skins.vector.js": {
 			"scripts": [
diff --git a/stories/skin.stories.js b/stories/skin.stories.js
index 09ad120..04e7797 100644
--- a/stories/skin.stories.js
+++ b/stories/skin.stories.js
@@ -3,7 +3,7 @@ import { htmluserlangattributes } from './utils';
 import skinTemplate from '!!raw-loader!../includes/templates/index.mustache';
 import { placeholder } from './utils';
 
-import '../resources/skins.vector.styles/screen.less';
+import '../resources/skins.vector.styles/index.less';
 import { NAVIGATION_TEMPLATE_DATA, navTemplate, NAVIGATION_TEMPLATE_PARTIALS } from './Navigation.stories.data';
 import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';