search

vercel / style-guide

Vercel's engineering style guide
Mozilla Public License 2.0
1.28k stars 37 forks source link

Considering enabling `react/no-unknown-property` #52

Closed raunofreiberg closed 1 year ago

raunofreiberg commented 2 years ago

Today, when copying SVG elements from Figma to React, many of the properties will be in snake case (stroke-width) but in React we need them to be camel case (strokeWidth)

Right now, there's no way to autofix those errors so a lot of time is spent on manually find and replacing on each SVG copied over. I've previously enabled react/no-unknown-property which will auto-fix the SVG errors:

CleanShot 2022-10-18 at 15 49 32

Thanks!

raunofreiberg commented 2 years ago

It's very easy to dismiss these and end up with a console full of errors:

image
adrianbw commented 2 years ago

I'd be strongly in favor.

mrmckeb commented 2 years ago

We initially didn't turn this on as we preference TypeScript, and obviously this should be flagged in TypeScript as invalid - but we didn't consider the auto-fix aspect, which is really great.

raunofreiberg commented 1 year ago

Hi hi! Checking in to see if there's any movement or further consideration for this? Really missing this every day!

mrmckeb commented 1 year ago

We definitely plan to enable this, but it'll be a breaking change (a change to a default) so we were hoping to group it with some other items.

I was hoping to group it with #54 which is apparently close to shipping.

raunofreiberg commented 1 year ago

Hi! I'm still very bogged down by converting casing. I bet I'm not alone here, getting this in would be a tiny but mighty DX win across the Engineering org.

mrmckeb commented 1 year ago

:tada: This PR is included in version 5.0.0 :tada:

The release is available on: