Idea: Make a babel plugin to extract static styles to a CSS file

[kentcdodds]

Bringing this comment into its own issue:

---

I think that we could maybe write a babel plugin to take this:

const MyDiv = glamorous.div({padding: 20}, ({big}) => ({fontSize: big ? 20 : 30}))

to this:

const MyDiv = glamorous.div('css-dfk22d34', ({big}) => ({fontSize: big ? 20 : 30}))

Where the static styles are pre-processed and the resulting styles are extracted to a separate stylesheet, and we work with glamor's rehydration API to hook things up again. We'd need to update the glamorousComponentFactory API to accept a string class name, but that should be trivial. In any case, this would probably speed things up significantly.

I just realized that based on the way we merge glamor class names with the styles they represent into a single class name may cause issues with this, but let's start with components that have static styles only, then maybe we can get it working with a combination of static and dynamic styles.

Anyone wanna write a plugin for this? If you've not made a Babel plugin before or worked with ASTs before, you can learn about it from my talk :)

[kitten]

I added this on a branch for the SC babel plugin, but it'd work a lot better if it's wrapped in a webpack plugin. I suggest you aim to work on a webpack plugin that uses babel right from the start :)

[threepointone]

I have early ideas working decently in glam It has constraints/caveats.

• it requires native support for css vars, so if those don't exist, the developer has to write fallbacks/defaults by hand
• it bypasses all of glamor, and can't compose with glamor rules, or objects, etc. only property values can be interpolated.
• if 'isomorphic', you'll have to use webpack for your node code as well

for glamorous, it'll looks something like this -

const MyDiv = glamorous.div`
  padding: 20;
  fontSize: ${({big}) => big ? 30 : 20 }
`

• the main advantage with this method is speed. it should be able to scale insanely well.
• you can apply any css loader: postcss, sass, less, whatever (you might want to constrain this...)
• when react 16 becomes mainstream, you can drop in a variant of this 100b snippet to replace the whole 2k runtime, and get garbage collection for free.

I'm still trying to work out ssr etc for glam.

[kentcdodds]

That code snippit looks a lot like styled-components 😉 Seems like this work is more in line with that API :+1:

[kentcdodds]

And the work has begun here. This will be the core module upon which I expect to build a webpack loader which will probably be forked from this one!

[ConAntonakos]

I really miss this feature from css-loader! Any way we can help/contribute? Thanks for filing this issue.

[kentcdodds]

Awesome @ConAntonakos, could you work on this? https://github.com/kentcdodds/css-in-js-precompiler/issues/3

[ConAntonakos]

Indeed! I'm definitely still a novice when it comes to webpack plugins, but I'm glad it's at least getting attention. Thanks for opening these, @kentcdodds.

[kentcdodds]

Most of us are novices. I've never really made a babel plugin either 🙃

[kitten]

@kentcdodds I'm actually about to start working on a generic CSS preprocessing and static CSS extraction library that will become the core of the new styled-components v3 features. I'll meet up with @threepointone to get started on it and lay out an API.

My goal is for it to not only work for styled-components, but for Glamorous and Glam as well, if that's not too ambitious. This way we could all rely on a stable preprocessing core library.

Since nothing's done yet, except for some initial code on the SC babel plugin of course, all I can show you is the logo that I've come up with ^^

[kentcdodds]

That's freaky and awesome at the same time lol.

Hopefully my work so far is helpful!

[ConAntonakos]

Thanks for the update, @philpl! Looking forward to it and to contributing!

[kentcdodds]

I'm going to go ahead and close this as it's a separate effort. Thanks!