Hugo: Add resources.PostCSS

[bep]

This relates to #4854 -- the alternative would be SASS mixins. But I suspect many would want to use the PostCSS autoprefixer to do this grunt work. And to use that effectively in Hugo, we would need some kind of resources.Autoprefix or something func.

https://github.com/postcss/autoprefixer
https://github.com/postcss/postcss-cli

This would in practice mean to shell out to postcss-cli until a Go implementation pops up. I don't think the speed should be a big problem, assuming you would do this for a small set of CSS files, and you could wrap it in if not .IsServer during development if needed.

@RickCogley @onedrawingperday and others? Opinions? Really needed?

[RickCogley]

Autoprefixer is so important in my opinion, that, I think it's not a
problem if it's a bit slow.

On Mon, Jun 18, 2018 at 6:54 PM Bjørn Erik Pedersen <
[email protected]> wrote:

This relates to #4854 https://github.com/gohugoio/hugo/issues/4854 --
the alternative would be SASS mixins. But I suspect many would want to use
the PostCSS autoprefixer to do this grunt work. And to use that effectively
in Hugo, we would need some kind of resources.Autoprefix func.

https://github.com/postcss/autoprefixer
https://github.com/pirxpilot/postcss-cli

This would in practice mean to shell out to postcss-cli until a Go
implementation pops up. I don't think the speed should be a big problem,
assuming you would do this for a small set of CSS files, and you could wrap
it in if not .IsServer during development if needed.

@RickCogley https://github.com/RickCogley @onedrawingperday
https://github.com/onedrawingperday and others? Opinions? Really needed?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gohugoio/hugo/issues/4858, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAfRSJ1s3mslP5DDSBjCLc6Beli2E0mQks5t93jfgaJpZM4UrdcL
.

--
Rick Cogley
rick.[email protected] | M: 090-9959-5452

• Bilingual IT solutions and management firm—eSolia*Next Japan National
  Holiday: "Marine Day" 16 July, 2018
  See Our Refreshed Websites: https://esolia.com and https://esolia.co.jp

--
This email message and any attachments are confidential, and are meant to
be read by the intended recipient only. If you are not the intended
recipient, we would request you delete this message or any attachments
without reading or distributing, and kindly advise eSolia Inc. (contacts:
esolia.com/about http://esolia.com/about). Thank you in advance.

[onedrawingperday]

I agree with @RickCogley

[randallmlough]

Would we be able to configure the Autoprefixer rules or only use the defaults?

And not to take if off topic, but since you're thinking of the postcss-cli route could that also give us uncss? This probably moves away from the Hugo philosophy, but allowing configs in the asset directory could be really sweet here. For example a postcss.config.js in /assets which would contain all of your rules including something like uncss or similar plugins. Then maybe you just call it through resources.PostCSS on build only.

For me personally that would remove the need for using Gulp completely.

Regardless, amazing work with this! Excited to use it.

[bep]

Would we be able to configure the Autoprefixer rules or only use the defaults?

I have thought about it, and I think I will just add resources.PostCSS (or something), and make it so you can set the --config in both global config and per invocation (if needed).

[bep]

I have added a quick implementation and tested this. It works great.

• Not particularly super-fast. In my demo project (full Bootstrap 4 SCSS source) and with default PostCSS settings it adds 800ms to the build.
• In practice this will not matter too much as it will be masked behind the rest of the site build + you will only feel it in server mode rebuilds if you do SCSS edits.
• And you can always turn off PostCSS in development if you want (if .IsServer)

[bep]

Read the cli docs a litt fast -- it actually support both reading from stdin and writing to stdout, which means we can get rid of the temp files and stream directly, which makes it slightly faster. This is going to be good.

[bep]

Here is my current test site with Bootstrap 4 with some added styles ... all processed with Hugo. Autoprefixer rules are the same as Boostrap uses in their build:

https://temp.bep.is/hugoscss/

[RickCogley]

Thank you. This is great!

[ghost]

This would in practice mean to shell out to postcss-cli until a Go implementation pops up.

No pain no gain. If it's easy enough not to do why would anyone do…

[T]he alternative would be SASS mixins.

Why would we have Sass without Sass mixins?

[bep]

Why would we have Sass without Sass mixins?

You would not. But I meant specific mixins to handle browser vendor prefixing