Menu
I want to be able to create a directory of web page scratch files, where each file is a self-contained page.
This is pretty easy with regular HTML/CSS/JS:
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>lololol</p>
</body>
And it's similarly easy with Jade/Stylus/CoffeeScript:
head
:stylus
p
color red
body
p lololol
The thing is, there's no clear way to use Stylus plugins this way. Specifically, I'd like to use colorspaces.js and nib to experiment with colors more effectively:
head
:stylus
@import 'nib'
p
color CIELCH(20.470, 74.265, 314.113)
background-color linear-gradient(white, black)
body
p lololol
You can fork Jade by changing these lines like so:
/**
* 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>';
},
And if you install Jade's dependencies (I had to npm install commander and npm install mkdirp), you can navigate to /jade_fork/bin/ and do ./jade name_of_file.jade.
But I'd prefer to stay on the main branch of Jade for maintenance reasons.
305
Update:
Here is the best way I've found:
Save as e.g. ~/bin/jade:
#!/usr/bin/env node
var jade = require('jade');
jade.filters.stylus = // your code from above
require('jade/bin/jade');
It will work exactly as /usr/local/bin/jade, except it will use your code for compiling stylus, with nib etc.
Old answer:
I suggest you do it like this:
var jade = require('jade');
jade.filters.stylus = // your code from above
jade.compile( /* ... */ );
You lose out on the jade command line script, but you should be able to compile your files in this manner, while depending on jade master.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
