refactor: styles refactoring. disable commonChunk (#653)

- pull palette and theme definitions into _app-theme.scss
- rename main.scss to styles.scss to align with CLI
- changes reduce production app size by 9 KB

Author: Splaktar

angular.json

@@ -40,7 +40,7 @@
             ],
             "styles": [
               {
-                "input": "src/main.scss"
+                "input": "src/styles.scss"
               },
               {
                 "input": "src/highlightjs/material-light.scss"
@@ -76,6 +76,7 @@
                   "maximumWarning": "6kb"
                 }
               ],
+              "commonChunk": false,
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -121,7 +122,7 @@
             "scripts": [],
             "styles": [
               {
-                "input": "src/main.scss"
+                "input": "src/styles.scss"
               },
               {
                 "input": "src/highlightjs/material-light.scss"
@@ -192,4 +193,4 @@
   "cli": {
     "analytics": "cf155f04-1636-4df9-9ce2-870ba25ad38d"
   }
-}
+}

src/_app-theme.scss

@@ -15,7 +15,6 @@
 @import './styles/svg-theme';
 @import './styles/tables-theme';
 
-
 // Styles for the docs app that are based on the current theme.
 @mixin material-docs-app-theme($theme) {
   $primary: map-get($theme, primary);
@@ -61,3 +60,9 @@
   @include nav-bar-theme($theme);
   @include table-of-contents-theme($theme);
 }
+
+// Define the light theme.
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
+
+$theme: mat-light-theme($primary, $accent);

src/main.scss renamed to src/styles.scss

@@ -1,19 +1,11 @@
-@import '~@angular/material/theming';
 @import './app-theme';
 @import './styles/api';
 @import './styles/markdown';
 @import './styles/tables';
 @import './styles/general';
 
-
 // Include material core styles.
 @include mat-core();
 
-
-// Define the light theme.
-$primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
-
-$theme: mat-light-theme($primary, $accent);
 @include angular-material-theme($theme);
 @include material-docs-app-theme($theme);