[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
This commit is contained in:
Stephen Niedzielski 2020-03-10 15:01:09 -06:00
parent 713d0ac2fd
commit ac069fbec1
4 changed files with 8 additions and 11 deletions

View file

@ -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';

View file

@ -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,

View file

@ -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": [

View file

@ -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';