The documentation specifies correctly that the css type-selectors are case in-sensitive; but does not say anything about the properties case sensistivity. Since, in the browser I can do
div { baCKgrouND-colOr: blUe; } and it works; you would naturally assume that in NativeScript you could do the same thing... Nope; apparently the property names are case sensitive and must be all lower case. So why don't we have the css parser automatically lowercase the property name so that Button { Background-Color: Blue; } then works properly as expected!
Now to fix this we have a couple of choices:
- css\reworkcss.js on line 232 we can append a .toLowerCase() to the place the property is assigned and returned.
- In Style-scope, I can update the createSelectorsFromSyntaxTree function and add the toLowerCase() in their.
- I haven't traced this down, but where ever it goes to set the style property when the rule matches; make it case automatically lowercase the property before it assigns it.
The quickest fix is to do it in reworkcss; but that means you have your own non-stock reworkcss.js file. I hate when that happens in my projects...
So I am leaning toward 2 -- so that way the fix is in the code you control -- I can do the style-scope change fairly easily and that routine should actually be more performant when I'm done. 😀
Thoughts?
The documentation specifies correctly that the css type-selectors are case in-sensitive; but does not say anything about the properties case sensistivity. Since, in the browser I can do
div { baCKgrouND-colOr: blUe; } and it works; you would naturally assume that in NativeScript you could do the same thing... Nope; apparently the property names are case sensitive and must be all lower case. So why don't we have the css parser automatically lowercase the property name so that Button { Background-Color: Blue; } then works properly as expected!
Now to fix this we have a couple of choices:
The quickest fix is to do it in reworkcss; but that means you have your own non-stock reworkcss.js file. I hate when that happens in my projects...
So I am leaning toward 2 -- so that way the fix is in the code you control -- I can do the style-scope change fairly easily and that routine should actually be more performant when I'm done. 😀
Thoughts?