feat(css): add attribute scoped css without global refresh #7907
Conversation
|
I am happy to resubmit this PR following the above guidelines (I am not entirely sure how to compose the PR title, for example), but would somebody be able to review the code to ensure it's a valid PR otherwise? Many thanks |
| const rootView = getRootView(); | ||
| if (rootView) { | ||
| rootView._onCssStateChange(); | ||
| if(!scoped) { |
There was a problem hiding this comment.
Missing space between if and (
|
For PR title, follow this guideline: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages You could would end up with something like |
| @@ -177,11 +177,13 @@ export function run(entry?: NavigationEntry | string) { | |||
| _start(entry); | |||
| } | |||
|
|
|||
| export function addCss(cssText: string): void { | |||
| export function addCss(cssText: string, scoped?: boolean): void { | |||
There was a problem hiding this comment.
| export function addCss(cssText: string, scoped?: boolean): void { | |
| export function addCss(cssText: string, attributeScoped?: boolean): void { |
This implementation is needed only when the css is global, but scoped by attributes (like in Angular and Vue). To differentiate this from the {N} Core implementation with style scope objects I think it's a better naming.
| @@ -371,11 +371,13 @@ export function run(entry?: string | NavigationEntry) { | |||
| _start(entry); | |||
| } | |||
|
|
|||
| export function addCss(cssText: string): void { | |||
| export function addCss(cssText: string, scoped?: boolean): void { | |||
There was a problem hiding this comment.
| export function addCss(cssText: string, scoped?: boolean): void { | |
| export function addCss(cssText: string, attributeScoped?: boolean): void { |
| @@ -177,11 +177,13 @@ export function run(entry?: NavigationEntry | string) { | |||
| _start(entry); | |||
| } | |||
|
|
|||
| export function addCss(cssText: string): void { | |||
| export function addCss(cssText: string, scoped?: boolean): void { | |||
There was a problem hiding this comment.
You should add this new parameter to the d.t.s too explaining it can be used when you add global css that is scoped by attribute for example.
|
Hi there, Thanks for the suggestions, I've implemented these and updated the PR. |
|
test --ignore |
|
test --ignore |
As per the problem I reported here:
NativeScript/theme#179
When using component scoped CSS there is no need to trigger a full global refresh of the styles.
This change does not affect performance or function of using
encapsulation: ViewEncapsulation.Noneon a component.This PR goes hand in hand with a modification to
nativescript-angularto employ the below changes (PR coming up right after this).PR Checklist
What is the current behavior?
What is the new behavior?
Fixes/Implements/Closes #[Issue Number].