🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.92k
stars
183
forks
source link
The great "rewrite to lean more on tailwind" PR #739
Previously each time tailwindcss released a new feature, twin matched that feature the "twin way".
Aside from requiring a huge amount of time and investment to do this, it also meant users needed to wait until the same features land in twin.
So in this PR I made some big changes...
Here's what's now roughly happening under the hood:
Twin grabs your classes with babel
Twin converts the classes into tailwindcss valid syntax
Classes are given to tailwindcss for matching (and for ordering if we supply a set of classes)
Twin checks and converts the result into css-in-js valid syntax
Twin replaces your classes with the new styles using babel
Previously twin would perform all of the matching and all of the ordering. Tailwind was only used for interpreting parts of your tailwind config and providing back a bunch of raw data after being run through PostCSS.
I've rewritten and rearranged the codebase - in TypeScript now too - and we now have these awesome features:
🌟 Update and use new tailwindcss features as soon as they're released tailwindcss was moved to peerDependencies meaning you can install new versions of tailwindcss as soon as they're released
🌟 Full plugin support twin now recognises all tailwindcss plugins now that it shares the same API
Turn off console log coloring Sometimes frameworks add twin's error logs in their error overlay which doesn't support the custom log colours twin uses. A bunch of color characters are added making it hard to read - you can clean this up now with hasLogColors: false added in your twin config
Better suggestions Twin will make better recommendations if you get class wrong
Better performance You'll see much faster conversions, specially in larger codebases
This work contains most of the rc4 version and shortly after it'll all be pushed into the big twin.macro@v3 release! 🌮 🎉
Previously each time tailwindcss released a new feature, twin matched that feature the "twin way". Aside from requiring a huge amount of time and investment to do this, it also meant users needed to wait until the same features land in twin.
So in this PR I made some big changes...
Here's what's now roughly happening under the hood:
Previously twin would perform all of the matching and all of the ordering. Tailwind was only used for interpreting parts of your tailwind config and providing back a bunch of raw data after being run through PostCSS.
I've rewritten and rearranged the codebase - in TypeScript now too - and we now have these awesome features:
tailwindcss was moved to
peerDependenciesmeaning you can install new versions of tailwindcss as soon as they're releasedtwin now recognises all tailwindcss plugins now that it shares the same API
Most people will use this feature just to turn off preflight styles
Sometimes frameworks add twin's error logs in their error overlay which doesn't support the custom log colours twin uses. A bunch of color characters are added making it hard to read - you can clean this up now with
hasLogColors: falseadded in your twin configTwin will make better recommendations if you get class wrong
You'll see much faster conversions, specially in larger codebases
This work contains most of the
rc4version and shortly after it'll all be pushed into the big twin.macro@v3 release! 🌮 🎉