feat: implement css-variables and css-calc #7553

m-abs · 2019-07-19T15:25:27Z

PR Checklist

The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
You have signed the CLA.
All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/DevelopmentWorkflow.md#running-unit-tests.
Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/WritingUnitTests.md.

What is the current behavior?

No support for css-variable or for css-calc

What is the new behavior?

Adds ~~basic~~ support for css-variable and css-calc

.button {
   --custom-color: black; /** text-color: black **/
   color: var(--custom-color);
}

.button.got-the-blues {
   --custom-color: blue; /** text-color: blue **/
}

.button.red {
   --custom-color: red;  /** text-color: red **/
}

Adds support for calc(...) in CSS, via reduce-css-calc.

StackLayout {
    --my-factor: 1;  /** width: 100% **/
   width: calc(100% * var(--my-factor));
}

StackLayout.slim {
    --my-factor: 0.1;  /** width: 10% **/
}

StackLayout.wide {
    --my-factor: 1.25; /** width: 125% **/
}

What is still missing:

~~Updating the variables via view.style is broken, if already defined in CSS.~~
~~For CSS-variables to be really useful, support for calc(var(--my-variable) * 2) is needed. I intend to add this to the PR.~~
~~clean up~~

Implements #4864

Not in the StyleScope.

exejutable · 2019-07-24T17:16:25Z

this is gonna be merged?

m-abs · 2019-07-24T18:10:30Z

@exejutable
I hope so, but I need to do some clean up and it needs to be properly reviewed and tested.

…to feat/css-variables

themounthead · 2019-07-30T06:46:16Z

Can this merged please !!! I'm migrating my web app to a shared codebase and this is last missing piece to handle universal Theming.

bundyo · 2019-07-30T15:29:20Z

I've tested this PR a bit and it seems to be working rather nice.

tests/app/ui/styling/style-tests.ts

m-abs · 2019-08-06T11:37:37Z

@manoldonev
Is it okay to depend on reduce-css-calc or should I try to write my own parser?

reduce-css-calc doesn't take up much space and work as advertised, but it is a new extra dependency plus its dependencies.

m-abs · 2019-08-06T13:24:05Z

@manoldonev
I tried out my own implementation on https://github.com/m-abs/NativeScript/tree/feat/css-variables-own-calc.

Seems to work fine, but it needs a little clean up.

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

manoldonev · 2019-08-19T11:51:07Z

test

m-abs · 2019-08-19T21:37:21Z

Hi @manoldonev,
Thank you for approving the PR.

Unfortunately I have discovered a limitation with the css-calc support.

Expressions like calc(100% - 30px + 20px) are reduced to calc(100% - 10px) because we don't know what the relative size of 100% is at the time.

Can we leave it as a known limitation and print a warning if/when it happens?

SvetoslavTsenov · 2019-08-19T21:59:03Z

Hey @m-abs, this feat will be available in the next version of tns-core-modules@next and
in the next official version of tns-core-modules@6.1.0

manoldonev · 2019-08-20T15:28:40Z

@m-abs can you log this limitation #7553 (comment) as a separate issue and we will mark it with the "known issues" label for the time being?

manoldonev · 2019-08-20T15:29:45Z

@m-abs Thank you for the awesome contribution and for taking time to address all comments!

m-abs added 2 commits July 19, 2019 17:17

feat: implement basic support for css-variables

9b6b16b

fix(test): test-watch-android and test-watch-ios was broken

8a64bab

cla-bot bot added the cla: yes label Jul 19, 2019

m-abs added 4 commits July 19, 2019 21:45

fix: processing css-variables belong in CssProperty-classes

a6c0ab8

Not in the StyleScope.

fix(css-variables): set style attribute override value from css-classes

409c68c

feat: add css calc-support using 'reduce-css-calc'

88f5a9f

Merge branch 'master' into feat/css-variables

fea4efc

m-abs changed the title ~~feat: implement basic support for css-variables~~ feat: implement css-variables and css-calc Jul 19, 2019

m-abs added 2 commits July 20, 2019 17:51

fix(tslint): missing semicolon and incorrect quotemark

3799c06

Merge branch 'master' into feat/css-variables

19f27ee

Merge branch 'master' into feat/css-variables

ccb9501

m-abs and others added 6 commits July 24, 2019 21:09

feat: move css-variable handling to Style-class

50bb628

Merge branch 'feat/css-variables' of github.com:m-abs/NativeScript in…

b5a83d7

…to feat/css-variables

chor: add comments explaining css-variable implmentation

f6ae1ef

chor: set css-variables before other style properties

0074104

chor(css-variables): cleaning up

d22dc56

chor: code style fixes

e4e53ce

m-abs and others added 2 commits August 2, 2019 14:46

Merge branch 'master' into feat/css-variables

5a42c1b

