diff --git a/docs/angular/api-angular/generators/application.md b/docs/angular/api-angular/generators/application.md index a3689ec8b2..ae792ec338 100644 --- a/docs/angular/api-angular/generators/application.md +++ b/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. diff --git a/docs/node/api-angular/generators/application.md b/docs/node/api-angular/generators/application.md index 8322682410..10649344ef 100644 --- a/docs/node/api-angular/generators/application.md +++ b/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. diff --git a/docs/react/api-angular/generators/application.md b/docs/react/api-angular/generators/application.md index 8322682410..10649344ef 100644 --- a/docs/react/api-angular/generators/application.md +++ b/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. diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts index f50e13baa0..e45168962b 100644 --- a/packages/angular/src/generators/application/application.spec.ts +++ b/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'); diff --git a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts index 7a7d36f3a1..19cf18b347 100644 --- a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts +++ b/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 + `, }; diff --git a/packages/angular/src/generators/application/lib/update-component-styles.ts b/packages/angular/src/generators/application/lib/update-component-styles.ts index 1ee7c03b76..d5f1cd1fd8 100644 --- a/packages/angular/src/generators/application/lib/update-component-styles.ts +++ b/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`, }; diff --git a/packages/angular/src/generators/application/schema.json b/packages/angular/src/generators/application/schema.json index 9119cff67e..268e097f1b 100644 --- a/packages/angular/src/generators/application/schema.json +++ b/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 ]" diff --git a/packages/angular/src/generators/utils/types.ts b/packages/angular/src/generators/utils/types.ts index 5253c7c29c..e132a71456 100644 --- a/packages/angular/src/generators/utils/types.ts +++ b/packages/angular/src/generators/utils/types.ts @@ -1 +1 @@ -export type Styles = 'css' | 'less' | 'scss'; +export type Styles = 'css' | 'less' | 'scss' | 'sass';