Question

I want to render css which is generated on the fly at each request.

For example, in Express.js I have a route:

/clients/:clientId/style.css

When I get a matching request, I want to look up the Client from my repository and pull out their text colour. Then I want push this colour out to the css response.

Is there a templating engine that can render a text file, say style.less, that I can parse with less/stylus?

Any ideas, alternative strategies?

Cheers,
Gordon

Answer 1

If you haven’t realized this yet, I’m thinking you have, you can use define(name, function) and define(name, variable) in Stylus to provide dynamic content within the CSS.

Assuming you use Express and call the command ./node_modules/express/bin/express -t jade -c stylus to create a skeleton site, it should take care of the templating engines–Stylus would handle the CSS and Jade (or the view_engine of your choice) handles the rest; I don’t see how the view_engine matters here (could you explain your comment about it preventing interpolation of data in a style tag?)

It might be that you’re embedding the style tag directly into the html page? Try extracting it to its own template file and letting Stylus have it if that’s the case.

If you want to set this up manually, you need something like this inside of app.configure():

  app.use stylus.middleware({
    force: true
    src: "#{__dirname}/views"
    dest: "#{__dirname}/public/css"
    compress: true
  })

It looks like this SO post may have an alternative strategy, depending on your specific needs.

Hope this gives you some ideas, if not a complete solution 🙂