fix(@schematics/angular): set inlineStyleLanguage when application …

…`style` option is used The `style` option for the application schematic specifies the language/preprocessor to use for the application's external style files and should also setup the default for inline styles as well via the `inlineStyleLanguage` build option. The value can be adjusted after application generation if needed. (cherry picked from commit fdf41b2)
angular · Apr 19, 2021 · 1bf976f · 1bf976f
1 parent 88bea1a
commit 1bf976f
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts
@@ -140,6 +140,11 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
     ];
   }
 
+  const inlineStyleLanguage =
+    options.style && options.style !== Style.Css && options.style !== Style.Styl
+      ? options.style
+      : undefined;
+
   const project = {
     root: normalize(projectRoot),
     sourceRoot,
@@ -157,6 +162,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
           polyfills: `${sourceRoot}/polyfills.ts`,
           tsConfig: `${projectRoot}tsconfig.app.json`,
           aot: true,
+          inlineStyleLanguage,
           assets: [
             `${sourceRoot}/favicon.ico`,
             `${sourceRoot}/assets`,
@@ -212,6 +218,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
           polyfills: `${sourceRoot}/polyfills.ts`,
           tsConfig: `${projectRoot}tsconfig.spec.json`,
           karmaConfig: `${projectRoot}karma.conf.js`,
+          inlineStyleLanguage,
           assets: [
             `${sourceRoot}/favicon.ico`,
             `${sourceRoot}/assets`,

diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
@@ -399,6 +399,66 @@ describe('Application Schematic', () => {
       expect(tree.exists('src/styles.sass')).toBe(true);
     });
 
+    it('sets "inlineStyleLanguage" in angular.json when using a style preprocessor', async () => {
+      const options = { ...defaultOptions, projectRoot: '', style: Style.Sass };
+      const tree = await schematicRunner
+        .runSchematicAsync('application', options, workspaceTree)
+        .toPromise();
+      const config = JSON.parse(tree.readContent('/angular.json'));
+      const prj = config.projects.foo;
+
+      const buildOpt = prj.architect.build.options;
+      expect(buildOpt.inlineStyleLanguage).toBe('sass');
+
+      const testOpt = prj.architect.test.options;
+      expect(testOpt.inlineStyleLanguage).toBe('sass');
+    });
+
+    it('does not set "inlineStyleLanguage" in angular.json when not using a style preprocessor', async () => {
+      const options = { ...defaultOptions, projectRoot: ''};
+      const tree = await schematicRunner
+        .runSchematicAsync('application', options, workspaceTree)
+        .toPromise();
+      const config = JSON.parse(tree.readContent('/angular.json'));
+      const prj = config.projects.foo;
+
+      const buildOpt = prj.architect.build.options;
+      expect(buildOpt.inlineStyleLanguage).toBeUndefined();
+
+      const testOpt = prj.architect.test.options;
+      expect(testOpt.inlineStyleLanguage).toBeUndefined();
+    });
+
+    it('does not set "inlineStyleLanguage" in angular.json when using CSS styles', async () => {
+      const options = { ...defaultOptions, projectRoot: '', style: Style.Css };
+      const tree = await schematicRunner
+        .runSchematicAsync('application', options, workspaceTree)
+        .toPromise();
+      const config = JSON.parse(tree.readContent('/angular.json'));
+      const prj = config.projects.foo;
+
+      const buildOpt = prj.architect.build.options;
+      expect(buildOpt.inlineStyleLanguage).toBeUndefined();
+
+      const testOpt = prj.architect.test.options;
+      expect(testOpt.inlineStyleLanguage).toBeUndefined();
+    });
+
+    it('does not set "inlineStyleLanguage" in angular.json when using Stylus styles', async () => {
+      const options = { ...defaultOptions, projectRoot: '', style: Style.Styl };
+      const tree = await schematicRunner
+        .runSchematicAsync('application', options, workspaceTree)
+        .toPromise();
+      const config = JSON.parse(tree.readContent('/angular.json'));
+      const prj = config.projects.foo;
+
+      const buildOpt = prj.architect.build.options;
+      expect(buildOpt.inlineStyleLanguage).toBeUndefined();
+
+      const testOpt = prj.architect.test.options;
+      expect(testOpt.inlineStyleLanguage).toBeUndefined();
+    });
+
     it('should set the relative tsconfig paths', async () => {
       const options = { ...defaultOptions, projectRoot: '' };
       const tree = await schematicRunner.runSchematicAsync('application', options, workspaceTree)