search

astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

CSS Tricks article #59

Open ai opened 5 years ago

ai commented 5 years ago

New step in tool promotion is to write an article.

CSS Tricks is a good platform for the first article.

How I see the content:

  1. Compare different types of CSS-in-JS: inline styles, runtime, zero-runtime.
  2. Explain why zero-runtime CSS-in-JS is good for CSS-out-JS users
  3. Show a simple example of how to add it to a new project.
  4. Show a bigger example of adding CSS-in-JS with the existed project. How to migrate (keep old components with CSS-out-JS, move CSS into JS in new components). How to add Autoprefixer, Sass, etc support.

Unfortunately, I can’t help with writing because I am not native.

ethanensler commented 5 years ago

I'd be happy to help contribute to an article. We recently switched to astroturf from a different zero-runtime css-in-js solution called [babel-plugin-css-in-js] (https://github.com/martinandert/babel-plugin-css-in-js). It started with us being unhappy with Aphrodite based on performance and syntax. The babel plugin looked like a good option since (at the time) it was maintained and had a similar but better syntax vs. Aphrodite, but it was still a compromise (inflexible classname options, incomplete css support). We started running up against the limits of the plugin a few months ago and reevaluated runtime solutions (namely emotion), but found them unperformant, especially with our test suite (trying out emotion slowed out test suite down locally by 8x). I was super happy to find astroturf because since it was based on webpack, we were able to set it up into our "holy grail": inline SCSS in our JS. I wrote a codemod to switch us over from the old solution to the new, and it's been pretty good since. We've had some problems with slow-ish webpack rebuilds, but it's unclear if it's a result of the astroturf switch or not.

jquense commented 5 years ago

@ethanensler go for it 👍 happy to read and offer input if needed :)

ai commented 5 years ago

@ethanensler awesome 😸 we can help on even early stages. You can prepare article plan as a first step to review.

ethanensler commented 5 years ago

Hey @ai (and other maintainers), wanted to let you know that I haven't forgotten about this! I've started writing the article and an incomplete draft lives in GDrive here. (I was writing it in markdown-ish since I don't know where we'll end up publishing it).