SyntaxError with Component and multiple styleUrl files

[intellix]

When running tests with multiple CSS files we're getting a huge wall of SyntaxErrors. After hunting what is causing it, I've found a few variations which fail:

These work:

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: ['../media-box.component.scss', './media-box-h0.component.scss'],
})

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: [
    '../media-box.component.scss'
  ],
})

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: [
    '../media-box.component.scss'],
})

These fail:

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: ['../media-box.component.scss',
  './media-box-h0.component.scss'],
})

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: [
    '../media-box.component.scss',
  ],
})

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: [
    '../media-box.component.scss',
    './media-box-h0.component.scss'
  ],
})

I'm wondering if it's to do with the commas on separate lines. I have no idea where this error comes from, so apologies if I've create an issue in the wrong package :)

Error:

console.error node_modules/zone.js/dist/zone-node.js:569
    Unhandled Promise rejection: SyntaxError
        at XMLHttpRequest.open (/Users/dominic/Sites/stash/xcaf/r2d2/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:486:15)

[thymikee]

This is because of regex I use: https://github.com/thymikee/jest-preset-angular/blob/master/preprocessor.js#L3.
I'd be glad if you could improve it so it's more bulletproof.

[thymikee]

What happens here is we need to replace all styleUrls: [...] with styles: [].

[intellix]

I'm baaad, shamone, at regex but will give it a go :) I was hoping to find similar functionality inside Angular CLI but I believe they're using AST for stuff like this

[thymikee]

Ideally we would do this with ASTs, but we would need to cache it.

[thymikee]

@intellix I've submitted a PR for this, can you check if it works for you?

[intellix]

@thymikee Much more works now, I noticed this one failed:

@Component({
  selector: 'xc-media-box-h0',
  templateUrl: './media-box-h0.component.html',
  styleUrls: ['../media-box.component.scss',
  './media-box-h0.component.scss'],
})

[thymikee]

Let's move the discussion here: #10