From 03cae4cb0766b230ce73f5bc47af5de251b02e23 Mon Sep 17 00:00:00 2001
From: Denis Frenademetz <denisfrenademetz97@gmail.com>
Date: Thu, 12 Sep 2024 10:58:17 +0200
Subject: [PATCH] fix(transformers): handle template literals in styles or
 styleUrl property (#2735) (#2736)

fixes #2735
---
 .../__tests__/replace-resource.spec.ts        | 21 ++++++++++++++++++-
 e2e/ng-jit-transformers/bar.component.ts      | 16 ++++++++++++++
 src/transformers/replace-resources.ts         |  4 ++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/e2e/ng-jit-transformers/__tests__/replace-resource.spec.ts b/e2e/ng-jit-transformers/__tests__/replace-resource.spec.ts
index 8f6dbe87b9..386a78dcba 100644
--- a/e2e/ng-jit-transformers/__tests__/replace-resource.spec.ts
+++ b/e2e/ng-jit-transformers/__tests__/replace-resource.spec.ts
@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
-import { BarComponent, DATA_TOKEN } from '../bar.component';
+import { BarComponent, StringStylesBarComponent, DATA_TOKEN } from '../bar.component';
 
 test('templateUrl/styleUrls/styles should work', () => {
     TestBed.configureTestingModule({
@@ -20,3 +20,22 @@ test('templateUrl/styleUrls/styles should work', () => {
     expect(window.getComputedStyle(elementToFind).color).toEqual('');
     expect(window.getComputedStyle(elementToFind).fontSize).toEqual('');
 });
+
+test('styleUrl/styles string should work', () => {
+    TestBed.configureTestingModule({
+        imports: [StringStylesBarComponent],
+        providers: [
+            {
+                provide: DATA_TOKEN,
+                useValue: {},
+            },
+        ],
+    });
+    const fixture = TestBed.createComponent(StringStylesBarComponent);
+    fixture.detectChanges();
+
+    const elementToFind = fixture.debugElement.nativeElement.querySelector('p');
+    expect(elementToFind).toBeDefined();
+    expect(window.getComputedStyle(elementToFind).color).toEqual('');
+    expect(window.getComputedStyle(elementToFind).fontSize).toEqual('');
+});
diff --git a/e2e/ng-jit-transformers/bar.component.ts b/e2e/ng-jit-transformers/bar.component.ts
index 46801fa733..a943d19b9f 100644
--- a/e2e/ng-jit-transformers/bar.component.ts
+++ b/e2e/ng-jit-transformers/bar.component.ts
@@ -24,3 +24,19 @@ export const DATA_TOKEN = new InjectionToken<ServerError>('DataToken');
 export class BarComponent {
     constructor(@Inject(DATA_TOKEN) public data: ServerError) {}
 }
+
+@Component({
+    standalone: true,
+    selector: 'bar',
+    templateUrl: `./bar.component.html`,
+    styleUrl: `./bar.component.scss`,
+    // we have to setup styles this way, since simple styles/styleUrs properties will be removed (jest does not unit test styles)
+    styles: `
+            p {
+                color: red;
+            }
+        `,
+})
+export class StringStylesBarComponent {
+    constructor(@Inject(DATA_TOKEN) public data: ServerError) {}
+}
diff --git a/src/transformers/replace-resources.ts b/src/transformers/replace-resources.ts
index fda9a6fd3c..b0e7bcadf2 100644
--- a/src/transformers/replace-resources.ts
+++ b/src/transformers/replace-resources.ts
@@ -236,7 +236,7 @@ function visitComponentMetadata(
             return nodeFactory.updatePropertyAssignment(node, nodeFactory.createIdentifier(TEMPLATE), importName);
 
         case STYLES:
-            if (!ts.isArrayLiteralExpression(node.initializer) && !ts.isStringLiteral(node.initializer)) {
+            if (!ts.isArrayLiteralExpression(node.initializer) && !ts.isStringLiteralLike(node.initializer)) {
                 return node;
             }
 
@@ -250,7 +250,7 @@ function visitComponentMetadata(
             return undefined;
 
         case STYLE_URL:
-            if (!ts.isStringLiteral(node.initializer)) {
+            if (!ts.isStringLiteralLike(node.initializer)) {
                 return node;
             }