feat(compiler-cli): resolve generated Sass/Less files to .css inputs (#28166)

Users might have run the CSS Preprocessor tool *before* the Angular
compiler. For example, we do it that way under Bazel. This means that
the design-time reference is different from the compile-time one - the
input to the Angular compiler is a plain .css file.

We assume that the preprocessor does a trivial 1:1 mapping using the same
basename with a different extension.

PR Close #28166

packages/compiler-cli/src/transformers/compiler_host.ts

@@ -19,6 +19,7 @@ import {DTS, GENERATED_FILES, isInRootDir, relativeToRootDirs} from './util';
 
 const NODE_MODULES_PACKAGE_NAME = /node_modules\/((\w|-|\.)+|(@(\w|-|\.)+\/(\w|-|\.)+))/;
 const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+const CSS_PREPROCESSOR_EXT = /(\.scss|\.less|\.styl)$/;
 
 export function createCompilerHost(
     {options, tsHost = ts.createCompilerHost(options, true)}:
@@ -270,8 +271,15 @@ export class TsCompilerAotCompilerTypeCheckHostAdapter implements ts.CompilerHos
     } else if (firstChar !== '.') {
       resourceName = `./${resourceName}`;
     }
-    const filePathWithNgResource =
+    let filePathWithNgResource =
         this.moduleNameToFileName(addNgResourceSuffix(resourceName), containingFile);
+    // If the user specified styleUrl pointing to *.scss, but the Sass compiler was run before
+    // Angular, then the resource may have been generated as *.css. Simply try the resolution again.
+    if (!filePathWithNgResource && CSS_PREPROCESSOR_EXT.test(resourceName)) {
+      const fallbackResourceName = resourceName.replace(CSS_PREPROCESSOR_EXT, '.css');
+      filePathWithNgResource =
+          this.moduleNameToFileName(addNgResourceSuffix(fallbackResourceName), containingFile);
+    }
     const result = filePathWithNgResource ? stripNgResourceSuffix(filePathWithNgResource) : null;
     // Used under Bazel to report more specific error with remediation advice
     if (!result && (this.context as any).reportMissingResource) {

packages/compiler-cli/test/transformers/compiler_host_spec.ts

@@ -196,7 +196,21 @@ describe('NgCompilerHost', () => {
       const host = createHost({ngHost});
       expect(host.resourceNameToFileName('a', 'b')).toBe('someResult');
     });
-
+    it('should resolve Sass imports to generated .css files', () => {
+      const host = createHost({files: {'tmp': {'src': {'a': {'style.css': 'h1: bold'}}}}});
+      expect(host.resourceNameToFileName('./a/style.scss', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/style.css');
+    });
+    it('should resolve Less imports to generated .css files', () => {
+      const host = createHost({files: {'tmp': {'src': {'a': {'style.css': 'h1: bold'}}}}});
+      expect(host.resourceNameToFileName('./a/style.less', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/style.css');
+    });
+    it('should resolve Stylus imports to generated .css files', () => {
+      const host = createHost({files: {'tmp': {'src': {'a': {'style.css': 'h1: bold'}}}}});
+      expect(host.resourceNameToFileName('./a/style.styl', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/style.css');
+    });
   });
 
   describe('getSourceFile', () => {