Skip to content

Instantly share code, notes, and snippets.

Created May 24, 2011 06:08
  • Star 33 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A Jekyll plugin to convert .styl to .css.
compress: true
path: ./path/to/styl
// See individual.styl below. Notice it has no YAML front matter.
@import 'individual'
margin 0
padding 0
# A Jekyll plugin to convert .styl to .css
# This plugin requires the stylus gem, do:
# $ [sudo] gem install stylus
# See _config.yml above for configuration options.
# Caveats:
# 1. Files intended for conversion must have empty YAML front matter a the top.
# See all.styl above.
# 2. You can not @import .styl files intended to be converted.
# See all.styl and individual.styl above.
module Jekyll
class StylusConverter < Converter
safe true
def setup
return if @setup
require 'stylus'
Stylus.compress = @config['stylus']['compress'] if
Stylus.paths << @config['stylus']['path'] if @config['stylus']['path']
@setup = true
rescue LoadError
STDERR.puts 'You are missing a library required for Stylus. Please run:'
STDERR.puts ' $ [sudo] gem install stylus'
raise'Missing dependency: stylus')
def matches(ext)
ext =~ /styl/i
def output_ext(ext)
def convert(content)
Stylus.compile content
rescue => e
puts "Stylus Exception: #{e.message}"
Copy link

Where does this output to?

Copy link

Thanks for this. Works perfect.

@Fresheyeball It outputs to the /_site/css folder.

Copy link

Is there a way to support the --include-css cli option?

Copy link

I am guessing I put the .rb file in the _plugins folder
I have performed gem install stylus
I guess I have to add gems: - stylus to the _config.yml
I have set the stylus: path: ./_stylus/all.styl
The all.styl I have given front matter empty tags and added an import to my .styl in this case onsenui component
do I have to disable sass conversion somehow because this would overwrite any css created by stylus?

anyway can't seem to get it to work?
probably need better instructions here.
any help appreciated

Copy link

Does not works for me too... Maybe cause I'm using guard to livereload my code?
By the way, any .css files is generated :(

Copy link

Hi Guys! I've figured out how to use this. Here's the Guide:

First, this plugin use the stylus gem, open the Gemfile in the root of your project, add a line into it:

gem "stylus"

and execute bundle install command to finish the installation.

Second, read the layout file and see how does it load the stylesheet. We take Jekyll's Official Quick-start guide for example: if you read the head.html in the _includes directory, the line 11 is

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: full_base_url }}">

and it tells you the filename of stylesheet main.css and it loads from path [project_root]/css.

[NOTE] If you don't know hot to find these files, execute with this command: bundle show minima, the terminal will return the path of Minima theme, mine is /usr/local/lib/ruby/gems/2.3.0/gems/minima-1.2.0 (Mac OS X El Capitan). Just copy every folder back to the root of your project and it's done :D

So in the root of the project, we create a directory called css, then create a file and named main.styl inside and write:


@import 'individual'

Then create another file named individual.styl, put these into the file:

  margin 0
  padding 0

OK, now we can modify _config.yml. Since we put the Stylus stylesheet in [project_root]/css, the config should be added like this:

  compress: true
  path: css

The last step, put the Ruby script into [project_root]/plugins. These scripts will be executed everytime we build the site. The directory tree should be like this:

├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _includes
│   ├── ...
├── _layouts
│   ├── ...
├── _plugins
│   └── stylus_converter.rb
├── _posts
│   └── 2016-10-04-welcome-to-jekyll.markdown
├── _site
│   ├── ...
├── css
│   ├── individual.styl
│   └── main.styl
├── feed.xml
└── index.html

Finally, we run the site with bundle exec jekyll serve command, and use browser to visit http://localhost:4000. You can see the site won't show up correctly, because we didn't put Minima theme styles into our Stylus stylesheet, but we still can verify if the stylesheet loads successfully or not, just use the Web Developer Tool of the browser and check the resources, you can see something like this:


Hope you like this ;) HAPPY CODING!

Copy link

txs1992 commented Apr 20, 2018

A project I'm working on, a tool that converts stylus into sass or less or other precompiled CSS.


Copy link

dhniels commented Dec 18, 2018

Thanks for this. I'm using this on a Jekyll blog. I couldn't get it working but then I realized my mistake... I was putting my main.styl inside my _styl folder. I created a css folder and moved main.styl into that and left all the other individual stylus partial files inside _styl and it worked :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment