fix(webpack): fix fragment css not being applied with webpack (NativeScript#5172)

MartoYankov · Vasil Chimev · commit 60773e7545d1 · 2017-12-14T18:51:44.000+02:00
Support css files for fragments to be registered using global.registerModule
and global.registerWebpackModules.
diff --git a/tns-core-modules/ui/builder/builder.ts b/tns-core-modules/ui/builder/builder.ts
@@ -115,15 +115,28 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
         result = getComponentModule(componentName, componentPath, attributes, context);
     }
 
-    // Add component CSS file if exists.
-    var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css");
-    if (cssFilePath) {
-        if (parentPage && typeof (<any>parentPage).addCssFile === "function") {
-            (<any>parentPage).addCssFile(cssFilePath);
-        } else {
-            ensureTrace();
+    // webpack modules require paths to be relative to /app folder.
+    let cssModulePath = fullComponentPathFilePathWithoutExt + ".css";
+    if (cssModulePath.startsWith("/")) {
+        var app = knownFolders.currentApp().path + "/";
+        if (cssModulePath.startsWith(app)) {
+            cssModulePath = "./" + cssModulePath.substr(app.length);
+        }
+    }
 
-            trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error);
+    // Add CSS from webpack module if exists.
+    if (global.moduleExists(cssModulePath)) {
+        (<any>parentPage).addCssFile(cssModulePath);
+    } else {
+        var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css");
+        // Add component CSS file if exists.
+        if (cssFilePath) {
+            if (parentPage && typeof (<any>parentPage).addCssFile === "function") {
+                (<any>parentPage).addCssFile(cssFilePath);
+            } else {
+                ensureTrace();
+                trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error);
+            }
         }
     }
 
diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
@@ -80,22 +80,34 @@ class CSSSource {
     }
 
     public static fromURI(uri: string, keyframes: KeyframesMap): CSSSource {
+        // webpack modules require all file paths to be relative to /app folder.
+        let appRelativeUri = uri;
+        if (appRelativeUri.startsWith("/")) {
+            var app = knownFolders.currentApp().path + "/";
+            if (appRelativeUri.startsWith(app)) {
+                appRelativeUri = "./" + appRelativeUri.substr(app.length);
+            }
+        }
+
         try {
-            const cssOrAst = global.loadModule(uri);
+            const cssOrAst = global.loadModule(appRelativeUri);
             if (cssOrAst) {
                 if (typeof cssOrAst === "string") {
-                    return CSSSource.fromSource(cssOrAst, keyframes, uri);
+                    // raw-loader
+                    return CSSSource.fromSource(cssOrAst, keyframes, appRelativeUri);
                 } else if (typeof cssOrAst === "object" && cssOrAst.type === "stylesheet" && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
-                    return CSSSource.fromAST(cssOrAst, keyframes, uri);
+                    // css-loader
+                    return CSSSource.fromAST(cssOrAst, keyframes, appRelativeUri);
                 } else {
-                    // Probably a webpack css-loader exported object.
-                    return CSSSource.fromSource(cssOrAst.toString(), keyframes, uri);
+                    // css2json-loader
+                    return CSSSource.fromSource(cssOrAst.toString(), keyframes, appRelativeUri);
                 }
             }
         } catch(e) {
             //
         }
-        return CSSSource.fromFile(uri, keyframes);
+
+        return CSSSource.fromFile(appRelativeUri, keyframes);
     }
 
     public static fromFile(url: string, keyframes: KeyframesMap): CSSSource {
