fix: handle imports like @import url("./xxx.css")

Author: vakrilov

css2json-loader.js

@@ -1,4 +1,5 @@
 const parse = require("tns-core-modules/css").parse;
+const urlPattern = /('|")(.*?)\1/;
 
 module.exports = function (content, map) {
     const ast = parse(content);
@@ -7,14 +8,13 @@ module.exports = function (content, map) {
     getImportsFrom(ast)
         .map(mapURI)
         .forEach(({ uri, requireURI }) => {
-            dependencies.push(`global.registerModule(${uri}, () => require(${requireURI}));`);
+            dependencies.push(`global.registerModule("${uri}", () => require("${requireURI}"));`);
 
-            // call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
+            // Call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
             if (uri !== requireURI) {
-                dependencies.push(`global.registerModule(${requireURI}, () => require(${requireURI}));`);
+                dependencies.push(`global.registerModule("${requireURI}", () => require("${requireURI}"));`);
             }
         });
-
     const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
     this.callback(null, `${dependencies.join("\n")}module.exports = ${str};`, map);
 }
@@ -25,12 +25,21 @@ function getImportsFrom(ast) {
     }
     return ast.stylesheet.rules
         .filter(rule => rule.type === "import")
-        .map(importRule => importRule.import.replace(/[\'\"]/gm, ""));
+        .map(urlFromImportRule);
 }
 
+/**
+ * Extracts the url from import rule (ex. `url("./platform.css")`)
+ */
+function urlFromImportRule(importRule) {
+    const urlValue = importRule.import;
+    const urlMatch = urlValue && urlValue.match(urlPattern);
+    return urlMatch && urlMatch[2];
+};
+
 function mapURI(uri) {
     return {
-        uri: JSON.stringify(uri),
-        requireURI: JSON.stringify(uri[0] === "~" && uri[1] !== "/" ? uri.substr(1) : uri)
+        uri: uri,
+        requireURI: uri[0] === "~" && uri[1] !== "/" ? uri.substr(1) : uri
     };
 }

templates/webpack.angular.js

@@ -228,7 +228,6 @@ module.exports = env => {
 
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
 
-                // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
                     use: [