Skip to content
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.

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

RFC: remove theming #212

Closed
tkh44 opened this issue Jul 30, 2017 · 4 comments
Closed

RFC: remove theming #212

tkh44 opened this issue Jul 30, 2017 · 4 comments
Labels

Comments

@tkh44
Copy link
Member

tkh44 commented Jul 30, 2017

I'm starting to think we should remove built in theming and just let users use the theming library themselves. Having theming built in adds overhead and code complexity to styled that I don't think is necessary. I prefer to just import my theme file but I may be an outlier.

Some notes.
If we remove theming...

  • Styled becomes a pure functional component and we can create a factory with createEagerFactory to call it 🔥
  • Bundle size will drop
  • Performance will be better
  • Users that want theming can just wrap styled with withTheme
  • We may be able to add theming conditionally with babel option (we could just wrap styled with withTheme and import it if the user wants theming)
@Connorelsea
Copy link

I'd be happy with the decrease in bundle size when not using theming. Emotion currently sitting around 3.4kb in my app

image

@thangngoc89
Copy link
Contributor

@Connorelsea since version 6.0 , you have to opt-in for themeing to use it.

tkh44 pushed a commit that referenced this issue Aug 2, 2017
- first pass
tkh44 pushed a commit that referenced this issue Aug 3, 2017
* #212 - remove theming

- first pass

* Apply all classes for components as selectors
@tkh44
Copy link
Member Author

tkh44 commented Aug 3, 2017

closed in #225

@tkh44 tkh44 closed this as completed Aug 3, 2017
@ericclemmons
Copy link

Personally, I wouldn't mind if theming could be automatically like so:

import styled from "emotion/react/themed";

export default styled.div`...`;

Which would be the equivalent of:

import styled from "emotion/react";
import { withTheme } from "theming";

export default withTheme(styled.div`...`);

Having converted a large styled-components repo to emotion, everything was largely find/replace besides wrapping all of the components with withTheme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants