feat: use css2json loader by default

.gitignore

@@ -34,6 +34,9 @@ bundle-config-loader.js
 xml-namespace-loader.d.ts
 xml-namespace-loader.js
 
+css2json-loader.d.ts
+css2json-loader.js
+
 **/*.spec.js*
 **/*.spec.d.ts*
 

css2json-loader.spec.ts

@@ -0,0 +1,79 @@
+import css2jsonLoader from "./css2json-loader";
+
+const importTestCases = [
+    `@import url("custom.css");`,
+    `@import url('custom.css');`,
+    `@import url('custom.css') print;`,
+    `@import url("custom.css") print;`,
+    `@import url('custom.css') screen and (orientation:landscape);`,
+    `@import url("custom.css") screen and (orientation:landscape);`,
+    `@import 'custom.css';`,
+    `@import "custom.css";`,
+    `@import 'custom.css' screen;`,
+    `@import "custom.css" screen;`,
+    `@import url(custom.css);`,
+]
+
+const someCSS = `
+.btn {
+    background-color: #7f9
+}
+`
+
+describe("css2jsonLoader", () => {
+    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(`{"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

@@ -0,0 +1,66 @@
+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("${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("${requirePrefix}${requireURI}"));`);
+            }
+        });
+    const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
+    this.callback(null, `${dependencies.join("\n")}module.exports = ${str};`, map);
+}
+
+function getImportRules(ast: SyntaxTree): ImportRule[] {
+    if (!ast || (<any>ast).type !== "stylesheet" || !ast.stylesheet) {
+        return [];
+    }
+    return <ImportRule[]>ast.stylesheet.rules
+        .filter(rule => rule.type === "import" && (<any>rule).import)
+}
+
+/**
+ * Extracts the url from import rule (ex. `url("./platform.css")`)
+ */
+function extractUrlFromRule(importRule: ImportRule): string {
+    const urlValue = importRule.import;
+
+    const unpackedUrlMatch = urlValue.match(unpackUrlPattern);
+    const unpackedValue = unpackedUrlMatch ? unpackedUrlMatch[1] : urlValue
+
+    const quotesMatch = unpackedValue.match(betweenQuotesPattern);
+    return quotesMatch ? quotesMatch[2] : unpackedValue;
+};
+
+function createRequireUri(uri): { uri: string, requireURI: string } {
+    return {
+        uri: uri,
+        requireURI: uri[0] === "~" && uri[1] !== "/" ? uri.substr(1) : uri
+    };
+}
+
+
+
+export default loader;

demo/AngularApp/webpack.config.js

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

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"
                     ]
                 },

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"
                     ]
                 },

templates/webpack.angular.js

@@ -228,19 +228,24 @@ 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: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },

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"
                     ]
                 },

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"
                     ]
                 },

templates/webpack.vue.js

@@ -195,8 +195,30 @@ module.exports = env => {
                     },
                 ].filter(loader => Boolean(loader)),
             },
+            {
+                test: /[\/|\\]app\.css$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    {
+                        loader: "nativescript-dev-webpack/css2json-loader",
+                        options: { useForImports: true }
+                    },
+                ],
+            },
+            {
+                test: /[\/|\\]app\.scss$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    {
+                        loader: "nativescript-dev-webpack/css2json-loader",
+                        options: { useForImports: true }
+                    },
+                    'sass-loader',
+                ],
+            },
             {
                 test: /\.css$/,
+                exclude: /[\/|\\]app\.css$/,
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
@@ -205,11 +227,12 @@ module.exports = env => {
             },
             {
                 test: /\.scss$/,
+                exclude: /[\/|\\]app\.scss$/,
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
                     { loader: "css-loader", options: { url: false } },
-                    "sass-loader",
+                    'sass-loader',
                 ],
             },
             {