feat(angular): add support to sass style to the generator

docs/angular/api-angular/generators/application.md

@@ -186,7 +186,7 @@ Default: `css`
 
 Type: `string`
 
-Possible values: `css`, `scss`, `less`
+Possible values: `css`, `scss`, `sass`, `less`
 
 The file extension to be used for style files.
 

docs/node/api-angular/generators/application.md

@@ -186,7 +186,7 @@ Default: `css`
 
 Type: `string`
 
-Possible values: `css`, `scss`, `less`
+Possible values: `css`, `scss`, `sass`, `less`
 
 The file extension to be used for style files.
 

docs/react/api-angular/generators/application.md

@@ -186,7 +186,7 @@ Default: `css`
 
 Type: `string`
 
-Possible values: `css`, `scss`, `less`
+Possible values: `css`, `scss`, `sass`, `less`
 
 The file extension to be used for style files.
 

packages/angular/src/generators/application/application.spec.ts

@@ -313,6 +313,24 @@ describe('app', () => {
     });
   });
 
+  describe('--style sass', () => {
+    it('should generate sass styles', async () => {
+      await generateApp(appTree, 'myApp', { style: 'sass' });
+      expect(appTree.exists('apps/my-app/src/app/app.component.sass')).toEqual(
+        true
+      );
+    });
+  });
+
+  describe('--style less', () => {
+    it('should generate less styles', async () => {
+      await generateApp(appTree, 'myApp', { style: 'less' });
+      expect(appTree.exists('apps/my-app/src/app/app.component.less')).toEqual(
+        true
+      );
+    });
+  });
+
   describe('--skipFormat', () => {
     it('should format files by default', async () => {
       const spy = jest.spyOn(devkit, 'formatFiles');

packages/angular/src/generators/application/lib/nrwl-home-tpl.ts

@@ -222,4 +222,101 @@ export const nrwlHomeTemplate = {
     margin-right: 4px;
   }
     `,
+  sass: `
+/*
+ * Remove template code below
+ */
+\:host
+  display: block
+  font-family: sans-serif
+  min-width: 300px
+  max-width: 600px
+  margin: 50px auto
+.gutter-left
+  margin-left: 9px
+.col-span-2
+  grid-column: span 2
+.flex
+  display: flex
+  align-items: center
+  justify-content: center
+header
+  background-color: #143055
+  color: white
+  padding: 5px
+  border-radius: 3px
+main
+  padding: 0 36px
+p
+  text-align: center
+h1
+  text-align: center
+  margin-left: 18px
+  font-size: 24px
+h2
+  text-align: center
+  font-size: 20px
+  margin: 40px 0 10px 0
+.resources
+  text-align: center
+  list-style: none
+  padding: 0
+  display: grid
+  grid-gap: 9px
+  grid-template-columns: 1fr 1fr
+.resource
+  color: #0094ba
+  height: 36px
+  background-color: rgba(0, 0, 0, 0)
+  border: 1px solid rgba(0, 0, 0, 0.12)
+  border-radius: 4px
+  padding: 3px 9px
+  text-decoration: none
+  &:hover
+    background-color: rgba(68, 138, 255, 0.04)
+pre
+  padding: 9px
+  border-radius: 4px
+  background-color: black
+  color: #eee
+details
+  border-radius: 4px
+  color: #333
+  background-color: rgba(0, 0, 0, 0)
+  border: 1px solid rgba(0, 0, 0, 0.12)
+  padding: 3px 9px
+  margin-bottom: 9px
+summary
+  cursor: pointer
+  outline: none
+  height: 36px
+  line-height: 36px
+.github-star-container
+  margin-top: 12px
+  line-height: 20px
+  a
+    display: flex
+    align-items: center
+    text-decoration: none
+    color: #333
+.github-star-badge
+  color: #24292e
+  display: flex
+  align-items: center
+  font-size: 12px
+  padding: 3px 10px
+  border: 1px solid rgba(27, 31, 35, .2)
+  border-radius: 3px
+  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%)
+  margin-left: 4px
+  font-weight: 600
+  &:hover
+    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%)
+    border-color: rgba(27, 31, 35, .35)
+    background-position: -.5em
+  .material-icons
+    height: 16px
+    width: 16px
+    margin-right: 4px
+  `,
 };

packages/angular/src/generators/application/lib/update-component-styles.ts

@@ -8,11 +8,12 @@ import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-util
 import { nrwlHomeTemplate } from './nrwl-home-tpl';
 
 export function updateComponentStyles(host: Tree, options: NormalizedSchema) {
-  const content = nrwlHomeTemplate.css;
+  const content = nrwlHomeTemplate[options.style === 'sass' ? 'sass' : 'css'];
 
   if (!options.inlineStyle) {
     const filesMap = {
       css: `${options.appProjectRoot}/src/app/app.component.css`,
+      sass: `${options.appProjectRoot}/src/app/app.component.sass`,
       scss: `${options.appProjectRoot}/src/app/app.component.scss`,
       less: `${options.appProjectRoot}/src/app/app.component.less`,
     };

packages/angular/src/generators/application/schema.json

@@ -23,6 +23,7 @@
       "description": "The file extension to be used for style files.",
       "type": "string",
       "default": "css",
+      "enum": ["css", "scss", "sass", "less"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
@@ -35,6 +36,10 @@
             "value": "scss",
             "label": "SASS(.scss)  [ http://sass-lang.com   ]"
           },
+          {
+            "value": "sass",
+            "label": "SASS(.sass)  [ http://sass-lang.com   ]"
+          },
           {
             "value": "less",
             "label": "LESS         [ http://lesscss.org     ]"

packages/angular/src/generators/utils/types.ts

@@ -1 +1 @@
-export type Styles = 'css' | 'less' | 'scss';
+export type Styles = 'css' | 'less' | 'scss' | 'sass';