search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.28k stars 105 forks source link

fix: x.* must pass through props for as={Component} #236

Closed agriffis closed 3 years ago

agriffis commented 3 years ago

Summary

x.div must pass through non-system props, including props that are not valid HTML attrs, to support as={Component}.

This is from discussion at https://github.com/gregberge/xstyled/pull/231#issuecomment-817353699

Problem demo

Since I didn't file a separate issue for this, here is a codesandbox demonstrating the problem: https://codesandbox.io/s/cool-poincare-rzyyt?file=/src/App.js

Test plan

Tests included

netlify[bot] commented 3 years ago

Deploy Preview for xstyled processing.

Name Link
Latest commit 4a7291b0bb0ddc2c5f4d35693bb0897179d65273
Latest deploy log https://app.netlify.com/sites/xstyled/deploys/60742a2f8ea8a5000860c1e8
agriffis commented 3 years ago

This is not a problem on the Emotion side of the house, because it doesn't call isPropValid

https://github.com/gregberge/xstyled/blob/66ac294eb7fa0760bf75b1ac679e9e964397c915/packages/emotion/src/createX.ts#L32-L39

agriffis commented 3 years ago

Rebased to next.

By the way, it seems my permissions only allow merging with a merge commit through the GitHub interface. I can't git push to next, and also can't do a fast-forward merge through GitHub. It's no problem—you can just do it—but I thought you should know.