johanholmerin / style9

CSS-in-JS compiler inspired by Meta's stylex
MIT License
570 stars 27 forks source link

fix(transition-property): handle transition property array case #30

Closed gatzjames closed 3 years ago

gatzjames commented 3 years ago

Addresses #29

Added a special case to handle this along with a test to check regression. Hope that it helps and thanks for this awesome library 👍!

An idea for the future could be to have a type that holds all the Animated properties and only allow these for improved type safety, although I love that it can also be done in user-land with extending the type!

johanholmerin commented 3 years ago

Good catch! At closer inspection, it seems that this should be the case for transitionDuration, transitionTimingFunction, and transitionDelay as well. Could you add a list of properties that should be comma-separated to check against?

Regarding only including animatable properties, that sounds like a great idea. Preferably it's something that could be added to mdn/data and then included in csstype, so that more projects could benefit from it.

gatzjames commented 3 years ago

Added the ones that exist in the Style.d.ts file for now and updated the test. Did some search in mdn/data and it appears that there are more properties that can take comma separated lists like will-change, background-image etc. Perhaps this could be automated but not sure what it would require for now.

johanholmerin commented 3 years ago

Looks good. I'll take a look at what other properties should be added.

gatzjames commented 3 years ago

Looks good. I'll take a look at what other properties should be added.

Awesome! Found this on MDN This means that any syntax that ends with a hash is a property that can be a comma separated list. If I find some time I will give it a try to auto-gen these props from MDN data in case it's usefull!