CSS Inconsistency...

[NathanaelA]

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:

1. css\reworkcss.js on line 232 we can append a .toLowerCase() to the place the property is assigned and returned.
2. In Style-scope, I can update the createSelectorsFromSyntaxTree function and add the toLowerCase() in their.
3. 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?

[vakrilov]

@NathanaelA I agree with you - the style-scope is the right place for this as it is responsible for taking the output from the CSS parser and matching it to the CSS property in {N}.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.