test: add tests for css2json-loader

Author: vakrilov

.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.js

@@ -0,0 +1,40 @@
+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", () => {
+    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);
+        })
+    })
+});

css2json-loader.spec.ts

@@ -0,0 +1,60 @@
+import { parse, Rule, SyntaxTree } from "tns-core-modules/css";
+import { loader } from "webpack";
+
+interface ImportRule extends Rule {
+    import: string;
+}
+
+const betweenQuotesPattern = /('|")(.*?)\1/;
+const unpackUrlPattern = /url\(([^\)]+)\)/;
+
+const loader: loader.Loader = function (content: string, map) {
+    const ast = parse(content, undefined);
+
+    let dependencies = [];
+    getImportRules(ast)
+        .map(extractUrlFromRule)
+        .map(createRequireUri)
+        .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.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;