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

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

@ -115,17 +115,30 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
result = getComponentModule(componentName, componentPath, attributes, context);
}
// Add component CSS file if exists.
// 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);
}
}
// 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);
}
}
}
return result;
}

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