feat: move global styles to a library

angular.json

@@ -148,7 +148,7 @@
             "tsConfig": "apps/devto/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["apps/devto/src/favicon.ico", "apps/devto/src/assets"],
-            "styles": ["apps/devto/src/styles.scss"],
+            "styles": ["libs/styles/src/index.scss"],
             "scripts": []
           },
           "configurations": {
@@ -436,6 +436,47 @@
         }
       }
     },
+    "styles": {
+      "projectType": "library",
+      "root": "libs/styles",
+      "sourceRoot": "libs/styles/src",
+      "prefix": "devto",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:ng-packagr-lite",
+          "outputs": ["dist/libs/styles"],
+          "options": {
+            "project": "libs/styles/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/styles/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "libs/styles/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/styles"],
+          "options": {
+            "jestConfig": "libs/styles/jest.config.js",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/styles/src/**/*.ts",
+              "libs/styles/src/**/*.html"
+            ]
+          }
+        }
+      }
+    },
     "user-profile": {
       "projectType": "library",
       "root": "libs/user-profile",

apps/devto/src/app/app.component.spec.ts

@@ -15,19 +15,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'devto'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('devto');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain(
-      'devto app is running!'
-    );
-  });
 });

apps/devto/src/app/app.component.ts

@@ -4,6 +4,4 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   template: '<app-header></app-header> <router-outlet></router-outlet>',
 })
-export class AppComponent {
-  title = 'devto';
-}
+export class AppComponent {}

libs/styles/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "devto",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "devto",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/styles/README.md

@@ -0,0 +1,7 @@
+# styles
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test styles` to execute the unit tests.

libs/styles/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  displayName: 'styles',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/libs/styles',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/styles/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/styles",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/styles/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@devto/styles",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^12.1.1",
+    "@angular/core": "^12.1.1"
+  },
+  "dependencies": {
+    "tslib": "^2.2.0"
+  }
+}

libs/styles/src/index.scss

@@ -0,0 +1,3 @@
+@import "./lib/global";
+@import "./lib/article-detail";
+@import "./lib/comments";

libs/styles/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/styles.module';