feat: Register ./app.css instead of app.css so it can be provided by webpack context (NativeScript#5158)

PanayotCankov · web-flow · commit d3563395201d · 2017-12-12T14:34:38.000+02:00
This will let us register the app.css in webpack from a context, and potentially
have a configuration such as:
```
const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
global.registerWebpackModules(appCssContext);
```
That will work with all of the app.css, app.scss, app.less etc. without further manual reconfiguration.
diff --git a/tns-core-modules/application/application-common.ts b/tns-core-modules/application/application-common.ts
@@ -30,7 +30,7 @@ export const lowMemoryEvent = "lowMemory";
 export const uncaughtErrorEvent = "uncaughtError";
 export const orientationChangedEvent = "orientationChanged";
 
-let cssFile: string = "app.css";
+let cssFile: string = "./app.css";
 
 let resources: any = {};
 
diff --git a/tns-core-modules/globals/globals.ts b/tns-core-modules/globals/globals.ts
@@ -42,20 +42,30 @@ interface ExtensionMap {
     [originalFileExtension: string]: string;
 }
 
-const defaultExtensionMap = { ".js": ".js", ".ts": ".js", ".css": ".css", ".scss": ".css", ".xml": ".xml" };
+const defaultExtensionMap = { ".js": ".js", ".ts": ".js", ".css": ".css", ".scss": ".css", ".xml": ".xml", ".less": ".css", ".sass": ".css" };
 global.registerWebpackModules = function registerWebpackModules(context: Context, extensionMap: ExtensionMap = {}) {
     context.keys().forEach(key => {
         const extDotIndex = key.lastIndexOf(".");
         const base = key.substr(0, extDotIndex);
         const originalExt = key.substr(extDotIndex);
-        const registerExt = extensionMap[originalExt] || defaultExtensionMap[originalExt];
+        const registerExt = extensionMap[originalExt] || defaultExtensionMap[originalExt] || originalExt;
+
+        // We prefer source files for webpack scenarios before compilation leftovers,
+        // e. g. if we get a .js and .ts for the same module, the .js is probably the compiled version of the .ts file,
+        // so we register the .ts with higher priority, similar is the case with us preferring the .scss to .css
+        const isSourceFile = originalExt !== registerExt;
+
         const registerName = base + registerExt;
         if (registerName.startsWith("./") && registerName.endsWith(".js")) {
             const jsNickName = registerName.substr(2, registerName.length - 5);
             // This is extremely short version like "main-page" that was promoted to be used with global.registerModule("module-name", loaderFunc);
-            global.registerModule(jsNickName, () => context(key));
+            if (isSourceFile || !global.moduleExists(jsNickName)) {
+                global.registerModule(jsNickName, () => context(key));
+            }
+        }
+        if (isSourceFile || !global.moduleExists(registerName)) {
+            global.registerModule(registerName, () => context(key));
         }
-        global.registerModule(registerName, () => context(key));
     });
 }
 
