From 9113a04d806fc3c44fbef10607dc5e1c0ba4706c Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Tue, 16 Jul 2019 11:01:43 +0300
Subject: [PATCH] refactor: return of missing css errors

---
 .../Android/src/main/res/values/strings.xml   |  4 +-
 e2e/file-qualifiers/app/app.css               |  2 +
 e2e/file-qualifiers/app/app.land.css          |  3 ++
 .../app/main/main-page.land.xml               |  2 +-
 e2e/file-qualifiers/app/main/main-page.xml    |  2 +-
 .../app/other/other-page.land.xml             |  2 +-
 e2e/file-qualifiers/app/other/other-page.xml  |  2 +-
 e2e/file-qualifiers/nsconfig.json             |  4 +-
 e2e/file-qualifiers/package.json              |  7 +--
 e2e/file-qualifiers/webpack.config.js         | 10 ++--
 tests/app/ui/label/label-tests.ts             | 17 +++----
 .../module-name-resolver.ts                   | 26 ++++++++++
 .../non-bundle-workflow-compat.ts             | 49 ++++++++++++-------
 tns-core-modules/trace/trace.d.ts             |  1 +
 tns-core-modules/trace/trace.ts               | 21 +++-----
 .../ui/builder/module-name-sanitizer.ts       |  2 +
 tns-core-modules/ui/styling/style-scope.ts    | 28 +++++++----
 17 files changed, 117 insertions(+), 65 deletions(-)

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
index 3b60905d1..d35397e8b 100644
--- 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>
\ No newline at end of file
diff --git a/e2e/file-qualifiers/app/app.css b/e2e/file-qualifiers/app/app.css
index 96036dd59..92be534e4 100644
--- a/e2e/file-qualifiers/app/app.css
+++ b/e2e/file-qualifiers/app/app.css
@@ -1,3 +1,5 @@
+@import '~nativescript-theme-core/css/core.light.css';
+
 .root-footer {
     color: black;
     background-color: lightgreen
diff --git a/e2e/file-qualifiers/app/app.land.css b/e2e/file-qualifiers/app/app.land.css
index 327ff04f5..fea0a142f 100644
--- a/e2e/file-qualifiers/app/app.land.css
+++ b/e2e/file-qualifiers/app/app.land.css
@@ -1,3 +1,6 @@
+/* Currently app.land.css is never loaded */
+@import '~nativescript-theme-core/css/lime.css';
+
 .root-footer {
     color: black;
     background-color: lightpink;
diff --git a/e2e/file-qualifiers/app/main/main-page.land.xml b/e2e/file-qualifiers/app/main/main-page.land.xml
index ccf5350b5..386d9cc42 100644
--- a/e2e/file-qualifiers/app/main/main-page.land.xml
+++ b/e2e/file-qualifiers/app/main/main-page.land.xml
@@ -2,7 +2,7 @@
     <StackLayout class="page-content">
         <Label text="This is LANDSACPE page" />
         
-        <Button text="tap" tap="tap" />
+        <Button text="tap" tap="tap" class="btn btn-primary"/>
 
         <Button text="navigate" tap="navigate" />
 
diff --git a/e2e/file-qualifiers/app/main/main-page.xml b/e2e/file-qualifiers/app/main/main-page.xml
index 5d00c932b..6b9308f3a 100644
--- a/e2e/file-qualifiers/app/main/main-page.xml
+++ b/e2e/file-qualifiers/app/main/main-page.xml
@@ -2,7 +2,7 @@
     <StackLayout class="page-content">
         <Label text="This is DEFAULT page" />
         
-        <Button text="tap" tap="tap" />
+        <Button text="tap" tap="tap" class="btn btn-primary" />
 
         <Button text="navigate" tap="navigate" />
 
diff --git a/e2e/file-qualifiers/app/other/other-page.land.xml b/e2e/file-qualifiers/app/other/other-page.land.xml
index 82ad97fae..46a9a46e4 100644
--- a/e2e/file-qualifiers/app/other/other-page.land.xml
+++ b/e2e/file-qualifiers/app/other/other-page.land.xml
@@ -2,7 +2,7 @@
     <StackLayout class="page-content">
         <Label text="This is LANDSACPE other page" />
         
-        <Button text="tap" tap="tap" />
+        <Button text="tap" tap="tap" class="btn btn-primary"/>
 
         <Button text="navigate" tap="navigate" />
 
diff --git a/e2e/file-qualifiers/app/other/other-page.xml b/e2e/file-qualifiers/app/other/other-page.xml
index e1dccd85e..31f2cca17 100644
--- a/e2e/file-qualifiers/app/other/other-page.xml
+++ b/e2e/file-qualifiers/app/other/other-page.xml
@@ -2,7 +2,7 @@
     <StackLayout class="page-content">
         <Label text="This is DEFAULT other page" />
         
-        <Button text="tap" tap="tap" />
+        <Button text="tap" tap="tap" class="btn btn-primary"/>
 
         <Button text="navigate" tap="navigate" />
 
diff --git a/e2e/file-qualifiers/nsconfig.json b/e2e/file-qualifiers/nsconfig.json
index a6d75472c..9e26dfeeb 100644
--- a/e2e/file-qualifiers/nsconfig.json
+++ b/e2e/file-qualifiers/nsconfig.json
@@ -1,3 +1 @@
-{
-	"useLegacyWorkflow": false
-}
\ No newline at end of file
+{}
\ No newline at end of file
diff --git a/e2e/file-qualifiers/package.json b/e2e/file-qualifiers/package.json
index a10f98556..a385d4fb7 100644
--- a/e2e/file-qualifiers/package.json
+++ b/e2e/file-qualifiers/package.json
@@ -6,18 +6,19 @@
   "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": {
+    "nativescript-theme-core": "^1.0.6",
     "tns-core-modules": "file:../../tns-core-modules"
   },
   "devDependencies": {
     "nativescript-dev-webpack": "next",
     "tns-platform-declarations": "next",
-    "typescript": "3.4.1"
+    "typescript": "3.4.5"
   }
 }
diff --git a/e2e/file-qualifiers/webpack.config.js b/e2e/file-qualifiers/webpack.config.js
index d06082709..d677fa3b9 100644
--- 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,
@@ -133,6 +133,7 @@ module.exports = env => {
                         test: (module, chunks) => {
                             const moduleName = module.nameForCondition ? module.nameForCondition() : '';
                             return /[\\/]node_modules[\\/]/.test(moduleName) ||
+                                /[\\/]tns-core-modules[\\/]/.test(moduleName) || // <-- Needed for snapshot builds with linked modules!
                                 appComponents.some(comp => comp === moduleName);
 
                         },
@@ -179,13 +180,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 +229,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
index cfd846e45..17b344750 100644
--- 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();
+    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);
-    // }
+        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/module-name-resolver/module-name-resolver.ts b/tns-core-modules/module-name-resolver/module-name-resolver.ts
index f7945175d..2871a3c47 100644
--- 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;
     }
 
