Create a gist now

Instantly share code, notes, and snippets.

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}"

Where does this output to?

Thanks for this. Works perfect.

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

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

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

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

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!

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