Skip to content

CSS Inconsistency... #623

@NathanaelA

Description

@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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions