refactor: return of missing css errors

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="app_name">FileQualifiers</string>
-    <string name="title_activity_kimera">TestApp</string>
+    <string name="title_activity_kimera">FileQualifiers</string>
 </resources>

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

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;

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" />
 

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" />
 

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" />
 

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" />
 

e2e/file-qualifiers/nsconfig.json

@@ -1,3 +1 @@
-{
+{}
-	"useLegacyWorkflow": false
-}

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

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 }),

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() {
-    // public testErrorMessageWhenWrongCssIsAddedWithFile() {
+        const view = this.testView;
-    //     const view = this.testView;
+        const page = this.testPage;
-    //     const page = this.testPage;
+        this.waitUntilTestElementIsLoaded();
-    //     this.waitUntilTestElementIsLoaded();
 
-    //     view.id = "testLabel";
+        view.id = "testLabel";
-    //     page.addCssFile(fs.path.join(testDir, "label-tests-wrong-page.css"));
+        page.addCssFile(fs.path.join(testDir, "label-tests-wrong-page.css"));
-    //     TKUnit.assertNotEqual(this.errorMessage, undefined);
+        TKUnit.assertNotEqual(this.errorMessage, undefined);
-    // }
+    }
 
     public testErrorMessageWhenWrongCssIsAdded() {
         const view = this.testView;

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();

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)) {
+    let folderFound = false;
-        return;
-    }
-    cache.add(moduleName);
-
     // moduleName is a folder with package.json
     const path = fs.path.join(fs.knownFolders.currentApp().path, moduleName);
     if (fs.Folder.exists(path)) {
         processFolder(path);
-
+        folderFound = true;
-        return;
     }
 
-    // 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;
         }
     }
 }

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;

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
+    export const All = [
-        + Layout + separator
+        VisualTreeEvents, Layout, Style,
-        + Style + separator
+        ViewHierarchy, NativeLifecycle,
-        + ViewHierarchy + separator
+        Debug, Navigation, Test, Binding,
-        + NativeLifecycle + separator
+        Error, Animation, Transition, Livesync,
-        + Debug + separator
+        ModuleNameResolver]
-        + Navigation + separator
+        .join(separator);
-        + Test + separator
-        + Binding + separator
-        + Error + separator
-        + Animation + separator
-        + Transition + separator
-        + Livesync;
 
     export function concat(): string {
         let result: string;

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);
     }

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) => {
+const loadCss = profile(`"style-scope".loadCss`, (cssModule: string) => {
-    if (!cssFile) {
+    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();