gucong3000 / postcss-jsx

PostCSS syntax for parsing CSS in JS literals
MIT License
76 stars 28 forks source link

Provide webpack example #50

Open eliihen opened 5 years ago

eliihen commented 5 years ago

Hello,

First of all, thank you for maintaining this library, it seems like a very interesting concept.

I started looking into solutions like this after I discovered stylis, which is used by many CSS-in-JS libraries like styled-components and emotion, does not support CSS Grid. I discovered postcss-jsx and thought it may have a nice synergy with Autoprefixer's grid support, along with the plethora of other plugins like postcss-preset-env and stylelint.

Having spent two days trying to get it to work with Webpack and postcss-loader I am at the end of my ropes, unfortunately. There is very little documentation on the matter, so my first question is does postcss-jsx work with Webpack (postcss-loader) and babel?

Is there any chance for a more thorough description of how to get this project working with webpack and for example autoprefixer? Maybe an example project? Or at least a hint on where I may be in the wrong?

If I manage to get this working I will write a long blog post detailing how to set it up with webpack and parcel (not sure if parcel will work though). That post may make it easier for the next person coming along to use this project.

If you're interested in my progress, it is over at the postcss-and-styled-components repo. Currently no transformations are applied at all.

Thanks for your time, you rock

zslabs commented 5 years ago

@gucong3000 This would be a pretty interesting item to cover. My use-case (along with Autoprefixer), was https://github.com/larsenwork/postcss-easing-gradients

Questions would be around how this impacts SSR, bundle-size, etc --- or if this is the 🔥 I'm hoping it is. Thanks!