feat(css): add attribute scoped css without global refresh - #7907
Conversation
Sorry, something went wrong.
|
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 |
Sorry, something went wrong.
charsleysa
left a comment
There was a problem hiding this comment.
Please ensure that the code passes the tslint check.
You can run this locally by running npm run tslint
Sorry, something went wrong.
| const rootView = getRootView(); | ||
| if (rootView) { | ||
| rootView._onCssStateChange(); | ||
| if(!scoped) { |
There was a problem hiding this comment.
Missing space between if and (
Sorry, something went wrong.
|
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 feat(css): add scoped css without global refresh |
Sorry, something went wrong.
| } | ||
|
|
||
| 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.
Sorry, something went wrong.
| } | ||
|
|
||
| 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 { |
Sorry, something went wrong.
| } | ||
|
|
||
| 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.
Sorry, something went wrong.
|
Hi there, Thanks for the suggestions, I've implemented these and updated the PR. |
Sorry, something went wrong.
|
test --ignore |
Sorry, something went wrong.
|
test --ignore |
Sorry, something went wrong.
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.None on a component.
This PR goes hand in hand with a modification to nativescript-angular to 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].