From 4ae30a9fb96196dfb7b0999c8ac40524ead83fac Mon Sep 17 00:00:00 2001
From: Brandon Roberts <robertsbt@gmail.com>
Date: Thu, 7 Dec 2023 07:33:27 -0600
Subject: [PATCH] feat(vite-plugin-angular): add support for styleUrl in
 component decorator (#784)

---
 .../src/lib/component-resolvers.spec.ts       | 19 ++++++++++++++++++-
 .../src/lib/component-resolvers.ts            |  3 ++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts b/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts
index e35ab6365..f285424d4 100644
--- a/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts
+++ b/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts
@@ -34,7 +34,7 @@ const thePathsAreEqual = (actual: string[], expected: string[]) => {
   return true;
 };
 
-describe('component-resolvers styleUrls', () => {
+describe('component-resolvers', () => {
   const id = '/path/to/src/app.component.ts';
 
   describe('matcher', () => {
@@ -55,6 +55,23 @@ describe('component-resolvers styleUrls', () => {
       expect(thePathsAreEqual(resolvedPaths, actualPaths));
     });
 
+    it('should handle single line styleUrl', () => {
+      const code = `
+        @Component({
+          styleUrl: './app.component.css'
+        })
+        export class MyComponent {}
+      `;
+
+      const actualPaths = [
+        './app.component.css|/path/to/src/app.component.css',
+      ];
+      const templateUrlsResolver = new TemplateUrlsResolver();
+      const resolvedPaths = templateUrlsResolver.resolve(code, id);
+
+      expect(thePathsAreEqual(resolvedPaths, actualPaths));
+    });
+
     it('should handle multi-line styleUrls', () => {
       const code = `
         @Component({
diff --git a/packages/vite-plugin-angular/src/lib/component-resolvers.ts b/packages/vite-plugin-angular/src/lib/component-resolvers.ts
index 057a2aa8d..fd77e7134 100644
--- a/packages/vite-plugin-angular/src/lib/component-resolvers.ts
+++ b/packages/vite-plugin-angular/src/lib/component-resolvers.ts
@@ -1,6 +1,6 @@
 import { dirname, resolve } from 'path';
 
-const styleUrlsRE = /styleUrls\s*:\s*\[([^\[]*?)\]/;
+const styleUrlsRE = /styleUrls\s*:\s*\[([^\[]*?)\]|styleUrl:\s*["'](.*?)["']/;
 const templateUrlRE = /templateUrl:\s*["'](.*?)["']/g;
 
 export function hasStyleUrls(code: string) {
@@ -50,6 +50,7 @@ export class StyleUrlsResolver {
     // "styleUrls: [\n    './app.component.scss',\n    '../global.scss'\n  ]"
     const styleUrlPaths = matchedStyleUrls
       .replace(/(styleUrls|\:|\s|\[|\]|"|')/g, '')
+      .replace(/(styleUrl|:\s*["'](.*?)["'])/g, '')
       // The above replace will result in the following:
       // "./app.component.scss,../global.scss"
       .split(',');