Per page styles getting applied to subsequent pages (style isolation missing)

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.1
Cross-platform modules: 8.0.1
Android Runtime: 8.0
iOS Runtime: 8.0
XCode Version: 12.4
Plugin(s):

Describe the bug
With NS 8 seems the page isolation of styles is totally gone. For example I have page1.xml and in page1.css I have defined a class .my-label. When I navigate away from page1 to page2 the style of my-label class gets applied to elements in page2 although page2.css is empty. This leads to a perfectly styled NS7 app be totally messed up in NS8.

The bug happens on both android and iOS.

To Reproduce

Expected behavior
Per page CSS should be isolated and be applied ONLY on the specific page and not added to the global scope of CSS. Only styles defined in app.css should be applied globally.

Sample project
https://github.com/PeterStaev/styles-issues

Additional context

@rigor789

@rigor789 I believe this is due to the apply-css-loader and the webpack5 changes.

What appears to be happening is that when loading the css for the component, it grabs the css file in CSSSource.fromURI() as a module from webpack via global.loadModule(), the apply-css-loader additions cause it to run the addTaggedAdditionalCSS() method which parses the css selectors and then applies them to the application specific selectors. Then the module is returned back to fromURI, but the export is an esmodule, and it has .toString() called on it which returns "[object Module]" and that is then parsed a second time but fails, which ends in nothing being applied to the local component selectors.

At face value it seems everything is fine as the original page specific styles are applied directly to the application specific selectors and not to the page. But as @PeterStaev mentioned, the styles are now applied globally, so an app starts to look incorrect the more you navigate to various pages.

I'm not sure what the intent of apply-css-loader use of addTaggedAdditionalCSS is for, but it doesn't seem to be helping.

This is what the webpack bundle output for my page-specific styles in NS7 looked like

/***/ "./views/login/login.scss":
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function(global) {module.exports = {"type":"stylesheet","stylesheet":{"rules":[{"type":"rule","selectors":["#login-txt"],"declarations":[{"type":"declaration","property":"margin-bottom","value":"14"}]},{"type":"rule","selectors":[".page .btn"],"declarations":[{"type":"declaration","property":"margin","value":"10 0 28 0"}]}],"parsingErrors":[]}};; 
if ( true && global._isModuleLoadedForUI && global._isModuleLoadedForUI("./views/login/login.scss") ) {
    
    module.hot.accept();
    module.hot.dispose(() => {
        global.hmrRefresh({ type: "style", path: "./views/login/login.scss" });
    });
} 
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("../node_modules/webpack/buildin/global.js")))

/***/ }),

And this is it now in NS8

/***/ "./app/views/login/login.scss":
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* CSS2JSON */

const ___CSS2JSON_LOADER_EXPORT___ = {"type":"stylesheet","stylesheet":{"rules":[{"type":"rule","selectors":["#login-txt"],"declarations":[{"type":"declaration","property":"margin-bottom","value":"14"}]},{"type":"rule","selectors":[".page .btn"],"declarations":[{"type":"declaration","property":"margin","value":"10 0 28 0"}]}],"parsingErrors":[]}}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS2JSON_LOADER_EXPORT___);
const { addTaggedAdditionalCSS } = __webpack_require__("./node_modules/@nativescript/core/ui/styling/style-scope.js");
addTaggedAdditionalCSS(___CSS2JSON_LOADER_EXPORT___, "/.../app/views/login/login.scss")
if(true) {
	module.hot.accept()
	module.hot.dispose(() => {
		const { removeTaggedAdditionalCSS } = __webpack_require__("./node_modules/@nativescript/core/ui/styling/style-scope.js");
		removeTaggedAdditionalCSS("/.../app/views/login/login.scss")
	})
}

/***/ })

@rigor789

@rigor789 any news on a fix for this?

You can not imagine how happy i am with this being solved HAGDJABSJWNSNSJ

fix: stop leaking style scopes (NativeScript#9444)

Navigation Menu

Repository navigation

Per page styles getting applied to subsequent pages (style isolation missing) #9311

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Per page styles getting applied to subsequent pages (style isolation missing) #9311

Description

Activity

Archez commented on Apr 28, 2021

PeterStaev commented on May 29, 2021

AchrafBardan commented on Jun 18, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions