A Jekyll plugin to convert .styl to .css.

_config.yml

stylus:
  compress: true
  path: ./path/to/styl

all.styl

---
---
// See individual.styl below. Notice it has no YAML front matter.
@import 'individual'

individual.styl

html
  margin 0
  padding 0

stylus_converter.rb

# 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
        @config['stylus']['compress']
      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 FatalException.new('Missing dependency: stylus')
    end
    
    def matches(ext)
      ext =~ /styl/i
    end
    
    def output_ext(ext)
      '.css'
    end
    
    def convert(content)
      begin
        setup
        Stylus.compile content
      rescue => e
        puts "Stylus Exception: #{e.message}"
      end
    end
  end
end

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:

html
  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:

stylus:
  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:

project_root
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _includes
│   ├── ...
├── _layouts
│   ├── ...
├── _plugins
│   └── stylus_converter.rb
├── _posts
│   └── 2016-10-04-welcome-to-jekyll.markdown
├── _site
│   ├── ...
├── about.md
├── 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!

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

stylus-converter

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 :)