Support styleUrls and styles for Angular

[nvh95]

Is your feature request related to a problem? Please describe.

@LayZeeDK opened a fantastic PR #227 to add an example of integrating jest-preview with Angular. However, jest-preview cannot process styles defined in styleUrls and styles. The situation is very similar to Vue Scoped CSS (see #42 (comment))

In other words, styling like this does not work with jest-preview (Don't forget to check Workaround below)

@Component({
  selector: 'app-root',
  standalone: true,
+  styleUrls: [
+    '../styles/css/app.css',
+    '../styles/scss/style.scss',
+    './app.component.css',
+  styles: [
+    `button {
+        font-size: calc(10px + 2vmin);
+      }`,
  ],
  ],

Describe the solution you'd like

jest-preview should support all the styling specified by styleUrls and styles via code transformation.

Describe how should jest-preview implements this feature

Context
The current transformer Angular is using is jest-preset-angular (Not sure if there is any other angular transformer in the wild?). jest-preset-angular by default drop all the CSS (it used to make sense since before jest-preview, there is nothing to do with CSS in testing FE apps in Node.js, see @LayZeeDK's explanation #227 (comment))

Possible solutions
So, there are some options I had in mind:

1. Write our own jest code transformation for Angular, then instruct users to use it. We can fork or learn how jest-preset-angular process Angular code.
2. Write our own jest code transformation, but like a wrapper, execute jest-preset-angular first, then process CSS later
3. (prefer) Contact jest-preset-angular author and discuss with them to support processing CSS in jest environment. You can send a PR to upstream to add this feature.

• Do not process CSS by default.
• We can configure jest-preset-angular to process CSS similar to @swc/jest. Reference.

This will not be a quick fix. But it will be an interesting problem to solve. @nvh95 might ask @LayZeeDK for support since he is already an expert in Angular community 🤩.

Are there any other solutions? Please comment below, thanks.

Describe alternatives you've considered/ Workaround

Until jest-preview can have first-class support for Angular. You can still workaround with CSS by importing it directly to test files. jest-preview can process CSS by this way. For example:

// app.component.spec.ts
+import '../styles/css/app.css';
+import '../styles/scss/style.scss';
+import './app.component.css';
describe('App', () => {
  it('should work as expected', async () => {
    // your tests
  });
});

Before this workaround:

After this workaround:

I haven't known how to workaround for style defined directly with styles.

Additional context

Please see PR #227 and angular example at https://github.com/nvh95/jest-preview/tree/main/examples/angular