Fancy - v2.0.0 #20
Merged
Fancy - v2.0.0 #20
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 2 commits
July 2, 2018 18:33
Under the hood, v2.0.0 is now running an enhanced "fork" of [Emotion](https://github.com/emotion-js/emotion). Previously, Fancy's internals was a custom from-scratch implementation that worked very similarly as Styled Components/Emotions and CSS Modules. Fancy was originally created to be a super tiny CSS-Modules client-side compiler. This worked wonderfully! After implementation, we realized that Fancy _needed_ to support: - Scoping - Theming - iFrame support (out-of-the-box) Fancy v1.x did support these features, but they weren't reliable. This is because the core CSS processing functionally for something like CSS Modules is very different compared to something like Styled Components (with theming). Rather than reverse engineer things to make it fit, it was decided that v2.x would use Emotion.
Pull Request Test Coverage Report for Build 131
💛 - Coveralls |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fancy - v2.0.0
Let's get Emotional 👩🎤
Under the hood, v2.0.0 is now running an enhanced "fork" of Emotion. Previously, Fancy's internals was a custom from-scratch implementation that worked very similarly as Styled Components/Emotions and CSS Modules.
Fancy was originally created to be a super tiny CSS-Modules client-side compiler. This worked wonderfully! After implementation, we realized that Fancy needed to support:
Fancy v1.x did support these features, but they weren't reliable. This is because the core CSS processing functionally for something like CSS Modules is very different compared to something like Styled Components (with theming).
Rather than reverse engineer things to make it fit, it was decided that v2.x would use Emotion.
Enhance! 🤳
As of today, Emotion supports none of the (above) requirements we need. It also does not provide any way of implementing these features without touching core code.
v2.0.0's implementation of Emotion involves copying over only the necessary files and modifying only the necessary lines to add these features. This allows for us to more easily sync up with the Emotion library, if we ever need to.
Changes 😱
Check out Emotion's documentation to see how the
styledfunction can be used.Previously CSS Modules-like implementations of Fancy is no longer supported in v2.0.0.