From 72d043f66916e0cd4ce364308c0f004262a67eaa Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Fri, 15 Feb 2019 15:57:05 -0800
Subject: [PATCH] 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
---
 .../compiler-cli/src/ngtsc/resource_loader.ts | 12 +++++++++++
 .../compiler-cli/test/ngtsc/ngtsc_spec.ts     | 20 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/packages/compiler-cli/src/ngtsc/resource_loader.ts b/packages/compiler-cli/src/ngtsc/resource_loader.ts
index f728565ff80..e676a1683d1 100644
--- a/packages/compiler-cli/src/ngtsc/resource_loader.ts
+++ b/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;
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
index bc28e284d7d..05d84cae96f 100644
--- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
+++ b/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', `