feat(vite-plugin-angular): add support for styleUrl in component deco…

…rator (#784)
analogjs · Dec 7, 2023 · 4ae30a9 · 4ae30a9
1 parent c80d05f
commit 4ae30a9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 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
@@ -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
@@ -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(',');