Skip to content

fix(angular): use SASS indented syntax in nx-welcome component when style is sass #34510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Coly010 merged 1 commit into from
Feb 23, 2026
Merged

fix(angular): use SASS indented syntax in nx-welcome component when style is sass #34510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions packages/angular/src/generators/application/application.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,13 +563,46 @@ describe('app', () => {
await generateApp(appTree, 'my-app', { style: 'scss' });
expect(appTree.exists('my-app/src/app/app.scss')).toEqual(true);
});

it('should generate nx-welcome component with CSS syntax for scss', async () => {
await generateApp(appTree, 'my-app', { style: 'scss' });
const nxWelcomeContent = appTree.read(
'my-app/src/app/nx-welcome.ts',
'utf-8'
);
const styleMatch = nxWelcomeContent.match(/<style>([\s\S]*?)<\/style>/);
expect(styleMatch).toBeTruthy();
const styleContent = styleMatch[1];
// CSS/SCSS syntax should contain { and }
expect(styleContent).toContain('{');
expect(styleContent).toContain('}');
});
});

describe('--style sass', () => {
it('should generate sass styles', async () => {
await generateApp(appTree, 'my-app', { style: 'sass' });
expect(appTree.exists('my-app/src/app/app.sass')).toEqual(true);
});

it('should generate nx-welcome component with SASS indented syntax', async () => {
await generateApp(appTree, 'my-app', { style: 'sass' });
const nxWelcomeContent = appTree.read(
'my-app/src/app/nx-welcome.ts',
'utf-8'
);
const styleMatch = nxWelcomeContent.match(/<style>([\s\S]*?)<\/style>/);
expect(styleMatch).toBeTruthy();
const styleContent = styleMatch[1];
// SASS indented syntax should not contain { or }
expect(styleContent).not.toContain('{');
expect(styleContent).not.toContain('}');
// SASS indented syntax should not contain ; at end of property lines
expect(styleContent).not.toMatch(/;\s*$/m);
// Should contain valid SASS selectors
expect(styleContent).toContain('html');
expect(styleContent).toContain('body');
});
});