@@ -52,6 +61,10 @@ export class ModuleNameResolver implements ModuleNameResolverDefinition {
 let resolverInstance: ModuleNameResolver;
 
 export function resolveModuleName(path: string, ext: string): string {
+    if (global.__snapshot) {
+        return resolveModuleSnapshot(path, ext);
+    }
+
     if (!resolverInstance) {
         resolverInstance = new ModuleNameResolver({
             width: screen.mainScreen.widthDIPs,
@@ -64,6 +77,19 @@ export function resolveModuleName(path: string, ext: string): string {
     return resolverInstance.resolveModuleName(path, ext);
 }
 
+function resolveModuleSnapshot(path, ext) {
+    traceWrite(`Resolving module in SNAPSHOT context - path: '${path}' with ext: '${ext}'`, traceCategories.ModuleNameResolver);
+
+    // Platform module when in snapshot. So resolve modules with default android phone.
+    // NB: The only module name that should ever be resolved while in snapshot is app.css
+    return new ModuleNameResolver({
+        width: 400,
+        height: 800,
+        os: "Android",
+        deviceType: "Phone"
+    }).resolveModuleName(path, ext);
+}
+
 export function clearCache() {
     if (resolverInstance) {
         resolverInstance.clearCache();
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
index f6fabdd4b..9b2f4e7e0 100644
--- 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,25 +87,23 @@ 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;
     }
 
@@ -92,8 +111,6 @@ export function registerModulesFromFileSystem(moduleName: string) {
     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
@@ -101,8 +118,6 @@ export function registerModulesFromFileSystem(moduleName: string) {
         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
index 86e886e5b..a4d40dd34 100644
--- 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
index 05e9001eb..368a4c18d 100644
--- 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
index c3e777abd..ee90ab8d8 100644
--- 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
index a2e1c4ee5..dd987b65d 100644
--- 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();