refactor(transformer): revert possibility of testing styles (#930)

Revert #900

Author: ahnpnl

e2e/ast-transformers/replace-resources/__tests__/bar.component.ts

@@ -27,7 +27,7 @@ test(
 
     const elementToFind = fixture.debugElement.nativeElement.querySelector('p');
     expect(elementToFind).toBeDefined();
-    expect(window.getComputedStyle(elementToFind).color).toEqual('red');
+    expect(window.getComputedStyle(elementToFind).color).toEqual('');
     expect(window.getComputedStyle(elementToFind).fontSize).toEqual('');
   }),
 );

e2e/custom-typings/yarn.lock

@@ -1,30 +1,15 @@
-# This file is generated by running "yarn install" inside your project.
-# Manual changes might be lost - proceed with caution!
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
 
-__metadata:
-  version: 4
-  cacheKey: 7
 
-"@types/jquery@npm:^3.5.5":
-  version: 3.5.5
-  resolution: "@types/jquery@npm:3.5.5"
+"@types/jquery@^3.5.5":
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.5.tgz#2c63f47c9c8d96693d272f5453602afd8338c903"
+  integrity sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==
   dependencies:
-    "@types/sizzle": "*"
-  checksum: 9e3c34451577c6916ac9de8a26fd8bce2831cb5861116514cba4a984189067635a3e084039308324d8e20bfa5f2e1ce7725a509110e5e05487b91f9369b1ae43
-  languageName: node
-  linkType: hard
+    "@types/sizzle" "*"
 
-"@types/sizzle@npm:*":
-  version: 2.3.3
-  resolution: "@types/sizzle@npm:2.3.3"
-  checksum: 8f019f9e1b110b4fdfc08f8a3a8b8b87118a11f3ba11e159541b17f17498c0ef95e8efa0b818c9fed6911041f6b71ef8d44cf8c1c83b4cbb7bd14e4248892f4c
-  languageName: node
-  linkType: hard
-
-"root-workspace-0b6124@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "root-workspace-0b6124@workspace:."
-  dependencies:
-    "@types/jquery": ^3.5.5
-  languageName: unknown
-  linkType: soft
+"@types/sizzle@*":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
+  integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==

src/__tests__/__snapshots__/replace-resources.spec.ts.snap

@@ -15,7 +15,6 @@ AppComponent = tslib_1.__decorate([
     core_1.Component({
         selector: 'app-root',
         template: require(\\"./app.component.html\\"),
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], AppComponent);
 exports.AppComponent = AppComponent;
@@ -35,7 +34,6 @@ AppComponent = __decorate([
     Component({
         selector: 'app-root',
         template: __NG_CLI_RESOURCE__0,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], AppComponent);
 export { AppComponent };
@@ -57,7 +55,6 @@ FooComponent = tslib_1.__decorate([
     core_1.Component({
         selector: 'app-root',
         template: \`<h1>Foo Bar</h1>\`,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], FooComponent);
 exports.FooComponent = FooComponent;
@@ -76,7 +73,6 @@ FooComponent = __decorate([
     Component({
         selector: 'app-root',
         template: \`<h1>Foo Bar</h1>\`,
-        styles: [\\"\\\\n      h1 {\\\\n        font-size: 1.6rem;\\\\n      }\\\\n    \\"]
     })
 ], FooComponent);
 export { FooComponent };

src/transformers/replace-resources.ts

@@ -17,7 +17,7 @@ const shouldTransform = (fileName: string) => !fileName.endsWith('.ngfactory.ts'
  *
  * Check `@Component` to do following things:
  * - Replace `templateUrl` path with `require` for `CommonJS` or a constant with `import` for `ESM`
- * - Combine `styles` and `styleUrls` to become `styles` with empty array as value because we don't test css
+ * - Remove `styles` and `styleUrls` because we don't test css
  *
  * @example
  *
@@ -33,7 +33,6 @@ const shouldTransform = (fileName: string) => !fileName.endsWith('.ngfactory.ts'
  * @Component({
  *   selector: 'foo',
  *   templateUrl: require('./foo.component.html'),
- *   styles: [],
  * })
  *
  * or for `ESM`
@@ -42,7 +41,6 @@ const shouldTransform = (fileName: string) => !fileName.endsWith('.ngfactory.ts'
  * @Component({
  *   selector: 'foo',
  *   templateUrl: __NG_CLI_RESOURCE__0,
- *   styles: [],
  * })
  */
 export function replaceResources({ program }: TsCompilerInstance): ts.TransformerFactory<ts.SourceFile> {
@@ -141,7 +139,7 @@ function visitDecorator(
   // visit all properties
   let properties = ts.visitNodes(objectExpression.properties, (node) =>
     ts.isObjectLiteralElementLike(node)
-      ? visitComponentMetadata(nodeFactory, node, styleReplacements, resourceImportDeclarations, moduleKind)
+      ? visitComponentMetadata(nodeFactory, node, resourceImportDeclarations, moduleKind)
       : node,
   );
 
@@ -180,7 +178,6 @@ function visitDecorator(
 function visitComponentMetadata(
   nodeFactory: ts.NodeFactory,
   node: ts.ObjectLiteralElementLike,
-  styleReplacements: ts.Expression[],
   resourceImportDeclarations: ts.ImportDeclaration[],
   moduleKind?: ts.ModuleKind,
 ): ts.ObjectLiteralElementLike | undefined {
@@ -208,38 +205,6 @@ function visitComponentMetadata(
         : ts.updatePropertyAssignment(node, ts.createIdentifier(TEMPLATE), importName);
 
     case STYLES:
-      if (!ts.isArrayLiteralExpression(node.initializer)) {
-        return node;
-      }
-      const isInlineStyles = name === STYLES;
-      // @ts-expect-error should be fine
-      const styles = ts.visitNodes(node.initializer.elements, (node) => {
-        if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
-          return node;
-        }
-
-        let url;
-        if (isInlineStyles) {
-          return useNodeFactory ? nodeFactory.createStringLiteral(node.text) : ts.createLiteral(node.text);
-        } else {
-          url = getResourceUrl(node);
-        }
-
-        if (!url) {
-          return node;
-        }
-
-        return createResourceImport(nodeFactory, url, resourceImportDeclarations, moduleKind);
-      });
-
-      // Styles should be placed first
-      if (isInlineStyles) {
-        styleReplacements.unshift(...styles);
-      } else {
-        styleReplacements.push(...styles);
-      }
-
-      return undefined;
     case STYLE_URLS:
       if (!ts.isArrayLiteralExpression(node.initializer)) {
         return node;
@@ -251,7 +216,7 @@ function visitComponentMetadata(
   }
 }
 
-export function getResourceUrl(node: ts.Node): string | null {
+function getResourceUrl(node: ts.Node): string | null {
   // only analyze strings
   if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
     return null;