Merge branch 'master' into feat/css-variables

c394fbe

manoldonev reviewed Aug 5, 2019

View reviewed changes

tests/app/ui/styling/style-tests.ts Show resolved Hide resolved

m-abs and others added 4 commits August 5, 2019 23:08

test(CSS-CALC): Add tests for nested css-calc statements

f381315

Merge branch 'master' into feat/css-variables

026f0ce

fix(CSS-CALC): dip-unit not supported by reduce-css-calc

0117a83

fix(tslint): use double quotemarks

3d46e9e

m-abs added 7 commits August 14, 2019 23:45

chor: process css-calc and css-variables in style-scope

690b852

Merge remote-tracking branch 'origin/master' into feat/css-variables

6c5b3a0

chore: clean-up css-calc/variable expressions

53ae2d7

fix(css-calc): handle invalid expressions

05bb58c

chore(CSSState): update comments

978907c

chore(Style): rename css-variable functions

1f25a33

chore(css-variables): describe fallback logic

336aa9d

manoldonev added docs needed Additional documentation on this issue/PR is needed ♥ community PR labels Aug 15, 2019

manoldonev reviewed Aug 15, 2019

View reviewed changes

tns-core-modules/ui/styling/style-scope.ts Outdated Show resolved Hide resolved

manoldonev reviewed Aug 15, 2019

View reviewed changes

tns-core-modules/ui/styling/style-scope.ts Outdated Show resolved Hide resolved

manoldonev reviewed Aug 15, 2019

View reviewed changes

tns-core-modules/ui/styling/style-scope.ts Outdated Show resolved Hide resolved

manoldonev reviewed Aug 15, 2019

View reviewed changes

tns-core-modules/ui/styling/style-scope.ts Outdated Show resolved Hide resolved

m-abs added 4 commits August 16, 2019 00:20

Merge branch 'master' into feat/css-variables

2c22782

chore: move reset scoped css-variables to Style-class

54195a2

chore(CssState): simplify check for css expressions

d448f30

Merge branch 'master' into feat/css-variables

a6bcbdc

manoldonev approved these changes Aug 19, 2019

View reviewed changes

Merge branch 'master' into feat/css-variables

53f05d0

m-abs and others added 2 commits August 19, 2019 17:23

chore: add reduce-css-calc to /package.json

2d79807

Merge branch 'master' into feat/css-variables

c316553

SvetoslavTsenov merged commit 673c808 into NativeScript:master Aug 19, 2019

m-abs deleted the feat/css-variables branch August 19, 2019 22:00

m-abs mentioned this pull request Aug 20, 2019

css-calc does not work with relative % size values #7702

Open

bundyo mentioned this pull request Aug 26, 2019

[Tracking] NativeScript Theme 2.0 NativeScript/theme#160

Open

45 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: implement css-variables and css-calc #7553

feat: implement css-variables and css-calc #7553

Uh oh!

m-abs commented Jul 19, 2019 •

edited

Loading

Uh oh!

exejutable commented Jul 24, 2019

Uh oh!

m-abs commented Jul 24, 2019

Uh oh!

themounthead commented Jul 30, 2019

Uh oh!

bundyo commented Jul 30, 2019

Uh oh!

Uh oh!

m-abs commented Aug 6, 2019

Uh oh!

m-abs commented Aug 6, 2019

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

manoldonev commented Aug 19, 2019

Uh oh!

m-abs commented Aug 19, 2019

Uh oh!

SvetoslavTsenov commented Aug 19, 2019 •

edited by manoldonev

Loading

Uh oh!

manoldonev commented Aug 20, 2019

Uh oh!

manoldonev commented Aug 20, 2019

Uh oh!

Uh oh!

Uh oh!

feat: implement css-variables and css-calc #7553

feat: implement css-variables and css-calc #7553

Uh oh!

Conversation

m-abs commented Jul 19, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

What is the current behavior?

What is the new behavior?

What is still missing:

Uh oh!

exejutable commented Jul 24, 2019

Uh oh!

m-abs commented Jul 24, 2019

Uh oh!

themounthead commented Jul 30, 2019

Uh oh!

bundyo commented Jul 30, 2019

Uh oh!

Uh oh!

m-abs commented Aug 6, 2019

Uh oh!

m-abs commented Aug 6, 2019

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

manoldonev commented Aug 19, 2019

Uh oh!

m-abs commented Aug 19, 2019

Uh oh!

SvetoslavTsenov commented Aug 19, 2019 • edited by manoldonev Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

manoldonev commented Aug 20, 2019

Uh oh!

manoldonev commented Aug 20, 2019

Uh oh!

Uh oh!

m-abs commented Jul 19, 2019 •

edited

Loading

SvetoslavTsenov commented Aug 19, 2019 •

edited by manoldonev

Loading