Ship different ResourceLoader module for different versions

To have a clean break for upcoming changes we will duplicate
index.less into legacy.less and create a new module to clearly
separate new styles from old.

The preferred name however does come with some caching challenges.
Cached HTML served to anons will continue to load the style module
`skins.vector.styles` for a period of 1-4 weeks

Provided we are careful with our changes during this period this
should be okay.

Change-Id: If32b59036e5cd62cbb804944ca93fa1a101c5129

includes/SkinVector.php

@@ -21,6 +21,7 @@
  * @file
  * @ingroup Skins
  */
+use Vector\Constants;
 
 /**
  * Skin subclass for Vector
@@ -64,7 +65,9 @@ class SkinVector extends SkinTemplate {
 	public function getDefaultModules() {
 		$modules = parent::getDefaultModules();
 		// add vector skin styles and vector module
-		$modules['styles']['skin'][] = 'skins.vector.styles';
+		$module = $this->getUser()->getOption( Constants::PREF_KEY_SKIN_VERSION )
+			=== Constants::SKIN_VERSION_LEGACY ? 'skins.vector.styles.legacy' : 'skins.vector.styles';
+		$modules['styles']['skin'][] = $module;
 		$modules['core'][] = 'skins.vector.js';
 
 		return $modules;

resources/skins.vector.styles/legacy.less

@@ -0,0 +1,19 @@
+@import '../../variables.less';
+
+/* Vector screen styles */
+@media screen {
+	@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';
+}
+
+@import 'hd.less';
+@import 'print.less';

skin.json

@@ -42,6 +42,15 @@
 	},
 	"@note": "When modifying skins.vector.styles definition, make sure the installer still works",
 	"ResourceModules": {
+		"skins.vector.styles.legacy": {
+			"class": "ResourceLoaderSkinModule",
+			"features": [ "elements", "content", "interface", "logo" ],
+			"targets": [
+				"desktop",
+				"mobile"
+			],
+			"styles": [ "resources/skins.vector.styles/legacy.less" ]
+		},
 		"skins.vector.styles": {
 			"class": "ResourceLoaderSkinModule",
 			"features": [ "elements", "content", "interface", "logo" ],