perf(list): reduce css selector size (#12571)

Reduces the minified size of the list CSS from 31kb to 13kb by simplifying some of the selectors. We may be able to bring it down even further, however these changes are a bit safer in comparison.

Author: crisbeto

src/lib/list/_list-theme.scss

@@ -8,7 +8,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .mat-list, .mat-nav-list, .mat-selection-list {
+  .mat-list-base {
     .mat-list-item {
       color: mat-color($foreground, text);
     }
@@ -46,7 +46,7 @@
   }
 
   // Default list
-  .mat-list, .mat-nav-list, .mat-selection-list {
+  .mat-list-base {
     .mat-list-item {
       font-size: mat-font-size($config, subheading-2);
       @include mat-line-base(mat-font-size($config, body-1));
@@ -65,7 +65,7 @@
   }
 
   // Dense list
-  .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {
+  .mat-list-base[dense] {
     .mat-list-item {
       font-size: mat-font-size($config, caption);
       @include mat-line-base(mat-font-size($config, caption));

src/lib/list/list.scss

@@ -197,9 +197,7 @@ $mat-list-item-inset-divider-offset: 72px;
 
   // This needs slightly more specificity, because it
   // can be overwritten by the typography styles.
-  .mat-list &,
-  .mat-nav-list &,
-  .mat-selection-list & {
+  .mat-list-base & {
     margin: 0;
   }
 }
@@ -214,7 +212,7 @@ $mat-list-item-inset-divider-offset: 72px;
   }
 }
 
-.mat-list, .mat-nav-list, .mat-selection-list {
+.mat-list-base {
   padding-top: $mat-list-top-padding;
   display: block;
   -webkit-tap-highlight-color: transparent;
@@ -237,9 +235,7 @@ $mat-list-item-inset-divider-offset: 72px;
 }
 
 
-.mat-list[dense],
-.mat-nav-list[dense],
-.mat-selection-list[dense] {
+.mat-list-base[dense] {
   padding-top: $mat-dense-top-padding;
   display: block;
 

src/lib/list/list.ts

@@ -44,7 +44,7 @@ export const _MatListItemMixinBase: CanDisableRippleCtor & typeof MatListItemBas
   exportAs: 'matNavList',
   host: {
     'role': 'navigation',
-    'class': 'mat-nav-list'
+    'class': 'mat-nav-list mat-list-base'
   },
   templateUrl: 'list.html',
   styleUrls: ['list.css'],
@@ -59,7 +59,9 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {}
   selector: 'mat-list, mat-action-list',
   exportAs: 'matList',
   templateUrl: 'list.html',
-  host: {'class': 'mat-list'},
+  host: {
+    'class': 'mat-list mat-list-base'
+  },
   styleUrls: ['list.css'],
   inputs: ['disableRipple'],
   encapsulation: ViewEncapsulation.None,

src/lib/list/selection-list.ts

@@ -267,7 +267,7 @@ export class MatListOption extends _MatListOptionMixinBase
   host: {
     'role': 'listbox',
     '[tabIndex]': 'tabIndex',
-    'class': 'mat-selection-list',
+    'class': 'mat-selection-list mat-list-base',
     '(focus)': 'focus()',
     '(blur)': '_onTouched()',
     '(keydown)': '_keydown($event)',