Aphrodite doesn't yet support parent > child relationships like this one parent:hover child { ... }. With Afro that relationship just works.

Lastly, Aphrodite writes CSS dynamically as you need it in your components. Afro inserts all the CSS (deduped) at once, making the model quite a bit simpler. There may be some benefits to dynamically inserted CSS, like less work to do on initialization, but there are definitely a few caveats.

$3

CSS modules introduce new syntax into CSS via composes and require a build system like postcss or webpack to make it work.

Where you can help

$3

Right now the autoprefixing library uses inline style names which are camel-cased. We could skip this step entirely if we had an autoprefixer library that could deal with hyphened properties.

FAQ

$3

Good observation! This is something I was planning to exclude from this library. The reason it's important to inject a style tag is that allows your modules to work standalone.

You can require a module and run that code and it will just work without any style-specific initialization on your end. With that being said, it's good practice to export your styles alongside your component so you can compose the styles together.

If you're building an app and you have control over the styles, you'll want to compose all the styles together to get the benefits of de-duped CSS.

You also may want to ignore the injection all together and just render the CSS to a string and stick it in a React