NativeScript · vakrilov · Jul 16, 2019 · Jul 16, 2019 · Jul 22, 2019 · Jul 23, 2019
diff --git a/e2e/file-qualifiers/app/App_Resources/Android/src/main/res/values/strings.xml b/e2e/file-qualifiers/app/App_Resources/Android/src/main/res/values/strings.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <string name="app_name">TestApp</string>
-    <string name="title_activity_kimera">TestApp</string>
+    <string name="app_name">FileQualifiers</string>
+    <string name="title_activity_kimera">FileQualifiers</string>
 </resources>
diff --git a/e2e/file-qualifiers/nsconfig.json b/e2e/file-qualifiers/nsconfig.json
@@ -1,3 +1 @@
-{
-	"useLegacyWorkflow": false
-}
+{}
diff --git a/e2e/file-qualifiers/package.json b/e2e/file-qualifiers/package.json
@@ -6,10 +6,10 @@
   "nativescript": {
     "id": "org.nativescript.filequalifiers",
     "tns-ios": {
-      "version": "6.0.0-2019-06-19-084246-01"
+      "version": "next"
     },
     "tns-android": {
-      "version": "6.0.0-2019-06-24-113546-01"
+      "version": "next"
     }
   },
   "dependencies": {

diff --git a/e2e/file-qualifiers/webpack.config.js b/e2e/file-qualifiers/webpack.config.js
@@ -28,7 +28,6 @@ module.exports = env => {
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from
@@ -73,6 +72,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -179,13 +179,14 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
                 },
-
+                
                 {
-                    test: /\.(ts|css|scss|less|html|xml)$/,
+                    test: /\.(ts|css|scss|html|xml)$/,
                     use: "nativescript-dev-webpack/hmr/hot-loader"
                 },
 
@@ -227,7 +228,7 @@ module.exports = env => {
             // Define useful constants like TNS_WEBPACK
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
-                "process": undefined,
+                "process": "global.process",
             }),
             // Remove all files from the out dir.
             new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),

diff --git a/tests/app/ui/label/label-tests.ts b/tests/app/ui/label/label-tests.ts
@@ -556,16 +556,15 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
     }
 
-    // TODO: fix this, broken with https://github.com/NativeScript/NativeScript/pull/7499
-    // public testErrorMessageWhenWrongCssIsAddedWithFile() {
-    //     const view = this.testView;
-    //     const page = this.testPage;
-    //     this.waitUntilTestElementIsLoaded();
-
-    //     view.id = "testLabel";
-    //     page.addCssFile(fs.path.join(testDir, "label-tests-wrong-page.css"));
-    //     TKUnit.assertNotEqual(this.errorMessage, undefined);
-    // }
+    public testErrorMessageWhenWrongCssIsAddedWithFile() {
+        const view = this.testView;
+        const page = this.testPage;
+        this.waitUntilTestElementIsLoaded();
+
+        view.id = "testLabel";
+        page.addCssFile(fs.path.join(testDir, "label-tests-wrong-page.css"));
+        TKUnit.assertNotEqual(this.errorMessage, undefined);
+    }
 
     public testErrorMessageWhenWrongCssIsAdded() {
         const view = this.testView;

diff --git a/tns-core-modules/application/application-common.ts b/tns-core-modules/application/application-common.ts
@@ -1,5 +1,5 @@
 // Require globals first so that snapshot takes __extends function.
-require("globals");
+import "../globals";
 
 import { Observable, EventData } from "../data/observable";
 import { View } from "../ui/core/view";

diff --git a/tns-core-modules/module-name-resolver/module-name-resolver.ts b/tns-core-modules/module-name-resolver/module-name-resolver.ts
@@ -3,6 +3,11 @@ import { screen, device } from "../platform/platform";
 import * as appCommonModule from "../application/application-common";
 import { PlatformContext, findMatch } from "./qualifier-matcher";
 import { registerModulesFromFileSystem } from "./non-bundle-workflow-compat";
+import {
+    isEnabled as traceEnabled,
+    write as traceWrite,
+    categories as traceCategories
+} from "../trace";
 
 export class ModuleNameResolver implements ModuleNameResolverDefinition {
     private _cache = {};
@@ -18,6 +23,10 @@ export class ModuleNameResolver implements ModuleNameResolverDefinition {
             this._cache[key] = result;
         }
 
+        if (traceEnabled()) {
+            traceWrite(`path: '${path}' with ext: '${ext}' resolved: '${result}'`, traceCategories.ModuleNameResolver);
+        }
+
         return result;
     }
 

diff --git a/tns-core-modules/module-name-resolver/non-bundle-workflow-compat.ts b/tns-core-modules/module-name-resolver/non-bundle-workflow-compat.ts
@@ -1,11 +1,27 @@
 import * as fs from "../file-system/file-system";
 import * as appCommonModule from "../application/application-common";
+import {
+    isEnabled as traceEnabled,
+    write as traceWrite,
+    categories as traceCategories
+} from "../trace";
 
 const cache = new Set<string>();
 let initialized = false;
 
-function register(name, loader) {
+function register(name: string, loader: (name?: string) => void) {
+    if (traceEnabled()) {
+        traceWrite(`[Compat] Register module: ${name}`, traceCategories.ModuleNameResolver);
+    }
     global.registerModule(name, loader);
+
+    if (name.startsWith("tns_modules")) {
+        const nonTnsModulesName = name.substr("tns_modules".length + 1);
+        if (traceEnabled()) {
+            traceWrite(`[Compat] Register module: ${nonTnsModulesName}`, traceCategories.ModuleNameResolver);
+        }
+        global.registerModule(nonTnsModulesName, loader);
+    }
 }
 
 function processFile(file: fs.File) {
@@ -35,16 +51,21 @@ function processFile(file: fs.File) {
             let name = filePathRelativeToApp.substr(0, filePathRelativeToApp.length - "package.json".length - 1);
             let requirePath = fs.path.join(file.parent.path, json.main);
 
-            if (name.startsWith("tns_modules")) {
-                name = name.substr("tns_modules".length + 1);
-            }
-
             register(name, () => global.require(requirePath));
         }
     }
 }
 
 function processFolder(path: string) {
+    if (cache.has(path)) {
+        return;
+    }
+    cache.add(path);
+
+    if (traceEnabled()) {
+        traceWrite(`[Compat] Processing folder: ${path}`, traceCategories.ModuleNameResolver);
+    }
+
     if (fs.Folder.exists(path)) {
         const folder = fs.Folder.fromPath(path);
 
@@ -66,43 +87,37 @@ function processFolder(path: string) {
 export function registerModulesFromFileSystem(moduleName: string) {
     initialize();
 
-    if (cache.has(moduleName)) {
-        return;
-    }
-    cache.add(moduleName);
-
+    let folderFound = false;
     // moduleName is a folder with package.json
     const path = fs.path.join(fs.knownFolders.currentApp().path, moduleName);
     if (fs.Folder.exists(path)) {
         processFolder(path);
-
-        return;
+        folderFound = true;
     }
 
-    // moduleName is file - load all files in it's folder
+    // moduleName is file - load all files in its parent folder
     const parentName = moduleName.substr(0, moduleName.lastIndexOf(fs.path.separator));
     const parentFolderPath = fs.path.join(fs.knownFolders.currentApp().path, parentName);
     if (fs.Folder.exists(parentFolderPath)) {
         processFolder(parentFolderPath);
+        folderFound = true;
+    }
 
+    if (folderFound) {
         return;
     }
 
     // moduleName is a folder in tns_modules ex. "nativescript-ui-chart"
     const tnsModulesPath = fs.path.join(fs.knownFolders.currentApp().path, "tns_modules", moduleName);
     if (fs.Folder.exists(tnsModulesPath)) {
         processFolder(tnsModulesPath);
-
-        return;
     }
 
     // moduleName a file in tns_modules/plugin. Avoid traversing the whole tns_modules folder if parentName is empty
     if (parentName) {
         const tnsParentFolderPath = fs.path.join(fs.knownFolders.currentApp().path, "tns_modules", parentName);
         if (fs.Folder.exists(tnsParentFolderPath)) {
             processFolder(tnsParentFolderPath);
-
-            return;
         }
     }
 }

diff --git a/tns-core-modules/trace/trace.d.ts b/tns-core-modules/trace/trace.d.ts
@@ -101,6 +101,7 @@ export module categories {
     export const Animation: string;
     export const Transition: string;
     export const Livesync: string;
+    export const ModuleNameResolver: string;
 
     export const separator: string;
     export const All: string;

diff --git a/tns-core-modules/trace/trace.ts b/tns-core-modules/trace/trace.ts
@@ -131,21 +131,16 @@ export module categories {
     export const Animation = "Animation";
     export const Transition = "Transition";
     export const Livesync = "Livesync";
+    export const ModuleNameResolver = "ModuleNameResolver";
 
     export const separator = ",";
-    export const All = VisualTreeEvents + separator
-        + Layout + separator
-        + Style + separator
-        + ViewHierarchy + separator
-        + NativeLifecycle + separator
-        + Debug + separator
-        + Navigation + separator
-        + Test + separator
-        + Binding + separator
-        + Error + separator
-        + Animation + separator
-        + Transition + separator
-        + Livesync;
+    export const All = [
+        VisualTreeEvents, Layout, Style,
+        ViewHierarchy, NativeLifecycle,
+        Debug, Navigation, Test, Binding,
+        Error, Animation, Transition, Livesync,
+        ModuleNameResolver]
+        .join(separator);
 
     export function concat(): string {
         let result: string;

diff --git a/tns-core-modules/ui/builder/module-name-sanitizer.ts b/tns-core-modules/ui/builder/module-name-sanitizer.ts
@@ -3,6 +3,8 @@ export function sanitizeModuleName(moduleName: string, removeExtension: boolean
 
     if (moduleName.startsWith("~/")) {
         moduleName = moduleName.substring(2);
+    } else if (moduleName.startsWith("~")) {
+        moduleName = moduleName.substring(1);
     } else if (moduleName.startsWith("/")) {
         moduleName = moduleName.substring(1);
     }

diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
@@ -40,6 +40,8 @@ function ensureKeyframeAnimationModule() {
 }
 
 import * as capm from "./css-animation-parser";
+import { sanitizeModuleName } from "../builder/module-name-sanitizer";
+import { resolveModuleName } from "../../module-name-resolver";
 let cssAnimationParserModule: typeof capm;
 function ensureCssAnimationParserModule() {
     if (!cssAnimationParserModule) {
@@ -80,25 +82,26 @@ class CSSSource {
 
     public static fromURI(uri: string, keyframes: KeyframesMap): CSSSource {
         // webpack modules require all file paths to be relative to /app folder
-        let appRelativeUri = CSSSource.pathRelativeToApp(uri);
+        const appRelativeUri = CSSSource.pathRelativeToApp(uri);
+        const sanitizedModuleName = sanitizeModuleName(appRelativeUri);
+        const resolvedModuleName = resolveModuleName(sanitizedModuleName, "css");
 
         try {
-            const cssOrAst = global.loadModule(appRelativeUri, true);
+            const cssOrAst = global.loadModule(resolvedModuleName, true);
             if (cssOrAst) {
                 if (typeof cssOrAst === "string") {
                     // raw-loader
-                    return CSSSource.fromSource(cssOrAst, keyframes, appRelativeUri);
+                    return CSSSource.fromSource(cssOrAst, keyframes, resolvedModuleName);
                 } else if (typeof cssOrAst === "object" && cssOrAst.type === "stylesheet" && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
                     // css-loader
-                    return CSSSource.fromAST(cssOrAst, keyframes, appRelativeUri);
+                    return CSSSource.fromAST(cssOrAst, keyframes, resolvedModuleName);
                 } else {
                     // css2json-loader
-                    return CSSSource.fromSource(cssOrAst.toString(), keyframes, appRelativeUri);
+                    return CSSSource.fromSource(cssOrAst.toString(), keyframes, resolvedModuleName);
                 }
             }
         } catch (e) {
-            // TODO: Commented as this prints error in playground: https://github.com/NativeScript/NativeScript/issues/7497
-            // traceWrite(`Could not load CSS from ${uri}: ${e}`, traceCategories.Error, traceMessageType.error);
+            traceWrite(`Could not load CSS from ${uri}: ${e}`, traceCategories.Error, traceMessageType.error);
         }
 
         return CSSSource.fromFile(appRelativeUri, keyframes);
@@ -320,12 +323,17 @@ function onLiveSync(args: applicationCommon.CssChangedEventData): void {
     loadCss(applicationCommon.getCssFileName());
 }
 
-const loadCss = profile(`"style-scope".loadCss`, (cssFile: string) => {
-    if (!cssFile) {
+const loadCss = profile(`"style-scope".loadCss`, (cssModule: string) => {
+    if (!cssModule) {
         return undefined;
     }
 
-    const result = CSSSource.fromURI(cssFile, applicationKeyframes).selectors;
+    // safely remove "./" as global CSS should be resolved relative to app folder
+    if (cssModule.startsWith("./")) {
+        cssModule = cssModule.substr(2);
+    }
+
+    const result = CSSSource.fromURI(cssModule, applicationKeyframes).selectors;
     if (result.length > 0) {
         applicationSelectors = result;
         mergeCssSelectors();
@@ -336,8 +344,10 @@ applicationCommon.on("cssChanged", onCssChanged);
 applicationCommon.on("livesync", onLiveSync);
 
 export const loadAppCSS = profile("\"style-scope\".loadAppCSS", (args: applicationCommon.LoadAppCSSEventData) => {
-    loadCss(args.cssFile);
-    applicationCommon.off("loadAppCss", loadAppCSS);
+    if (applicationCommon.hasLaunched()) {
+        loadCss(args.cssFile);
+        applicationCommon.off("loadAppCss", loadAppCSS);
+    }
 });
 
 if (applicationCommon.hasLaunched()) {

diff --git a/tns-core-modules/xml/xml.js b/tns-core-modules/xml/xml.js