fix(transformers): handle template literals in styles or styleUrl pro…

…perty (#2735) (#2736) fixes #2735
thymikee · Sep 12, 2024 · 03cae4c · 03cae4c
1 parent 2b28777
commit 03cae4c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;
             }