Fix style properties that are not identifiers

[DaniGuardiola]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)
• If applicable, I’ve added docs and tests

Description of changes

After the addition of stylePropertyNameCase, the JSX output contained style objects that didn't wrap hyphenated properties with quotes. This is invalid JavaScript/JSX.

This PR makes it check for hyphens inside the property name, and exports a Literal instead of an Identifier. This seems to also fix the same issue for CSS variables, which also seem to be problematic in this regard.

[wooorm]

Ah nice catch! But while we're at it, I think we should do a proper check. How about using https://github.com/syntax-tree/estree-util-is-identifier-name#namename?

[DaniGuardiola]

@wooorm yeah I thought about a proper check but wanted to start small, and I'm also not very familiar with these util packages yet :) done!

[ChristianMurphy]

LGTM, thanks @DaniGuardiola!

[remcohaszing]

Using estree-util-is-identifier-name is fine, but why not just always use a string literal? I prefer unquoted properties when writing code, but for generated code it doesn't really matter IMO.

[wooorm]

Thanks, released!