Closed connoratmyxt closed 2 years ago
Thanks for the issue. This rule checks for numbers and recommends converting to strings with units because many users coming from React expect numbers to be automatically suffixed with "px" in many cases. However, I did overlook properties like flex-grow
.
I could disable that behavior in the plugin:solid/typescript
configuration, but the typings you provided don't seem to be strict enough on their own. For example, width
takes CSSWideKeyword | any
, leading users to believe width: 100
will be converted to px
when it won't.
So I think I'll create a list of properties where TS expects number
like flex-grow
and leave them alone. Sorry for the inconvenience, please use // eslint-disable-next-line solid/style-prop
in the meantime!
No worries at all, thank you for the quick response. You're right that the typings aren't very strict, I think this is mainly because complex string types in typescript aren't very easy (and may not even be possible for some complex css values). It would probably be too big of an undertaking for solid/style-prop to properly validate the values based on their CSS properties, so I think your approach is a good one. Thanks for taking the time to work on this!
Alright, the fix is out in v0.4.6! I took a slightly more conservative approach than the one I mentioned; the rule will only warn on properties containing width
, height
, margin
, padding
, border-width
, or font-size
. These are the properties where React & others append "px"
automatically, so we can allow numbers on everything else.
Go ahead and upgrade the package, and don't hesitate to mention any other issues. If you added // eslint-disable
comments, you can run eslint
with --report-unused-disable-directives
to find spots where the comments aren't needed anymore. Thanks for using this package!
Describe the bug The rule solid/style-prop does not match the typings provided by solid. For example, the solid typings for
flex-grow
uses the definition"flex-grow"?: CSSWideKeyword | number;
. This requires the value of flex grow to be one of"initial"
,"inherit"
,"unset"
, a number, or undefined. Any string not specified is not allowed.To Reproduce Steps to reproduce the behavior:
<div style={{ "flex-grow": 1 }}>Example</div>
<div style={{ "flex-grow": "1" }}>Example</div>
Expected behavior Linting the style should match the type definitions provided by solid.
Screenshots N/A
Desktop (please complete the following information):
node --version
: 14.18.2npm list eslint-plugin-solid
/yarn why eslint-plugin-solid
: eslint-plugin-solid@0.1.2npm list eslint
/yarn why eslint
: eslint@8.0.0Additional context Add any other context about the problem here.