Geek asks and answers

Can I use Stylus plugins with embedded Stylus code embedded in a Jade file?

I want to be able to create a screenshot directory of a webpage where each file is a standalone page.

This is pretty easy using regular HTML / CSS / JS:

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>lololol</p>
</body>

And just as easy with Jade / Stylus / CoffeeScript:

head
    :stylus
        p
            color red
body
    p lololol

The fact is that there is no clear way to use Stylus plugins this way. In particular, I would like to use colorspaces.js and nib to experiment with colors more efficiently: 

head
    :stylus
        @import 'nib'
        p
            color CIELCH(20.470, 74.265, 314.113)
            background-color linear-gradient(white, black)
body
    p lololol

The workaround that I am currently using

You can develop Jade by changing these lines as follows:

  /**
   * Transform stylus to css, wrapped in style tags.
   */

  stylus: function(str, options){
+   colorspaces = require('colorspaces');
+   nib = require('nib');
    var ret;
    str = str.replace(/\\n/g, '\n');
    var stylus = require('stylus');
-   stylus(str, options).render(function(err, css){
+   stylus(str, options).use(colorspaces()).use(nib()).render(function(err, css){
      if (err) throw err;
      ret = css.replace(/\n/g, '\\n');
    });
    return '<style type="text/css">' + ret + '</style>'; 
  },

Jade ( npm install commander npm install mkdirp), /jade_fork/bin/ ./jade name_of_file.jade.

.

+5
1

Update:

, :

, . ~/bin/jade:

#!/usr/bin/env node

var jade = require('jade');

jade.filters.stylus = // your code from above

require('jade/bin/jade');

/usr/local/bin/jade, , nib ..

:

:

var jade = require('jade');

jade.filters.stylus = // your code from above

jade.compile( /* ... */ );

jade script, , .

+1

More articles:


All Articles