feat: use css2json loader by default

NativeScript · Oct 23, 2019 · 6b0c9ae · 6b0c9ae
1 parent b93211d
commit 6b0c9ae
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 20 deletions.
diff --git a/css2json-loader.js b/css2json-loader.js
@@ -1,15 +1,22 @@
 const parse = require("tns-core-modules/css").parse;
-const nl = "\n";
 
 module.exports = function (content, map) {
     const ast = parse(content);
-    const dependencies = getImportsFrom(ast)
+
+    let dependencies = [];
+    getImportsFrom(ast)
         .map(mapURI)
-        .reduce((dependencies, { uri, requireURI }) =>
-            dependencies + `global.registerModule(${uri}, () => require(${requireURI}));${nl}`, "");
+        .forEach(({ uri, requireURI }) => {
+            dependencies.push(`global.registerModule(${uri}, () => require(${requireURI}));`);
+
+            // call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
+            if (uri !== requireURI) {
+                dependencies.push(`global.registerModule(${requireURI}, () => require(${requireURI}));`);
+            }
+        });
 
     const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
-    this.callback(null, `${dependencies}module.exports = ${str};`, map);
+    this.callback(null, `${dependencies.join("\n")}module.exports = ${str};`, map);
 }
 
 function getImportsFrom(ast) {

diff --git a/demo/AngularApp/webpack.config.js b/demo/AngularApp/webpack.config.js
@@ -226,14 +226,14 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        "nativescript-dev-webpack/css2json-loader"
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

diff --git a/demo/JavaScriptApp/webpack.config.js b/demo/JavaScriptApp/webpack.config.js
@@ -188,13 +188,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

diff --git a/demo/TypeScriptApp/webpack.config.js b/demo/TypeScriptApp/webpack.config.js
@@ -194,13 +194,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -233,14 +233,14 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        "nativescript-dev-webpack/css2json-loader",
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -195,13 +195,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -202,13 +202,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js
@@ -200,16 +200,16 @@ module.exports = env => {
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
-                    { loader: "css-loader", options: { url: false } },
+                    'nativescript-dev-webpack/css2json-loader',
                 ],
             },
             {
                 test: /\.scss$/,
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
-                    { loader: "css-loader", options: { url: false } },
-                    "sass-loader",
+                    'nativescript-dev-webpack/css2json-loader',
+                    'sass-loader',
                 ],
             },
             {