New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

For styled API - at compile time ensure that only props that are valid html attributes are passed down #29

Closed

itsdouges opened this issue Jan 3, 2020 · 1 comment

Labels

new feature 🆕

Collaborator

itsdouges commented Jan 3, 2020 •

edited

So take this code:

const Container = styled.div`
  color: ${props => props.primaryColor}; // will be destructured
  width: ${props => props.width}; // will not be destructured because its a valid attribute
`;

Should generate:

const Container = ({ primaryColor, ...props  }) => (
  <>
    <style>{`.a { color: var(--primary-color-a); width: var(--width-b) }`}</style>
    <div style={{ '--primary-color-a': primaryColor, '--width-a': props.width }} {...props}>{props.children}</div>
  </>
);

itsdouges added the new feature 🆕 label

itsdouges added this to the Phase 1 milestone

Collaborator Author

itsdouges commented Jan 10, 2020

added in 9338317 and 7b13b3a

itsdouges closed this as completed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment