refactor!: move fonts to separate file (#2132)

* refactor!: move fonts to separate file * chore: remove global styles from schematic
taiga-family · Aug 9, 2022 · 85d5ede · 85d5ede
1 parent 6a83977
commit 85d5ede
Show file tree

Hide file tree

Showing 25 changed files with 170 additions and 75 deletions.
diff --git a/projects/cdk/schematics/constants/taiga-styles.ts b/projects/cdk/schematics/constants/taiga-styles.ts
@@ -0,0 +1,4 @@
+export const TAIGA_GLOBAL_STYLE =
+    'node_modules/@taiga-ui/core/styles/taiga-ui-global.less';
+export const TAIGA_THEME_STYLE = 'node_modules/@taiga-ui/core/styles/taiga-ui-theme.less';
+export const TAIGA_THEME_FONTS = 'node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less';
diff --git a/projects/cdk/schematics/ng-add/steps/add-taiga-icons.ts b/projects/cdk/schematics/ng-add/steps/add-taiga-icons.ts
@@ -13,11 +13,11 @@ const ICON_ASSETS = {
 
 export function addTaigaIcons(options: Schema): Rule {
     return async (_: Tree) => {
-        return addTaigaStylesToAngularJson(options);
+        return addTaigaAssetsToAngularJson(options);
     };
 }
 
-export function addTaigaStylesToAngularJson(options: Schema): Rule {
+export function addTaigaAssetsToAngularJson(options: Schema): Rule {
     return updateWorkspace(workspace => {
         const project = getProject(options, workspace);
 

diff --git a/projects/cdk/schematics/ng-add/steps/add-taiga-styles.ts b/projects/cdk/schematics/ng-add/steps/add-taiga-styles.ts
@@ -1,28 +1,12 @@
-import {JsonArray} from '@angular-devkit/core';
 import {Rule, Tree} from '@angular-devkit/schematics';
-import {updateWorkspace} from '@schematics/angular/utility/workspace';
-import {getProject} from '../../utils/get-project';
-import {getProjectTargetOptions} from '../../utils/get-project-target-options';
 import {Schema} from '../schema';
-
-const TAIGA_GLOBAL_STYLE = 'node_modules/@taiga-ui/core/styles/taiga-ui-global.less';
-const TAIGA_THEME_STYLE = 'node_modules/@taiga-ui/core/styles/taiga-ui-theme.less';
+import {addStylesToAngularJson} from '../../utils/add-styles';
+import {TAIGA_THEME_FONTS, TAIGA_THEME_STYLE} from '../../constants/taiga-styles';
 
 export function addTaigaStyles(options: Schema): Rule {
     return async (_: Tree) => {
-        return addTaigaStylesToAngularJson(options);
-    };
-}
+        const taigaStyles = [TAIGA_THEME_STYLE, TAIGA_THEME_FONTS];
 
-export function addTaigaStylesToAngularJson(options: Schema): Rule {
-    return updateWorkspace(workspace => {
-        const project = getProject(options, workspace);
-        const targetOptions = getProjectTargetOptions(project, 'build');
-        const styles = targetOptions.styles as JsonArray | undefined;
-        const taigaStyles = [TAIGA_GLOBAL_STYLE, TAIGA_THEME_STYLE];
-
-        targetOptions.styles = styles
-            ? Array.from(new Set([...taigaStyles, ...styles]))
-            : taigaStyles;
-    });
+        return addStylesToAngularJson(options, taigaStyles);
+    };
 }
diff --git a/projects/cdk/schematics/ng-add/tests/schematic-ng-add.spec.ts b/projects/cdk/schematics/ng-add/tests/schematic-ng-add.spec.ts
@@ -16,6 +16,7 @@ import {
     TAIGA_VERSION,
 } from '../constants/versions';
 import {Schema} from '../schema';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../collection.json');
 
@@ -110,8 +111,8 @@ describe('ng-add', () => {
             "options": {
               "main": "test/main.ts",
             "styles": [
-              "node_modules/@taiga-ui/core/styles/taiga-ui-global.less",
-              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less"
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less"
             ],
             "assets": [
               {
@@ -128,7 +129,7 @@ describe('ng-add', () => {
 }`);
     });
 
-    it('should add styles without dublicates, taiga styles first', async () => {
+    it('should add styles without duplicates, taiga styles first', async () => {
         createAngularJson({stylesExist: true});
         saveActiveProject();
 
@@ -147,8 +148,8 @@ describe('ng-add', () => {
             "options": {
               "main": "test/main.ts",
             "styles": [
-              "node_modules/@taiga-ui/core/styles/taiga-ui-global.less",
               "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
               "some.style"
             ],
             "assets": [
@@ -209,39 +210,6 @@ export class AppModule {}
     });
 });
 
-function createAngularJson(
-    {stylesExist}: {stylesExist: boolean} = {stylesExist: false},
-): void {
-    createSourceFile(
-        'angular.json',
-        `
-{
-  "version": 1,
-  "defaultProject": "demo",
-  "projects": {
-    "demo": {
-        "architect": {
-          "build": {
-            "options": {
-              "main": "test/main.ts",
-            ${
-                stylesExist
-                    ? `"styles": [
-                  "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
-                  "some.style"
-                ]
-                `
-                    : ``
-            }}
-          }
-        }
-    }
-  }
-}`,
-        {overwrite: true},
-    );
-}
-
 function createMainFiles(): void {
     createSourceFile(
         'test/main.ts',

diff --git a/projects/cdk/schematics/ng-update/index.ts b/projects/cdk/schematics/ng-update/index.ts
@@ -1,4 +1,4 @@
-import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
+import {chain, Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 import {createProject, saveActiveProject, setActiveProject} from 'ng-morph';
 import {TAIGA_VERSION} from '../ng-add/constants/versions';
 import {Schema} from '../ng-add/schema';
@@ -17,15 +17,35 @@ import {migrateProgress} from './steps/migrate-progress';
 import {DevkitFileSystem} from 'ng-morph/project/classes/devkit-file-system';
 import {FINISH_SYMBOL, START_SYMBOL, titleLog} from '../utils/colored-log';
 import {dateTimeMigrations} from './steps/migrate-date-time';
+import {addStylesToAngularJson} from '../utils/add-styles';
+import {TAIGA_THEME_FONTS} from '../constants/taiga-styles';
+const {performance} = require('perf_hooks');
 
-export function updateToV3(_: Schema): Rule {
-    return async (tree: Tree, context: SchematicContext) => {
-        const t0 = performance.now();
+export function updateToV3(options: Schema): Rule {
+    const t0 = performance.now();
+
+    titleLog(
+        `\n\n${START_SYMBOL} Your packages will be updated to @taiga-ui/*@${TAIGA_VERSION}\n`,
+    );
 
-        titleLog(
-            `\n\n${START_SYMBOL} Your packages will be updated to @taiga-ui/*@${TAIGA_VERSION}\n`,
-        );
+    return chain([
+        main(options),
+        addTaigaStyles(options),
+        () => {
+            const t1 = performance.now();
+            const sum = t1 - t0;
+            const result =
+                sum > 1000 ? `${(sum / 1000).toFixed(2)} sec.` : `${sum.toFixed(2)} ms.`;
+
+            titleLog(
+                `${FINISH_SYMBOL} We migrated packages to @taiga-ui/*@${TAIGA_VERSION} in ${result} \n`,
+            );
+        },
+    ]);
+}
 
+function main(_: Schema): Rule {
+    return async (tree: Tree, context: SchematicContext) => {
         const fileSystem = getFileSystem(tree);
 
         replaceDeepImports();
@@ -47,15 +67,14 @@ export function updateToV3(_: Schema): Rule {
         replaceFunctions();
         miscellaneousMigrations();
         saveActiveProject();
+    };
+}
 
-        const t1 = performance.now();
-        const sum = t1 - t0;
-        const result =
-            sum > 1000 ? `${(sum / 1000).toFixed(2)} sec.` : `${sum.toFixed(2)} ms.`;
+function addTaigaStyles(options: Schema): Rule {
+    return async (_: Tree) => {
+        const taigaStyles = [TAIGA_THEME_FONTS];
 
-        titleLog(
-            `${FINISH_SYMBOL} We migrated packages to @taiga-ui/*@${TAIGA_VERSION} in ${result} \n`,
-        );
+        return addStylesToAngularJson(options, taigaStyles);
     };
 }
 

diff --git a/projects/cdk/schematics/ng-update/tests/schematic-date-time.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-date-time.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -103,4 +104,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/mock.ts', 'export class TuiDay {}');
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-migrate-progress.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-migrate-progress.spec.ts
@@ -9,6 +9,7 @@ import {
 } from 'ng-morph';
 import {join} from 'path';
 import {DEPRECATED_PROGRESS_PIPES_REG} from '../steps/migrate-progress';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -160,4 +161,5 @@ describe('migrate progress', () => {
 function createMainFiles(): void {
     createSourceFile('test/app-with-progress/app.component.ts', APP_COMPONENT);
     createSourceFile('test/app-with-progress/app.template.html', TEMPLATE_BEFORE);
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-migrate-sliders.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-migrate-sliders.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -450,4 +451,5 @@ function createMainFiles(): void {
         'test/inline-html-child/inline-html-child.component.ts',
         INLINE_HTML_CHILD_COMPONENT_BEFORE,
     );
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-miscellaneous.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-miscellaneous.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -89,4 +90,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/app.component.ts', BEFORE);
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-rename-types.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-rename-types.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -163,4 +164,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/app.component.ts', BEFORE);
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-consts.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-consts.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -143,4 +144,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/app.component.ts', BEFORE);
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-deep-imports.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-deep-imports.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -59,4 +60,6 @@ export class AppComponent {}`,
     );
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-deprecated-functions.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-deprecated-functions.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -849,4 +850,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/app.component.ts', BEFORE);
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-enums.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-enums.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -79,4 +80,6 @@ export class AppComponent {
     );
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-functions.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-functions.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -97,4 +98,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/app.component.ts', BEFORE);
 
     createSourceFile('test/app/app.template.html', `<app></app>`);
+
+    createAngularJson();
 }
diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-html.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-html.spec.ts
@@ -9,6 +9,7 @@ import {
     setActiveProject,
 } from 'ng-morph';
 import {join} from 'path';
+import {createAngularJson} from '../../utils/create-angular-json';
 
 const collectionPath = join(__dirname, '../../migration.json');
 
@@ -420,6 +421,32 @@ describe('ng-update', () => {
         );
     });
 
+    it('should add font style in angular.json', async () => {
+        const tree = await runner.runSchematicAsync('updateToV3', {}, host).toPromise();
+
+        expect(tree.readContent('angular.json')).toEqual(
+            `
+{
+  "version": 1,
+  "defaultProject": "demo",
+  "projects": {
+    "demo": {
+        "architect": {
+          "build": {
+            "options": {
+              "main": "test/main.ts",
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less"
+            ]
+            }
+          }
+        }
+    }
+  }
+}`,
+        );
+    });
+
     afterEach(() => {
         resetActiveProject();
     });
@@ -433,4 +460,6 @@ function createMainFiles(): void {
     createSourceFile('test/app/test-inline.component.ts', COMPONENT_BEFORE);
 
     createSourceFile('test/app/test.module.ts', MODULE_BEFORE);
+
+    createAngularJson();
 }