Per page styles getting applied to subsequent pages (style isolation missing) #9311
Comments
|
@rigor789 I believe this is due to the What appears to be happening is that when loading the css for the component, it grabs the css file in 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 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 any news on a fix for this? |
|
You can not imagine how happy i am with this being solved HAGDJABSJWNSNSJ |
Environment
Provide version numbers for the following components (information can be retrieved by running
tns infoin your project folder or by inspecting thepackage.jsonof the project):Describe the bug
With NS 8 seems the page isolation of styles is totally gone. For example I have
page1.xmland inpage1.cssI have defined a class.my-label. When I navigate away frompage1topage2the style ofmy-labelclass gets applied to elements in page2 althoughpage2.cssis 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
The text was updated successfully, but these errors were encountered: