Add PostCSS support

Feature requests
1

I noticed someone mentioned in this issue that we should add PostCSS support, and @keats have replied:

I’m not super interested in that approach, the main draw to Zola for me is that it is a single binary. Having to install node + npm install some libraries is not a great workflow imo. If you wanted to do that, you don’t need to go through zola imo you can just write a small make file for it.

Firstly, I totally understand. However, I think PostCSS is more powerful than Sass and deserve as a Zola CSS building option. For me, I can use Tailwindcss ( a PostCSS plugin ) to build my Zola website.

Whatmore, build PostCSS is easy, just call postcss command to compile the target css file, for example, postcss index.css -d static/css -w.
So, maybe we can add the PostCSS option in config.toml to support this?

What do you think? I’d love to submit PR if is ok :slight_smile:

2

I would disagree :stuck_out_tongue:

postcss is not written in Rust and it cannot be shipped with the Zola binary, it needs to be installed separately. The integration would be no different than a Makefile so that’s not an interesting value-add for Zola. Especially since you will most definitely need postcss plugins installed via npm in the first place to do anything interesting with it.

3 Likes
3

I think plugins would be a better route if plugins can be added to Zola. This way no need to bundle this with Zola but it can be added through a plugin. A plugin can be a scripting language like Dyon and Gluon for scripting and Nushell for commands which are all rust base and can be embedded. By saving the scripts in the plugin directory one can add plugins and in plugins. For commands, one can have commands which are executed based on config on what to call for each life cycle event.

Just an idea.

1 Like
4

I couldn’t care less for PostCSS itself but Tailwind is indeed very helpful for fast iterating. Unfortunately I don’t see it getting ported to Sass any time soon so it’s out of the question for Zola.

5

I am using postcss with Zola. Works well. Just adds nodejs and a postcss-cli as a dependency.

The prod build step just does a zola build and then runs postcss.

6

For Tailwind specifically this may be of interest: Standalone CLI: Use Tailwind CSS without Node.js – Tailwind CSS

7

What about parcel-css? Maybe in future?
I think it’s quite promising.

1 Like
8

I’ve seen that yesterday! Very promising.

9

I am currently using Eleventy, Tailwind, and Parcel bundler. Now I can remove autoprefixer and PostCSS dependency, and the build just runs well. Is this means latest Parcel bundler are able to work without PostCSS, or the PostCSS is included?

❯ pnpm ls
Legend: production dependency, optional only, dev only

devDependencies:
@11ty/eleventy 1.0.1                         eleventy-plugin-nesting-toc 1.3.0            markdown-it 13.0.1                           
@11ty/eleventy-plugin-rss 1.2.0              html-minifier 4.0.0                          markdown-it-anchor 8.6.4                     
@11ty/eleventy-plugin-syntaxhighlight 4.0.0  jsdom 20.0.0                                 markdown-it-footnote 3.0.3                   
@parcel/transformer-sass 2.6.2               lodash 4.17.21                               node-fetch 2.6.7                             
dotenv 16.0.1                                luxon 2.4.0                                  tailwindcss 3.1.4
10

This might be a bad idea, but would it make sense to have an option for zola serve to also write HTML to disk?

I’ve got a Zola-based site with CSS written in Tailwind, and Tailwind prunes its CSS based on the classes used in the HTML output. This effectively makes a zola serve based workflow extremely painful to deal with.

11

It could be an option but it’s unlikely the html output would be used by zola serve

12

Seems to be promising:

1 Like