twstyled
personal_web
twstyled | personal_web | |
---|---|---|
1 | 1 | |
46 | 13 | |
- | - | |
0.0 | 4.2 | |
over 2 years ago | 16 days ago | |
TypeScript | JavaScript | |
MIT License | 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/
personal_web
-
Real-world CSS vs. CSS-in-JS performance comparison
or you can read the source markdown here:
https://github.com/Pustelto/personal_web/blob/master/src/blo...
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
webpack-react-typescript
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
classnames - A simple javascript utility for conditionally joining classNames together
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