Hey Michele, I found 2 projects that are breaking the update-data script:

• js-next/react-style - deprecated
• /rtsao/styletron - styletron/styletron

Should I sent 2 different PRs?

Thanks!

https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md

(personal vision)

Everybody would agree that MicheleBertoli's comparison table is the widest (number of libraries being compared), but not the deepest (number of features being compared). I want to fix this.

First stage

The first stage is to implement a website for comparison table because it is hard to show and maintain a big number of features in markdown table.

So I did a basic website, which presents the same data as current readme. But as of now

• it lives in a separate branch,
• information is duplicated in JSON file and Readme
• is hosted with the help of GH pages
• and deployment process is manual

Obviously, we need to automate website deployment. We can use CI to push updates or something like Netlify.

1. #76 Any preferences or suggestions?

Information should not be duplicated in JSON file and Readme.

2. #79 We can generate Readme from JSON or remove the table from Readme and use website table only.

I have this idea that every feature should be proved with code example, so every change in the table will be accompanied by PR to master branch. Hence the question:

3. #78 should we move the website to master branch or at least JSON-file? So we can have one PR instead of two?

Second stage

It is important to define features precisely. I tried to do this here. CSS-in-JS is so new and fast-moving field, so it is hard to track everything and unprecise definitions make life harder. For example, Radium supports :hover, but this is not actual CSS pseudo class, but faked with JS listeners, so it will not work with disabled JS (no progressive enhancement). Disclaimer: I haven't checked what it does right now, maybe this changed.

As soon as we come up with proper definitions, we will need to come up with a code example for at least one library to show how it suppose to work. After this we can add a new feature to the table and mark our one new example as "positive" (or green color) every other library in the table will get "unknown" state (or gray color) until somebody will provide "code proof" of "positive" or "negative" result. Example of icons: #80

Improvements

4. We can make life a bit easier by implementing screenshot testing, to make sure every example looks the same.

5. We can implement benchmarks. Examples: 1, 2, 3, 4

6. Calculate footprint of CSS-in-JS solution with something, like size-limit

Other comparison tables

• oliviertassinari/a-journey-toward-better-style
• joeshub/css-in-react
• FormidableLabs/radium
• styled-components/comparison

• @Keyframes support
• @font-face support
• extensibility/plugins api
• fallbacks
• framework agnostic (not just react)
• rendering technics:
  • generates CSS and inserts style element
  • uses inline styles
  • mixed mode: inline styles, CSS, reacts event system for :hover and co (radium)

Also I would add below a description for each feature.

Would it be possible to use the NPM badge for version? This would ensure version reported is latest and also provide another link to documentation.

Just released this guy :) https://github.com/tuckerconnelly/uranium

Benefit is that it works in both React Native and React, and works with server-side rendering

This one seems is interesting, as it let's you write styles externally in CSS/SASS but you get the CSS classNames as strictly-interfaced props via a Higher-Order Component. This means that changing used styles externally by mistake, will trigger "undefined" errors when using them in React.

Take a look: https://github.com/pluralsight/react-styleable

Feature request

This is a great effort, more like a booklet of awesome frameworks.

I was trying add the GitHub stars per project in the last column, but for some reason I wasn't able to do it. Most badges require some JS script to be embedded, I even tried the shields.io badges, but wasn't successful.

If this is in your charter, may I help putting this together? Unless we head to github pages, or a separate website, anyway doing this?

Thanks.

https://github.com/tkh44/restyles

jss
j2c

it's a global? @martinandert

Appreciate you having done a lot of research into the latest wiz-bang frameworks. This is super useful.

Currently, projects are sorted alphabetically.
It would be really nice to instead have them sorted by last update

Maybe there are services/bots that could be set to update that table on major or maybe even minor version updates... not sure... but i'm coming back to css-in-js in irregular intervals to check if there is a new cool project :-)

Maybe there are already easy ways to figure out what to check, but i don't find it trivial to see what changed.

The following libraries that are in your list appear to have been abandoned by their authors. I don't know if you'd prefer to remove them from the repo (I can make a PR if you'd like) or if you want to keep them listed for historic value.

• react-inline - The repo has been archived by its owner.
• react-look - The repo has been archived by its owner and an explicit "deprecated" message has been added in its README and its description on Github suggesting people use Fela and react-fela (already listed in this project) instead.
• react-style - The author has added messages to the README file and the Github repo description warning that the code is "UNMAINTAINED".

https://github.com/irom-io/cess-loader

Syntax for this loader already supported by WebStorm.

May be ✔️/√ or ✅?

Not sure if css-modules counts
https://github.com/css-modules/css-modules

Please, add my new package for using css in js.
https://github.com/irom-io/i-css

its actually included, using plugin https://github.com/jsstyles/jss-vendor-prefixer

First of all, thank you so much for your work in compiling this table! It's an awesome reference.

Now, my question: How do you determine whether a library supports CSS file extraction (under the "Extract CSS File" column)? As an example, aphrodite has a checkmark under that column, but this issue suggests that this is explicitly not a feature of the library. Other libraries that have that checkmark in the table, such as glamorous, don't suggest any way of accomplishing this.

Either I'm misunderstanding what that column means, in which case it might be a good idea to describe it in the readme, or some of these values are incorrect. If it's the latter, I would be more than happy to go through them and compile a list of which of these libraries actually advertise this as a feature.

Thanks!

split it into 2 parts - opportunity server side render and get critical css from server code

Most of projects doesn't contain Autoprefixer itself, but v use some other tool.

Maybe we should write column name more clear, like "Vendor Prefixes"?

https://github.com/mbasso/react-cssom

At least some of the listed libraries use CSS syntax, rather than or as well as object literals (styled-components, styled-jsx, etc.), some only permit objects. It would be nice if this was also part of the table, since that is a significant factor for those who for example have to port existing CSS, or use third-party components that do not style themselves.

https://css-blocks.com/

could we have this added too?

We recently added more data to the README, such as GitHub stars and monthly downloads for each package.
However, we are not formatting the numbers and this makes the information hard to read.

This is for first-contributors only - feel free to ping me if you need help.

Hey @MicheleBertoli, I wrote a blog post on the repo I saw you already starred. Maybe something for the testimonials? 😄

Post: https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea#.igooociw6
Repo: github.com/hellofresh/css-in-js-perf-tests

In the version column if we had these:

Instead of static text, it would decrease the burden to update and also be a more accurate living reflection of what version these packages are on. Cheers