diff --git a/Gemfile b/Gemfile index f5774c50..b6cee980 100644 --- a/Gemfile +++ b/Gemfile @@ -30,6 +30,7 @@ group :test do end gem "less", "~> 2.2" + gem "stylus" end gem "middleman-sprockets", :github => "middleman/middleman-sprockets" diff --git a/middleman-core/lib/middleman-core/core_extensions/rendering.rb b/middleman-core/lib/middleman-core/core_extensions/rendering.rb index cfca198f..d3d72216 100644 --- a/middleman-core/lib/middleman-core/core_extensions/rendering.rb +++ b/middleman-core/lib/middleman-core/core_extensions/rendering.rb @@ -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 diff --git a/middleman-core/lib/middleman-core/renderers/stylus.rb b/middleman-core/lib/middleman-core/renderers/stylus.rb new file mode 100644 index 00000000..32250354 --- /dev/null +++ b/middleman-core/lib/middleman-core/renderers/stylus.rb @@ -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 diff --git a/middleman-more/features/stylus.feature b/middleman-more/features/stylus.feature new file mode 100644 index 00000000..df17962b --- /dev/null +++ b/middleman-more/features/stylus.feature @@ -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" diff --git a/middleman-more/fixtures/stylus-preview-app/config.rb b/middleman-more/fixtures/stylus-preview-app/config.rb new file mode 100644 index 00000000..e69de29b diff --git a/middleman-more/fixtures/stylus-preview-app/source/content.html.erb b/middleman-more/fixtures/stylus-preview-app/source/content.html.erb new file mode 100644 index 00000000..ade1f58b --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/content.html.erb @@ -0,0 +1 @@ +Hola Mundo \ No newline at end of file diff --git a/middleman-more/fixtures/stylus-preview-app/source/layout.erb b/middleman-more/fixtures/stylus-preview-app/source/layout.erb new file mode 100644 index 00000000..cd9bb66d --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/layout.erb @@ -0,0 +1 @@ +<%= yield %> \ No newline at end of file diff --git a/middleman-more/fixtures/stylus-preview-app/source/stylesheets/_partial.styl b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/_partial.styl new file mode 100644 index 00000000..3b0e67db --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/_partial.styl @@ -0,0 +1,2 @@ +body + font-size: 18px \ No newline at end of file diff --git a/middleman-more/fixtures/stylus-preview-app/source/stylesheets/_partial2.css.styl b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/_partial2.css.styl new file mode 100644 index 00000000..3b0e67db --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/_partial2.css.styl @@ -0,0 +1,2 @@ +body + font-size: 18px \ No newline at end of file diff --git a/middleman-more/fixtures/stylus-preview-app/source/stylesheets/main.css.styl b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/main.css.styl new file mode 100644 index 00000000..535fa920 --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/main.css.styl @@ -0,0 +1,4 @@ +@import '_partial' + +red + color: blue \ No newline at end of file diff --git a/middleman-more/fixtures/stylus-preview-app/source/stylesheets/main2.css.styl b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/main2.css.styl new file mode 100644 index 00000000..dc750917 --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/main2.css.styl @@ -0,0 +1,4 @@ +//= require "_partial2.css.styl" + +red + color: blue \ No newline at end of file diff --git a/middleman-more/fixtures/stylus-preview-app/source/stylesheets/plain.css.styl b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/plain.css.styl new file mode 100644 index 00000000..0c9695d2 --- /dev/null +++ b/middleman-more/fixtures/stylus-preview-app/source/stylesheets/plain.css.styl @@ -0,0 +1,2 @@ +red + color: blue \ No newline at end of file