Purify css

1

Id like to remove unused css from a project. I find bootstrap/materialize is very large.

Is there any way to incorporate a 3rd library – such as css-purify – into the zola build process.

Given that the build/serve process is doing minifying.

2

There isn’t a way to do this directly with Zola. Depending on how your tool works though you can often achieve the same thing with bash. For example I use tailwindcss alongside Zola, and tailwind has a purge and build stage.

3

Yeah im starting to use bits of tailwind with zola, which works fine and the purging process is much appreciated. Love that tailwind does that thinning actually.

For the obscenely large materialize.css I’m using node purifycss on a make file for the time being. Ach, its fine but would prefer a built in process or something that ‘watches’.

4

Yeah, so what I was saying is it all depends on how you structure your command to start your processes. For example, here’s a package.json that starts zola and tailwind for me.

{
  "scripts": {
    "build": "zola build $BUILD_OPTS && npx tailwindcss -i ./public/input.css -o ./public/style.css -m",
    "serve": "zola serve --interface 0.0.0.0 & npx tailwindcss -i ./public/input.css -o ./public/style.css --watch && wait",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.9",
    "tailwindcss": "^3.3.2"
  }
}

So if I npm run build or serve or whatever, it will do the zola thing first, and then take the output of that and run the next step. In this case that just happens to be tailwind, but you would substitute that with whatever command line you want to run.

I’m stopping short of giving you specific advice because I don’t know the exact tools you’re using well, and it’s important to understand exactly what you’re doing. For example, if you look at the serve script, after the zola serve part of the command there’s an & which will take that process and put it in the background, which makes sense because zola serve is a long lived process that watches your changes and rebuilds each time.

Hopefully you can use that package.json file to build something into your makefile that works for you. If you get in trouble run ps -ax to see running processes, find zola, and the kill -9 it’s process ID. Sometimes that happens if one of the processes gets started in the background but the second one dies, which is useful when you’re trying to get your commands working and need to debug stuff.

Hope that helps.

5

thanks.
make can spawn commands including background ones such as zola serve and tailwindcss -- watch.
purifycss (or uncss) terminates and cannot watch for a change – but that is a minor point.

i was hoping to use a rust version of purify within zola. the source code does provide some pointers using the similar minify.

however, your use of chaining makes me rethink the idea of a semi-monolithic zola that performs the related but separate processes of minifying, purifying, image resizing and anything else that pops up.

1 Like