refactor: return of missing css errors

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

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
-        + 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;

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