Stylus support and tests. Fixes #649

This commit is contained in:
Thomas Reynolds 2012-10-28 12:18:29 -07:00
parent 2ea35b3004
commit 0eb906efac
12 changed files with 107 additions and 0 deletions

View file

@ -30,6 +30,7 @@ group :test do
end
gem "less", "~> 2.2"
gem "stylus"
end
gem "middleman-sprockets", :github => "middleman/middleman-sprockets"

View file

@ -68,6 +68,13 @@ module Middleman
app.register Middleman::Renderers::Less
rescue LoadError
end
# Stylus Support
begin
require "middleman-core/renderers/stylus"
app.register Middleman::Renderers::Stylus
rescue LoadError
end
end
alias :included :registered

View file

@ -0,0 +1,28 @@
require "stylus"
require "stylus/tilt"
module Middleman
module Renderers
# Sass renderer
module Stylus
# Setup extension
class << self
# Once registered
def registered(app)
# Default less options
app.set :styl, {}
app.before_configuration do
template_extensions :styl => :css
end
end
alias :included :registered
end
end
end
end

View file

@ -0,0 +1,55 @@
@nojava
Feature: Stylus Updates and Partials
Scenario: The preview server should update stylesheets when Stylus changes
Given the Server is running at "stylus-preview-app"
And the file "source/stylesheets/plain.css.styl" has the contents
"""
red
color: #f0f0f0
"""
When I go to "/stylesheets/plain.css"
Then I should see "color: #f0f0f0;"
And the file "source/stylesheets/plain.css.styl" has the contents
"""
red
color: #0f0f0f
"""
When I go to "/stylesheets/plain.css"
Then I should see "color: #0f0f0f;"
Scenario: The preview server should update stylesheets when Stylus partials change
Given the Server is running at "stylus-preview-app"
And the file "source/stylesheets/main.css.styl" has the contents
"""
@import '_partial'
red
color: #f0f0f0
"""
And the file "source/stylesheets/_partial.styl" has the contents
"""
body
font-size: 14px
"""
When I go to "/stylesheets/main.css"
Then I should see "color: #f0f0f0;"
And I should see "font-size: 14px;"
And the file "source/stylesheets/main.css.styl" has the contents
"""
@import '_partial'
red
color: #0f0f0f
"""
And the file "source/stylesheets/_partial.styl" has the contents
"""
body
font-size: 18px
"""
When I go to "/stylesheets/main.css"
Then I should see "color: #0f0f0f;"
And I should see "font-size: 18px"
Scenario: Stylus partials should work when building
Given a successfully built app at "stylus-preview-app"
Then the file "build/stylesheets/main.css" should contain "font-size: 18px"

View file

@ -0,0 +1 @@
Hola Mundo

View file

@ -0,0 +1 @@
<%= yield %>

View file

@ -0,0 +1,2 @@
body
font-size: 18px

View file

@ -0,0 +1,2 @@
body
font-size: 18px

View file

@ -0,0 +1,4 @@
@import '_partial'
red
color: blue

View file

@ -0,0 +1,4 @@
//= require "_partial2.css.styl"
red
color: blue

View file

@ -0,0 +1,2 @@
red
color: blue