fix(ivy): check the presence of .css resource for styleUrls (#28770)

Prior to this change, Ivy and VE CSS resource resolution was different: in addition to specified styleUrl (with .scss, .less and .styl extensions), VE also makes an attempt to resolve resource with .css extension. This change introduces similar logic for Ivy to make sure Ivy behavior is backwards compatible.

PR Close #28770

packages/compiler-cli/src/ngtsc/resource_loader.ts

@@ -11,6 +11,8 @@ import * as ts from 'typescript';
 import {CompilerHost} from '../transformers/api';
 import {ResourceLoader} from './annotations/src/api';
 
+const CSS_PREPROCESSOR_EXT = /(\.scss|\.less|\.styl)$/;
+
 /**
  * `ResourceLoader` which delegates to a `CompilerHost` resource loading method.
  */
@@ -123,6 +125,16 @@ export class HostResourceLoader implements ResourceLoader {
     for (const candidate of candidateLocations) {
       if (fs.existsSync(candidate)) {
         return candidate;
+      } else if (CSS_PREPROCESSOR_EXT.test(candidate)) {
+        /**
+         * If the user specified styleUrl points to *.scss, but the Sass compiler was run before
+         * Angular, then the resource may have been generated as *.css. Simply try the resolution
+         * again.
+         */
+        const cssFallbackUrl = candidate.replace(CSS_PREPROCESSOR_EXT, '.css');
+        if (fs.existsSync(cssFallbackUrl)) {
+          return cssFallbackUrl;
+        }
       }
     }
     return null;

packages/compiler-cli/test/ngtsc/ngtsc_spec.ts

@@ -311,6 +311,26 @@ describe('ngtsc behavioral tests', () => {
     expect(jsContents).toContain('background-color: blue');
   });
 
+  it('should compile components with styleUrls with fallback to .css extension', () => {
+    env.tsconfig();
+    env.write('test.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'test-cmp',
+          styleUrls: ['./dir/style.scss'],
+          template: '',
+        })
+        export class TestCmp {}
+    `);
+    env.write('dir/style.css', ':host { background-color: blue; }');
+
+    env.driveMain();
+
+    const jsContents = env.getContents('test.js');
+    expect(jsContents).toContain('background-color: blue');
+  });
+
   it('should compile NgModules without errors', () => {
     env.tsconfig();
     env.write('test.ts', `