javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Support css files for fragments to be registered using global.registerModule
and global.registerWebpackModules.
This commit is contained in:
Martin Yankov
2017-12-14 18:51:44 +02:00
committed by Vasil Chimev
parent 0986315374
commit 60773e7545
2 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
tns-core-modules/ui/builder/builder.ts
View File

@ -115,15 +115,28 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
result = getComponentModule(componentName, componentPath, attributes, context); result = getComponentModule(componentName, componentPath, attributes, context);
} }
// Add component CSS file if exists. // webpack modules require paths to be relative to /app folder.
var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css"); let cssModulePath = fullComponentPathFilePathWithoutExt + ".css";
if (cssFilePath) { if (cssModulePath.startsWith("/")) {
if (parentPage && typeof (<any>parentPage).addCssFile === "function") { var app = knownFolders.currentApp().path + "/";
(<any>parentPage).addCssFile(cssFilePath); if (cssModulePath.startsWith(app)) {
} else { cssModulePath = "./" + cssModulePath.substr(app.length);
ensureTrace(); }
}
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);
}
} }
} }

24
tns-core-modules/ui/styling/style-scope.ts
View File

@ -80,22 +80,34 @@ class CSSSource {
} }
public static fromURI(uri: string, keyframes: KeyframesMap): 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 { try {
const cssOrAst = global.loadModule(uri); const cssOrAst = global.loadModule(appRelativeUri);
if (cssOrAst) { if (cssOrAst) {
if (typeof cssOrAst === "string") { 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) { } 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 { } else {
// Probably a webpack css-loader exported object. // css2json-loader
return CSSSource.fromSource(cssOrAst.toString(), keyframes, uri); return CSSSource.fromSource(cssOrAst.toString(), keyframes, appRelativeUri);
} }
} }
} catch(e) { } catch(e) {
// //
} }
return CSSSource.fromFile(uri, keyframes);
return CSSSource.fromFile(appRelativeUri, keyframes);
} }
public static fromFile(url: string, keyframes: KeyframesMap): CSSSource { public static fromFile(url: string, keyframes: KeyframesMap): CSSSource {