fix: missing style in production

fix #16

angular.json

@@ -47,6 +47,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
+            "sourceMap": true,
             "styles": [
               "node_modules/@taiga-ui/core/styles/taiga-ui-global.less",
               "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
@@ -66,6 +67,14 @@
           },
           "configurations": {
             "production": {
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "budgets": [
                 {
                   "type": "initial",
@@ -91,7 +100,6 @@
               "optimization": false,
               "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
               "namedChunks": true
             }
           },

src/app/options/options.component.scss

@@ -1,15 +0,0 @@
-#options {
-  table {
-    width: 100%;
-
-    .action-column {
-      & > .wrapper {
-        display: flex;
-
-        & > * {
-          width: 100%;
-        }
-      }
-    }
-  }
-}

src/app/options/options.component.ts

@@ -5,4 +5,5 @@ import { Component } from '@angular/core'
   templateUrl: './options.component.html',
   styleUrls: ['./options.component.scss']
 })
-export class OptionsComponent {}
+export class OptionsComponent {
+}

src/app/options/rules/rules.component.scss

@@ -1,4 +1,4 @@
-app-rules {
+:host {
   .inputs {
     display: grid;
     grid-template-columns: repeat(5, 1fr);

src/app/options/rules/rules.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { from, pluck } from 'rxjs'
 import { BrowserService } from '../../browser.service'
 import { AbstractControl, FormArray, FormBuilder } from '@angular/forms'
@@ -10,8 +10,7 @@ import defaultTemplate from '../../../assets/default.template'
 @Component({
   selector: 'app-rules',
   templateUrl: './rules.component.html',
-  styleUrls: ['./rules.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrls: ['./rules.component.scss']
 })
 export class RulesComponent implements OnInit {
   form = this.fb.group({

src/app/options/shortcuts/shortcuts.component.scss

@@ -1,9 +1,9 @@
-#options {
+:host {
   table {
     width: 100%;
 
     .action-column {
-      & > .wrapper {
+      & > ::ng-deep .wrapper {
         display: flex;
 
         & > * {

src/app/options/shortcuts/shortcuts.component.ts

@@ -1,13 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core'
+import { Component } from '@angular/core'
 import { AbstractControl, FormArray, FormBuilder, Validators } from '@angular/forms'
 import { concat, from, of } from 'rxjs'
 import { map, switchMap, tap } from 'rxjs/operators'
 
 @Component({
   selector: 'app-shortcuts',
   templateUrl: './shortcuts.component.html',
-  styleUrls: ['./shortcuts.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrls: ['./shortcuts.component.scss']
 })
 export class ShortcutsComponent {
   required = ['hotkey']

src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode, ViewEncapsulation } from '@angular/core'
+import { enableProdMode } from '@angular/core'
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 
 import { AppModule } from './app/app.module'
@@ -9,7 +9,5 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-  .bootstrapModule(AppModule, {
-    defaultEncapsulation: ViewEncapsulation.None
-  })
+  .bootstrapModule(AppModule)
   .catch((err) => console.error(err))