describe('--style less', () => {
Expand Down
336 changes: 336 additions & 0 deletions ...on/files/nx-welcome/claimed/ng-module/src/app/nx-welcome__componentFileSuffix__.ts__tpl__
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,341 @@ import { Component, ViewEncapsulation } from '@angular/core';
Delete this file and get started with your project!
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
-->
<% if (style === 'sass') { %>
<style>
html
-webkit-text-size-adjust: 100%
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'
line-height: 1.5
tab-size: 4
scroll-behavior: smooth
body
font-family: inherit
line-height: inherit
margin: 0
h1, h2, p, pre
margin: 0
*, ::before, ::after
box-sizing: border-box
border-width: 0
border-style: solid
border-color: currentColor
h1, h2
font-size: inherit
font-weight: inherit
a
color: inherit
text-decoration: inherit
pre
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace
svg
display: block
vertical-align: middle
svg
shape-rendering: auto
text-rendering: optimizeLegibility
pre
background-color: rgba(55, 65, 81, 1)
border-radius: 0.25rem
color: rgba(229, 231, 235, 1)
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace
overflow: auto
padding: 0.5rem 0.75rem
.shadow
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05)
.rounded
border-radius: 1.5rem
.wrapper
width: 100%
.container
margin-left: auto
margin-right: auto
max-width: 768px
padding-bottom: 3rem
padding-left: 1rem
padding-right: 1rem
color: rgba(55, 65, 81, 1)
width: 100%
#welcome
margin-top: 2.5rem
#welcome h1
font-size: 3rem
font-weight: 500
letter-spacing: -0.025em
line-height: 1
#welcome span
display: block
font-size: 1.875rem
font-weight: 300
line-height: 2.25rem
margin-bottom: 0.5rem
#hero
align-items: center
background-color: hsla(214, 62%, 21%, 1)
border: none
box-sizing: border-box
color: rgba(55, 65, 81, 1)
display: grid
grid-template-columns: 1fr
margin-top: 3.5rem
#hero .text-container
color: rgba(255, 255, 255, 1)
padding: 3rem 2rem
#hero .text-container h2
font-size: 1.5rem
line-height: 2rem
position: relative
#hero .text-container h2 svg
color: hsla(162, 47%, 50%, 1)
height: 2rem
left: -0.25rem
position: absolute
top: 0
width: 2rem
#hero .text-container h2 span
margin-left: 2.5rem
#hero .text-container a
background-color: rgba(255, 255, 255, 1)
border-radius: 0.75rem
color: rgba(55, 65, 81, 1)
display: inline-block
margin-top: 1.5rem
padding: 1rem 2rem
text-decoration: inherit
#hero .logo-container
display: none
justify-content: center
padding-left: 2rem
padding-right: 2rem
#hero .logo-container svg
color: rgba(255, 255, 255, 1)
width: 66.666667%
#middle-content
align-items: flex-start
display: grid
grid-template-columns: 1fr
margin-top: 3.5rem
#middle-content #middle-left-content
display: flex
flex-direction: column
gap: 2rem
#learning-materials
padding: 2.5rem 2rem
#learning-materials h2
font-weight: 500
font-size: 1.25rem
letter-spacing: -0.025em
line-height: 1.75rem
padding-left: 1rem
padding-right: 1rem
.list-item-link
align-items: center
border-radius: 0.75rem
display: flex
margin-top: 1rem
padding: 1rem
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
transition-duration: 150ms
width: 100%
.list-item-link svg:first-child
margin-right: 1rem
height: 1.5rem
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
transition-duration: 150ms
width: 1.5rem
.list-item-link > span
flex-grow: 1
font-weight: 400
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
.list-item-link > span > span
color: rgba(107, 114, 128, 1)
display: block
flex-grow: 1
font-size: 0.75rem
font-weight: 300
line-height: 1rem
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
.list-item-link svg:last-child
height: 1rem
transition-property: all
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
transition-duration: 150ms
width: 1rem
.list-item-link:hover
color: rgba(255, 255, 255, 1)
background-color: hsla(162, 55%, 33%, 1)
.list-item-link:hover > span > span
color: rgba(243, 244, 246, 1)
.list-item-link:hover svg:last-child
transform: translateX(0.25rem)
.button-pill
padding: 1.5rem 2rem
margin-bottom: 2rem
transition-duration: 300ms
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
align-items: center
display: flex
.button-pill svg
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
transition-duration: 150ms
flex-shrink: 0
width: 3rem
.button-pill > span
letter-spacing: -0.025em
font-weight: 400
font-size: 1.125rem
line-height: 1.75rem
padding-left: 1rem
padding-right: 1rem
.button-pill span span
display: block
font-size: 0.875rem
font-weight: 300
line-height: 1.25rem
.button-pill:hover svg, .button-pill:hover
color: rgba(255, 255, 255, 1) !important
.nx-console:hover
background-color: rgba(0, 122, 204, 1)
.nx-console svg
color: rgba(0, 122, 204, 1)
.nx-console-jetbrains
margin-top: 2rem
.nx-console-jetbrains:hover
background-color: rgba(255, 49, 140, 1)
.nx-console-jetbrains svg
color: rgba(255, 49, 140, 1)
#nx-repo:hover
background-color: rgba(24, 23, 23, 1)
#nx-repo svg
color: rgba(24, 23, 23, 1)
#nx-cloud
margin-bottom: 2rem
margin-top: 2rem
padding: 2.5rem 2rem
#nx-cloud > div
align-items: center
display: flex
#nx-cloud > div svg
border-radius: 0.375rem
flex-shrink: 0
width: 3rem
#nx-cloud > div h2
font-size: 1.125rem
font-weight: 400
letter-spacing: -0.025em
line-height: 1.75rem
padding-left: 1rem
padding-right: 1rem
#nx-cloud > div h2 span
display: block
font-size: 0.875rem
font-weight: 300
line-height: 1.25rem
#nx-cloud p
font-size: 1rem
line-height: 1.5rem
margin-top: 1rem
#nx-cloud pre
margin-top: 1rem
#nx-cloud a
border-radius: 0.75rem
color: white
background-color: hsla(214, 62%, 21%, 1)
display: inline-block
margin-top: 1.5rem
padding: 0.5rem 1rem
text-align:left
text-decoration: inherit
#commands
padding: 2.5rem 2rem
margin-top: 3.5rem
#commands h2
font-size: 1.25rem
font-weight: 400
letter-spacing: -0.025em
line-height: 1.75rem
padding-left: 1rem
padding-right: 1rem
#commands p
font-size: 1rem
font-weight: 300
line-height: 1.5rem
margin-top: 1rem
padding-left: 1rem
padding-right: 1rem
details
align-items: center
display: flex
margin-top: 1rem
padding-left: 1rem
padding-right: 1rem
width: 100%
details pre > span
color: rgba(181, 181, 181, 1)
summary
border-radius: 0.5rem
display: flex
font-weight: 400
padding: 0.5rem
cursor: pointer
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter,
-webkit-backdrop-filter
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
transition-duration: 150ms
summary:hover
background-color: rgba(243, 244, 246, 1)
summary svg
height: 1.5rem
margin-right: 1rem
width: 1.5rem
#love
color: rgba(107, 114, 128, 1)
font-size: 0.875rem
line-height: 1.25rem
margin-top: 3.5rem
opacity: 0.6
text-align: center
#love svg
color: rgba(252, 165, 165, 1)
width: 1.25rem
height: 1.25rem
display: inline
margin-top: -0.25rem
@media screen and (min-width: 768px)
#hero
grid-template-columns: repeat(2, minmax(0, 1fr))
#hero .logo-container
display: flex
#middle-content
grid-template-columns: repeat(2, minmax(0, 1fr))
gap: 4rem
</style>
<% } else { %>
<style>
html {
-webkit-text-size-adjust: 100%;
Expand Down Expand Up @@ -425,6 +760,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
}
}
</style>
<% } %>
<div class="wrapper">
<div class="container">
<!-- WELCOME -->
Expand Down
Loading
Loading