fix(webpack): fix fragment css not being applied with webpack (#5172) · NativeScript/NativeScript@60773e7 · GitHub

NativeScript / NativeScript Public

• Notifications You must be signed in to change notification settings
• Fork 1.7k
• Star 25.7k

• Code
• Issues 773
• Pull requests 69
• Discussions
• Actions
• Projects
• Wiki
• Security and quality
• Insights

Additional navigation options

Commit 60773e7

Browse filesBrowse the repository at this point in the historyBrowse files

MartoYankov

authored and

Vasil Chimev

committed

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

Support css files for fragments to be registered using global.registerModule and global.registerWebpackModules.

1 parent 0986315 commit 60773e7
Copy full SHA for 60773e7

2 files changed

+39-14Lines changed: 39 additions & 14 deletions

File tree

Expand file treeCollapse file tree

Open diff view settings

Filter options

• tns-core-modules/ui
  • builder
    • builder.ts
  • styling
    • style-scope.ts

Expand file treeCollapse file tree

Open diff view settings

Collapse file

‎tns-core-modules/ui/builder/builder.ts‎

Copy file name to clipboardExpand all lines: tns-core-modules/ui/builder/builder.ts

+21-8Lines changed: 21 additions & 8 deletions

Original file line number	Diff line number	Diff line change
@@ -115,15 +115,28 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
115	115	result = getComponentModule(componentName, componentPath, attributes, context);
116	116	}
117	117
118		- // Add component CSS file if exists.
119		- var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css");
120		- if (cssFilePath) {
121		- if (parentPage && typeof (<any>parentPage).addCssFile === "function") {
122		- (<any>parentPage).addCssFile(cssFilePath);
123		- } else {
124		- ensureTrace();
	118	+ // webpack modules require paths to be relative to /app folder.
	119	+ let cssModulePath = fullComponentPathFilePathWithoutExt + ".css";
	120	+ if (cssModulePath.startsWith("/")) {
	121	+ var app = knownFolders.currentApp().path + "/";
	122	+ if (cssModulePath.startsWith(app)) {
	123	+ cssModulePath = "./" + cssModulePath.substr(app.length);
	124	+ }
	125	+ }
125	126
126		- trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error);
	127	+ // Add CSS from webpack module if exists.
	128	+ if (global.moduleExists(cssModulePath)) {
	129	+ (<any>parentPage).addCssFile(cssModulePath);
	130	+ } else {
	131	+ var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css");
	132	+ // Add component CSS file if exists.
	133	+ if (cssFilePath) {
	134	+ if (parentPage && typeof (<any>parentPage).addCssFile === "function") {
	135	+ (<any>parentPage).addCssFile(cssFilePath);
	136	+ } else {
	137	+ ensureTrace();
	138	+ trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error);
	139	+ }
127	140	}
128	141	}
129	142

Collapse file

‎tns-core-modules/ui/styling/style-scope.ts‎

Copy file name to clipboardExpand all lines: tns-core-modules/ui/styling/style-scope.ts

+18-6Lines changed: 18 additions & 6 deletions

Original file line number	Diff line number	Diff line change
@@ -80,22 +80,34 @@ class CSSSource {
80	80	}
81	81
82	82	public static fromURI(uri: string, keyframes: KeyframesMap): CSSSource {
	83	+ // webpack modules require all file paths to be relative to /app folder.
	84	+ let appRelativeUri = uri;
	85	+ if (appRelativeUri.startsWith("/")) {
	86	+ var app = knownFolders.currentApp().path + "/";
	87	+ if (appRelativeUri.startsWith(app)) {
	88	+ appRelativeUri = "./" + appRelativeUri.substr(app.length);
	89	+ }
	90	+ }
	91	+
83	92	try {
84		- const cssOrAst = global.loadModule(uri);
	93	+ const cssOrAst = global.loadModule(appRelativeUri);
85	94	if (cssOrAst) {
86	95	if (typeof cssOrAst === "string") {
87		- return CSSSource.fromSource(cssOrAst, keyframes, uri);
	96	+ // raw-loader
	97	+ return CSSSource.fromSource(cssOrAst, keyframes, appRelativeUri);
88	98	} else if (typeof cssOrAst === "object" && cssOrAst.type === "stylesheet" && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
89		- return CSSSource.fromAST(cssOrAst, keyframes, uri);
	99	+ // css-loader
	100	+ return CSSSource.fromAST(cssOrAst, keyframes, appRelativeUri);
90	101	} else {
91		- // Probably a webpack css-loader exported object.
92		- return CSSSource.fromSource(cssOrAst.toString(), keyframes, uri);
	102	+ // css2json-loader
	103	+ return CSSSource.fromSource(cssOrAst.toString(), keyframes, appRelativeUri);
93	104	}
94	105	}
95	106	} catch(e) {
96	107	//
97	108	}
98		- return CSSSource.fromFile(uri, keyframes);
	109	+
	110	+ return CSSSource.fromFile(appRelativeUri, keyframes);
99	111	}
100	112
101	113	public static fromFile(url: string, keyframes: KeyframesMap): CSSSource {

0 commit comments

Comments

0 (0)