Is there a renderer for css?

I’m new from HEXO in few days.

I think HUGO is more stable and has good features than HEXO such as folder based URL that is amzing idea and multi-language. I’m a Korean so it is really impressive.

However, in my searching, HUGO does not support any renderer for CSS, doesn’t it?
I used Stylus in HEXO it was really convenience to handle CSS.
It provides rich syntax that looks like a programming language not just a ‘stylesheet’. Therefore want to use it in HUGO as well.
But, if support other renderer, let me know about it.

Hi @donggas90 and welcome to the forums! Hexo is a pretty awesome tool, so it’s exciting to hear that you’re so impressed with Hugo.

Currently, there are no CSS/JS preprocessors that are baked into Hugo itself, but there are many sorta “unofficial” community-developed tools that combine a Node/JS based pipeline with Hugo for local development.

While not technically a “preprocessor”, the release of v20 included a cool new “Custom Outputs” feature, which allows you to use Hugo’s templating across any file type. Here are the docs:

Also going to change this to support and point you to the following thread :smile:

I see. It was quite complex issue, though.
Probably just making a separated render tool is better idea now.

Edit:
I made a JS for Windows7 users.
(I forgot to comment about supporting Windows binaries. :wink:)
Here is a script can render .styl and re-write date to fix .Lastmod issue.

const stylus = require(process.env.APPDATA + "/npm/node_modules/stylus");
const readdirp = require(process.env.APPDATA + "/npm/node_modules/readdirp");
const moment = require(process.env.APPDATA + "/npm/node_modules/moment");
const fs = require("fs");
const path = require("path");
const timeFormat = "YYYY-MM-DD hh:mm [GMT]Z";
console.info("Time Format: '" + timeFormat + "'");

const renderOutput = "./static/css/"

readdirp({ root: "./content", fileFilter: "*" })
    .on("data", function (entry) {
        var file = fs.readFileSync(entry.fullPath, "utf-8");
        var newFile = file.replace("@{now}", moment().format(timeFormat));
        if (newFile !== file) {
            fs.writeFileSync(entry.fullPath, newFile);
            console.info("Date Wrote: '" + entry.fullPath + "'");
        }
    });

readdirp({ root: "./stylus", fileFilter: "*.styl" })
    .on("data", function (entry) {
        var file = fs.readFileSync(entry.fullPath, "utf-8");
        stylus.render(file, { filename: entry.fullPath }, function(err, css) {
            if (err) {
                throw err;
            }
            var output = path.join(renderOutput, entry.parentDir, entry.name.replace(".styl", ".css"));
            try {
            fs.writeFileSync(output, css);
            } catch (err) {
                console.error(err);
                console.error("Failed to Render: '" + entry.fullPath + "' to '" + output + "'");
                console.error("Did you create the folder for the file '" + output + "'?");
            }
            console.info("Stylus Rendered: '" + entry.fullPath + "' to '" + output + "'");
        });
    });
  1. Installation
    You have to install Node.js and then install stylus, readdirp and moment packages as global(npm install [package-name] -g). You can run this code by command, node.exe (this-script-file.js). Make a .cmd or .bat is cool idea instead input whole command in terminal manually.

  2. About Stylus
    Place .styls in “stylus” folder. It will output at “static/css” folder by default. Note that you have to create output folder manually. otherwise render will fail.

  3. About Lastmod
    Place text @{now} in any file in “content” folder. The text @{now} will replace with the time text that the code executed time. You can change the format of time to modify timeFormat variable. Check Moment.js for more detail about time format. Note that this code using UTF-8 encoding by default. If you using other encoding, will corrupt the files.