cristianbote/goober

Custom CSS properties are manipulated from camel to kabab casing

realStandal opened this issue · 1 comments

realStandal commented

The camel-To-Kabab is just to explain what I'm seeing.

For the given global style:

const GlobalVariable = createGlobalStyles`
  :root {
    --my-customProperty: red;
  }
`

The following will be applied to the browser:

:root {
  --my-custom-property: red;
}

I don't think there are any rules being broken by my use of camel casing. The MDN docs even highlight how casing is important in differentiating one property from another (see the "Note" in the link provided). But casing isn't mentioned as "an unallowed token".

Just from looking at the source and re-using what I think is the offender in my own app, I believe the issue to be occurring here during parsing, but I'm unsure.

cristianbote commented

Hey @realStandal thanks for opening this issue! You are right! That line in there is meant for properties defined as WebkitFooBaz to be transformed into -webkit-foo-baz or just a normal camelCase to dash-case.

Indeed is a but, since it shouldn't pick the css vars at all.

  • 🎉1