Fix regular expressions to handle quotes and escaped quotes and simplify code (#1)

index.js

@@ -1,36 +1,21 @@
-module.exports = function(source) {
-  // using: regex, capture groups, and capture group variables.
-  var templateUrlRegex = new RegExp(/templateUrl:\s*['"](.*?)['"]/gm)
-  var stylesRegex = new RegExp(/styleUrls:(.*)/)
+// using: regex, capture groups, and capture group variables.
+var templateUrlRegex = /templateUrl:(.*)$/gm;
+var stylesRegex = /styleUrls:(\s*\[[^\]]*?\])/g;
+var stringRegex = /(['"])((?:[^\\]\\\1|.)*?)\1/g;
 
-  // replace: templateUrl: './path/to/template.html'
-  // with: template: require('./path/to/template.html')
-  function replaceHTMLTemplatePathWithRequire(source) {
-    if (templateUrlRegex.test(source)) {
-      var newSource = source.replace(templateUrlRegex, "template: require('$1')");
-      return newSource;
-    }
-
-    return source;
-  }
-
-  // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"]
-  // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")]
-  function replaceStylesheetPathWithRequire(source) {
-    var stylesMatch = source.match(stylesRegex);
-    var styles;
-
-    if ( stylesRegex.test(source) ) {
-      styles = stylesMatch[0]
-                .replace(/['"](.*?)['"]/g, "require('$1')")
-                .replace(/styleUrls/g, 'styles');
-
-      var newSource = source.replace(stylesRegex, styles);
-      return newSource;
-    }
-
-    return source;
-  }
-
-  return replaceStylesheetPathWithRequire(replaceHTMLTemplatePathWithRequire(source));
+function replaceStringsWithRequires(string) {
+  return string.replace(stringRegex, "require('$2')");
 }
+
+module.exports = function(source) {
+  return source.replace(templateUrlRegex, function (match, url) {
+                 // replace: templateUrl: './path/to/template.html'
+                 // with: template: require('./path/to/template.html')
+                 return "template:" + replaceStringsWithRequires(url);
+               })
+               .replace(stylesRegex, function (match, urls) {
+                 // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"]
+                 // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")]
+                 return "styles:" + replaceStringsWithRequires(urls);
+               });
+};

test/fixtures/component_with_multiple_styles.js

@@ -0,0 +1,15 @@
+var test = `
+  import {Component} from '@angular/core';
+
+  @Component({
+    selector: 'test-component',
+    templateUrl: './some/path/to/file.html',
+    styleUrls: [
+      "./app/css/styles.css",
+      './app/css/more-styles.css'
+    ]
+  })
+  export class TestComponent {}
+`;
+
+module.exports = test;

test/fixtures/component_with_quote_in_urls.js

@@ -0,0 +1,12 @@
+var test = String.raw`
+  import {Component} from '@angular/core';
+
+  @Component({
+    selector: 'test-component',
+    templateUrl: './some/path/to/file\'.html',
+    styleUrls: ["./app/css/\"styles\".css\\"]
+  })
+  export class TestComponent {}
+`;
+
+module.exports = test;

test/fixtures/index.js

@@ -1,4 +1,8 @@
 var sampleAngular2ComponentSimpleFixture = require('./sample_angular2_component_file_string_simple.js');
+var componentWithQuoteInUrls = require('./component_with_quote_in_urls.js');
+var componentWithMultipleStyles = require('./component_with_multiple_styles.js');
 
 exports.simpleAngular2TestComponentFileStringSimple = sampleAngular2ComponentSimpleFixture;
+exports.componentWithQuoteInUrls = componentWithQuoteInUrls;
+exports.componentWithMultipleStyles = componentWithMultipleStyles;
 

test/loader.spec.js

@@ -23,6 +23,47 @@ describe("loader", function() {
 
   });
 
+  it("Should convert html and style file strings to require()s regardless of inner quotes", function(){
+
+    loader.call({}, fixtures.componentWithQuoteInUrls)
+      .should
+      .be
+      .eql(String.raw`
+  import {Component} from '@angular/core';
+
+  @Component({
+    selector: 'test-component',
+    template: require('./some/path/to/file\'.html'),
+    styles: [require('./app/css/\"styles\".css\\')]
+  })
+  export class TestComponent {}
+`
+      )
+
+  });
+
+  it("Should convert html and multiple style file strings to require()s", function(){
+
+    loader.call({}, fixtures.componentWithMultipleStyles)
+      .should
+      .be
+      .eql(`
+  import {Component} from '@angular/core';
+
+  @Component({
+    selector: 'test-component',
+    template: require('./some/path/to/file.html'),
+    styles: [
+      require('./app/css/styles.css'),
+      require('./app/css/more-styles.css')
+    ]
+  })
+  export class TestComponent {}
+`
+      )
+
+  });
+
   it("Should return original source if there are no matches", function() {
     loader.call({}, 'foo')
       .should