twstyled
twstyled | webpack-react-typescript | |
---|---|---|
1 | 1 | |
46 | 1 | |
- | - | |
0.0 | 0.0 | |
over 2 years ago | over 1 year ago | |
TypeScript | JavaScript | |
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
twstyled
-
Real-world CSS vs. CSS-in-JS performance comparison
We have a "write tachyons/tailwinds CSS-in-TypeScript" project [1] that can sit on top of any CSS-in-JS runtime (emotion and fela are both supported).
I'm hoping to eventually find one of these build-time CSS-in-JS frameworks that is smart enough to partially eval ~80% of our `
` expressions to be zero runtime.And, if/when this happens, do this as a seamless upgrade to our existing codebases, i.e. without any lines of `css={Css.m4.black.$}` in our app need to change.
Basically we're using our Truss DSL both for atomic/utility class names today + a decoupling layer to switch CSS-in-JS libs in the future if/when needed.
I think Linaria and https://github.com/twstyled/twstyled (based on/forked from Linaria) are the closest to doing this eval during compilation, but haven't had to dig in so far (runtime emotion has been fast enough for us so far).
[1]: https://github.com/homebound-team/truss/
webpack-react-typescript
What are some alternatives?
clsx - A tiny (239B) utility for constructing `className` strings conditionally.
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
css-modules-typescript-loader - Webpack loader to create TypeScript declarations for CSS Modules
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
personal_web - Source code of my personal website: https://pustelto.com