Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): correctly handle sass imports
Browse files Browse the repository at this point in the history
Prior to this change nested imports in sass were processed as scss when using the esbuild builder due to an incorrect check.

Closes #25338

(cherry picked from commit cc09b70)
  • Loading branch information
alan-agius4 committed Jun 8, 2023
1 parent 7e8cc32 commit eebb54c
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,10 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {

let syntax: Syntax | undefined;
switch (extname(stylesheetPath).toLowerCase()) {
case 'css':
case '.css':
syntax = 'css';
break;
case 'sass':
case '.sass':
syntax = 'indented';
break;
default:
Expand Down
43 changes: 43 additions & 0 deletions tests/legacy-cli/e2e/tests/build/styles/sass.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import {
writeMultipleFiles,
deleteFile,
expectFileToMatch,
replaceInFile,
} from '../../../utils/fs';
import { expectToFail } from '../../../utils/utils';
import { ng } from '../../../utils/process';
import { updateJsonFile } from '../../../utils/project';

export default async function () {
await writeMultipleFiles({
'src/styles.sass': `
@import './imported-styles.sass'
body
background-color: blue
`,
'src/imported-styles.sass': `
p
background-color: red
`,
'src/app/app.component.sass': `
.outer
.inner
background: #fff
`,
});

await updateJsonFile('angular.json', (workspaceJson) => {
const appArchitect = workspaceJson.projects['test-project'].architect;
appArchitect.build.options.styles = [{ input: 'src/styles.sass' }];
});

await deleteFile('src/app/app.component.css');
await replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.sass');

await ng('build', '--source-map', '--configuration=development');

await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/);
await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/);
await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""'));
await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/);
}

0 comments on commit eebb54c

Please sign in to comment.