search

ryansolid / dom-expressions

A Fine-Grained Runtime for Performant DOM Rendering
MIT License
858 stars 125 forks source link

feat: camelCase CSS properties in style objects #259

Open ginnwork opened 1 year ago

ginnwork commented 1 year ago

This PR adds the ability to use camelCase CSS property names in style objects.

Example

// old
<div style={{ 'margin-top': '40px' }}>
// new
<div style={{ marginTop: '40px' }}>

Testing

Testing has been added to ensure the Babel transform converts camelCase CSS property names to kebab-case ones.

Definitions

The JSX definitions file has also been updated and TypeScript/IntelliSense recognizes the camelCase CSS property names.

ryansolid commented 1 year ago

The challenge with these sort of changes is they have to be applied both at compile and at runtime to handle things like variables being passed in or spreads. So changing in compiler isn't enough. It's part of the way I have done this. I think having a single way to set stuff is better generally as it doesn't get weird conflicts say in spreads. I guess you could always convert first, but things get more complex when you have a combination of spread and non-spread. There may be a time to address this in the future but spreads make for a lot more complexity here.

edemaine commented 1 year ago

I was going to suggest warnings about camel case in dev mode, but it turns out this is already a eslint-plugin-solid lint rule. There's even a --fix option to fix mistaken usage of camel case (e.g. coming from React). I imagine it only covers easy cases (not dynamic objects) but hopefully it catches most misuse.