custom sass directives rspec

sass_spec.rb

require "sass"

# this just simplifies css comparison
class String
  def format_css
    self.strip.split(/\n/).select { |line| line.strip!; !line.empty? }.join('\n')
  end
end

describe "Sass to CSS" do

  # ------------------------------------------------------------
  it "should handle basic nested selectors correctly" do
    input  = <<-INPUT
      .module__element {
        color: blue;

        span {
          color: red;
        }
      }
    INPUT
    output = <<-OUTPUT
      .module__element { color: blue; }
      .module__element span { color: red; }
    OUTPUT

    engine = Sass::Engine.new(input, :syntax => :scss, :style => :compact)
    engine.render.format_css.should == output.format_css
  end


  # ------------------------------------------------------------
  it "should handle basic variables correctly" do
    input  = <<-INPUT
      $blue: blue;

      .module__element {
        color: $blue;

        span {
          color: red;
        }
      }
    INPUT
    output = <<-OUTPUT
      .module__element { color: blue; }
      .module__element span { color: red; }
    OUTPUT

    engine = Sass::Engine.new(input, :syntax => :scss, :style => :compact)
    engine.render.format_css.should == output.format_css
  end


  # ------------------------------------------------------------
  it "should handle conditionals correctly" do
    input  = <<-INPUT
      $core: false;

      .module__element {
        color: blue;

        @if $core {
          span {
            color: red;
          }
        }
      }
    INPUT
    output = <<-OUTPUT
      .module__element { color: blue; }
    OUTPUT

    engine = Sass::Engine.new(input, :syntax => :scss, :style => :compact)
    engine.render.format_css.should == output.format_css
  end


  # ------------------------------------------------------------
  it "should handle custom smart mixin correctly" do
    input  = <<-INPUT
      $smart: true;

      @mixin smart {
        @if $smart {
          @content;
        }
      }

      .module__element {
        color: blue;

        @include smart {
          color: red;
        }
      }
    INPUT
    # would be great if the output was just .module__element { color: red; }
    # but sass can't do that
    output = <<-OUTPUT
      .module__element { color: blue; color: red; }
    OUTPUT

    engine = Sass::Engine.new(input, :syntax => :scss, :style => :compact)
    engine.render.format_css.should == output.format_css
  end


  # ------------------------------------------------------------
  it "should handle custom smart directive correctly" do
    input  = <<-INPUT
      $smart: true;

      .module__element {
        color: blue;
      }

      @smart {
        .module__element {
          color: red;
        }
      }
    INPUT
    # again, sucks about the duplicated rules, but don't think there's
    # much we can do about this..?
    output = <<-OUTPUT
      .module__element { color: blue; }
      .module__element { color: red; }
    OUTPUT

    engine = Sass::Engine.new(input, :syntax => :scss, :style => :compact)
    engine.render.format_css.should == output.format_css
  end


  # ------------------------------------------------------------
  it "should handle custom smart directive with nested media queries correctly" do
    input  = <<-INPUT
      $smart: true;

      .module__element {
        color: blue;
      }

      @smart {
        .module__element {
          @media (orientation: landscape) {
            color: green;
          }
        }
      }
    INPUT
    output = <<-OUTPUT
      .module__element { color: blue; }
      @media (orientation: landscape) { .module__element { color: green; } }
    OUTPUT

    engine = Sass::Engine.new(input, :syntax => :scss, :style => :compact)
    engine.render.format_css.should == output.format_css
  end

end