Razzle: Is it time to drop Aphrodite?

[jaredpalmer]

My problem is Aphrodite is a lack of composebility....base styles with overrides are impossible. I prefer jsxstyle for this, but it has not yet been updated for React 15.

Should we move to CSS Modules in the meantime? If so, What PostCSS plugins should we use?

[rowellx68]

Could allow SASS-like writing of CSS --> https://github.com/jonathantneal/precss

[b2whats]

@jaredpalmer mm, yes

      { test: /\.css$/, loader: "style!css!postcss" },  //vendor css
      { test: /\.mcss$/, loader: "style!css?module&localIdentName=[name]__[local]___[hash:base64:5]!postcss" }, // css modules for complex logic

[b2whats]

and may be change aphrodite on css-look or jss??

[ranyefet]

Does CSS modules support server side rendering?
Also what about selectors like nth-child and other stuff that currently not usable?
Will CSS modules improve on that?

[jaredpalmer]

@ranyefet yes, css modules does support ssr, we could use extract-text loader. Problem is that you usually have to include all of the css for the whole app, which can get heavy. There are ways to async load using react-side-effect though.

[b2whats]

@jaredpalmer
Problem is that you usually have to include all of the css for the whole app, which can get heavy.
This is not problem. We can wrap css from css files similary aphrodite and render on server only critical styles for first view.

[ranyefet]

Maybe we can use Isomorphic-Style-Loader which render CSS critical path, so it fixes the issues to loading the whole app CSS for every page.
What do you think?

[jaredpalmer]

Update on this:

I am had an idea / working on modification to jsxstyle that I'm hoping will be a game changer. If you aren't familiar with jsxstyle, you co-locate component styles as props like <Block backgroundColor="#000" />. My fork introduces special prop prefixes for the most common pseudo selectors. When it's done you'll be able to write <Block backgroundColor="#000" hoverBackgroundColor="#555" />. It will then extract non-conflicting classnames as it does now, but also add new pseudo selectors declarations to respective CSS classes.

When I'm finished, I will likely replace Aphrodite with this solution.