Roadmap

[stereobooster]

(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. Deployment via travis-ci #76 Any preferences or suggestions?

Information should not be duplicated in JSON file and Readme.

2. Webpage in master 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. Webpage in master 1 #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

[MicheleBertoli]

This is awesome, thank you very much @stereobooster.

[stereobooster]

1. I'm lazy so implemented it with TravisCI Deployment via travis-ci #76
2. We can generate Readme from JSON or remove the table from Readme and use website table only.
3. should we move the website to master branch or at least JSON-file? So we can have one PR instead of two?

@MicheleBertoli any preferences for 2, 3?

[MicheleBertoli]

Thank you very much, @stereobooster.
I believe being lazy is a great skill, and Travis works pretty well.
I wouldn't remove the table from the README (for now, at least) and I'd try to keep master and website separated - if we manage to have a single build process (see my comments on the PR).
I hope this makes sense.

[stereobooster]

I found this gem https://github.com/milesj/aesthetic. This lib lists a lot of syntax/features with examples.

Also found another edge case: JSS + rehydration

Once JS on the client is loaded, components initialized and your JSS styles are regenerated, it's a good time to remove server-side generated style tag in order to avoid side-effects, example in react.

Yeah JSS has SSR for styles, but on client they are used only before JS app started, after JSS generates styles again.

[stereobooster]

Nice benchmark http://necolas.github.io/react-native-web/benchmarks/

[stereobooster]

New hotness - babel-plugin-macros:

• styled-components babel-plugin-macros #1200 styled-components/styled-components#1256
• emotion chore: upgrade to babel-plugin-macros emotion-js/emotion#525
• glamor Add support for babel-macros threepointone/glamor#312