I would like to include some more features

[kof]

• @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.

[MicheleBertoli]

hey @kof,

adding some columns and descriptions would help. For example, it would be nice to know if a package supports the server-side rendering or not.

In general, I would prefer to keep the table as minimalistic as possible listing just the "key" features. In my opinion, the most important things are the code examples for each package.

For people who wants a massive list of features the Radium's one is perfect.

[kof]

Well, how do you know what a key feature is and what not) it depends on use case. I thought the intent is to compare those components from all possible aspects.

[MicheleBertoli]

You are right, @kof I just think that if the columns are too many, the table becomes less useful ;)

[kof]

Yes, we need a better format.

[HighOnDrive]

There should also be a column for solutions that work outside of React, like the exceptional JSStyles API. Being bound to only one framework is automatically not that great.

[MicheleBertoli]

We would need an interactive page, like: http://reactcheatsheet.com/

[rtsao]

@HighOnDrive agreed on having another column that indicates whether React is a dependency or not.

@MicheleBertoli I would be interested in helping create the interactive page (presumably to be hosted on a gh-pages branch for this repo?).

It would be nice to have a comprehensive table that isn't https://github.com/FormidableLabs/radium/tree/master/docs/comparison which IMHO is patently biased towards Radium's css-in-js implementation and is littered with unhelpful platitudes such as "same pitfalls as CSS."

[MicheleBertoli]

That would be awesome @rtsao.

[robinweser]

If there's something I can help you with, just text me :) I'd love to have a rich and dynamic comparison page. @MicheleBertoli

I also think @kof s arguments should be included somewhere as they are quite important features.

I think it could also be helpful to have e.g. a list of other useful tools/repositories that help using inline styles, but are not actually a discrete CSS in JS solution but rather used in combination with one.

[MicheleBertoli]

Sounds great @rofrischmann.

I'll be more than happy to create a web app all together. Are you still in @rtsao?

@kof's feature are very important, we just need something better than a table to show them.

[rtsao]

@MicheleBertoli Yes, I'm down!

[MicheleBertoli]

Here we go @rofrischmann @rtsao

[robinweser]

Short update @kof @MicheleBertoli I have started drafting a simple interactive, responsive listing. I will push a first version soon :P

[MicheleBertoli]

awesome @rofrischmann, thanks! can't wait to see it :)

[robinweser]

We should perhaps also shoutout to all the owners to add additional information soon. ;)

[tomByrer]

I hope to see it soon; about to build a new tech stack from scratch, so the extra info will help.

[kof]

added "rendering technics" to the description

[robinweser]

I was kind of busy lately, will push the page by the end of the week hopefully.

[MoOx]

Having a column to say if a lib is compatible with react native would be nice (eg: react-look does via react-look-native).

[Kielan]

@rofrischmann if you have any progress feel free to push it in a separate repo and someone can maybe help you out.

Is there no list of reserved keys for this project available to developers? I am looking for the equivalent to transition-delay I assumed it would be transitionDelay: '0.2s',

[robinweser]

Finally pushed first table implementation. One can sort by clicking column headers, search by package names and filter requirements. Still we need to improve the UX/UI as it basically is ugly right now, but it works. Also I will add a mobile-friendly version soon, but first I guess we now need all the data for all the packages. Basically a simple PR with changes to https://github.com/MicheleBertoli/css-in-js/blob/webpage/data.js would do the job. I will add a static build as more data is added so we can push to ghpages.

Also I will add some column descriptions, credits etc.

[buildbreakdo]

Some pretty big items missing from this like:

• Are CSS rule declaration bodies safe by default? React Inline runs everything through escapeTextContentForBrowser to avoid XSS.
• Are at-media selectors safe by default (@import is open to XSS)?
• Is there a build step?
• Unique syntax?
• Selectors scoped or still in global namespace?

[robinweser]

I guess we can merge the first 2 and just call it XSS vulnerability? The others seem to be fine. I may add those later on :) Thank you @buildbreakdo

[stereobooster]

How about push existing version + every undefined value mark in table as grey area e.g. unknown. After working version will be online it will be fastly populated by volunteers

[stereobooster]

New version of website https://github.com/MicheleBertoli/css-in-js/pull/58

[stereobooster]

I want to add more columns to https://stereobooster.github.io/css-in-js/ and I thought it would be nice actually define what each feature mean, illustrate it with example, show advantages disadvantages of each approach. So I started this repo https://github.com/stereobooster/css-in-js-systematic-approach/ cc @markdalgleish

Small correction: @import is open to CSRF, not XSS

[MicheleBertoli]

🎉 http://michelebertoli.github.io/css-in-js/ 🎉 Thanks @stereobooster

[stereobooster]

Almost finished polishing of "CSS-in-JS 101"

As soon as we agree on terminology. I want to start to add more features (columns) to table.

[MicheleBertoli]

I'm closing this in favor of #73