embermap / ember-cli-tailwind

Adds Tailwind CSS to your app or addon
MIT License
100 stars 33 forks source link

Ability to add other PostCSS plugins like postcss-nested #68

Open heycarsten opened 5 years ago

heycarsten commented 5 years ago

Hi Sam 👋

I'm wondering if there's a way to configure postcss-nested somehow? I miss this feature from Sass the most and it would be nice if I could use it inside of the tailwind directory.

Thanks for all of your work on ember-cli-tailwind it has been a great experience using it to build my new personal site with Prember.

❤️

samselikoff commented 5 years ago

Yw!

Could you give me an example/use case of how you'd use this in the /tailwind directory?

I think the best solution here might be to expose the postcss pipeline so users can add their own plugins.

heycarsten commented 5 years ago

Yeah totally!

For example, I have a .doc component and I use that for styling rendered Markdown fragments and documents:

Right now it looks like:

https://github.com/heycarsten/personal-page/blob/860670e90c2c2eaf17b2c66386ae773361a5002e/app/tailwind/components/doc.css

But it would be nice if I could use the postcss-nested style syntax in there to reduce the repetition a bit.

Maybe I should just pull-in Sass and put this stuff in my /styles directory? That would work, but I like having access to the Tailwind stuff.

Thanks dude!

samselikoff commented 5 years ago

We do something very similar with our {{ui-md}} component, and we do exactly what you suggest. It looks like this:

https://gist.github.com/samselikoff/82bdb917b1ff281e85c4135f00aa5c4e

Downside is you don't get to use the cool @apply helper from Tailwind, but it's not bad at all.

heycarsten commented 5 years ago

Ohhh I see you can just use @extend, d'oh! I'll just do it that way for now. Part of me still is kinda like why add another dep if PostCSS can do it, but it's all build-time stuff for me so it doesn't really matter 🤷‍♀️ Thanks, Sam!

samselikoff commented 5 years ago

No prob, I'll leave this open as a feature request!