feat: add useForImports option

Author: vakrilov

css2json-loader.spec.ts

@@ -21,20 +21,59 @@ const someCSS = `
 `
 
 describe("css2jsonLoader", () => {
-    importTestCases.forEach((importTestCase) => {
+    it("converts CSS to JSON", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            }
+        }
 
+        css2jsonLoader.call(loaderContext, someCSS);
+    })
+
+    importTestCases.forEach((importTestCase) => {
         it(`handles: ${importTestCase}`, (done) => {
 
             const loaderContext = {
                 callback: (error, source: string, map) => {
-                    expect(source).toContain("global.registerModule(\"custom.css\", () => require(\"custom.css\"))");
+                    expect(source).toContain(`global.registerModule("custom.css", () => require("custom.css"))`);
                     expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
 
                     done();
-                }
+                },
             }
 
             css2jsonLoader.call(loaderContext, importTestCase + someCSS);
         })
+    });
+
+    it("inlines css2json loader in imports if option is provided", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`global.registerModule("custom.css", () => require("!nativescript-dev-webpack/css2json-loader?useForImports!custom.css"))`);
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            },
+            query: { useForImports: true }
+        }
+
+        css2jsonLoader.call(loaderContext, `@import url("custom.css");` + someCSS);
+    })
+
+    it("registers modules for paths starting with ~", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`global.registerModule("~custom.css", () => require("custom.css"))`);
+                expect(source).toContain(`global.registerModule("custom.css", () => require("custom.css"))`);
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            }
+        }
+
+        css2jsonLoader.call(loaderContext, `@import url("~custom.css");` + someCSS);
     })
 });

css2json-loader.ts

@@ -1,26 +1,32 @@
 import { parse, Rule, SyntaxTree } from "tns-core-modules/css";
 import { loader } from "webpack";
+import { getOptions } from "loader-utils";
 
 interface ImportRule extends Rule {
     import: string;
 }
 
 const betweenQuotesPattern = /('|")(.*?)\1/;
 const unpackUrlPattern = /url\(([^\)]+)\)/;
+const inlineLoader = "!nativescript-dev-webpack/css2json-loader?useForImports!"
 
 const loader: loader.Loader = function (content: string, map) {
+    const options = getOptions(this) || {};
+    const inline = !!options.useForImports;
+    const requirePrefix = inline ? inlineLoader : "";
+
     const ast = parse(content, undefined);
 
     let dependencies = [];
     getImportRules(ast)
         .map(extractUrlFromRule)
         .map(createRequireUri)
         .forEach(({ uri, requireURI }) => {
-            dependencies.push(`global.registerModule("${uri}", () => require("${requireURI}"));`);
+            dependencies.push(`global.registerModule("${uri}", () => require("${requirePrefix}${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}"));`);
+                dependencies.push(`global.registerModule("${requireURI}", () => require("${requirePrefix}${requireURI}"));`);
             }
         });
     const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);

demo/AngularApp/webpack.config.js

@@ -226,14 +226,20 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        "nativescript-dev-webpack/css2json-loader"
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        "nativescript-dev-webpack/css2json-loader",
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },

templates/webpack.angular.js

@@ -232,14 +232,20 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        "nativescript-dev-webpack/css2json-loader",
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        "nativescript-dev-webpack/css2json-loader",
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },