From 02d955d0175d202b930d8415893d5baf60f7f68c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 7 Aug 2018 22:16:45 +0200
Subject: [PATCH] perf(list): reduce css selector size

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.
---
 src/lib/list/_list-theme.scss  |  6 +++---
 src/lib/list/list.scss         | 10 +++-------
 src/lib/list/list.ts           |  6 ++++--
 src/lib/list/selection-list.ts |  2 +-
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
index 09f44509c4e3..7b92854808e7 100644
--- a/src/lib/list/_list-theme.scss
+++ b/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));
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 030f6fcd6de9..c28e8c832628 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -189,9 +189,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;
   }
 }
@@ -206,7 +204,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;
@@ -229,9 +227,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;
 
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index 55011dea74a6..c01dc9d41147 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -36,7 +36,7 @@ export const _MatListItemMixinBase = mixinDisableRipple(MatListItemBase);
   exportAs: 'matNavList',
   host: {
     'role': 'navigation',
-    'class': 'mat-nav-list'
+    'class': 'mat-nav-list mat-list-base'
   },
   templateUrl: 'list.html',
   styleUrls: ['list.css'],
@@ -51,7 +51,9 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {}
   selector: 'mat-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,
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index f2dc0862da31..d22041502886 100644
--- a/src/lib/list/selection-list.ts
+++ b/src/lib/list/selection-list.ts
@@ -263,7 +263,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)',