scss-lint-bliss 1.0.0

data/spec/scss_lint/linter/color_variable_spec.rb

@@ -0,0 +1,145 @@
+require 'spec_helper'
+
+describe SCSSLint::Linter::ColorVariable do
+  context 'when a color literal is used in a variable declaration' do
+    let(:scss) { <<-SCSS }
+      $my-color: #f00;
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a color literal is used in a property' do
+    let(:scss) { <<-SCSS }
+      p {
+        color: #f00;
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when a color literal is used in a function call' do
+    let(:scss) { <<-SCSS }
+      p {
+        color: my-func(#f00);
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when a color literal is used in a mixin' do
+    let(:scss) { <<-SCSS }
+      p {
+        @include my-mixin(#f00);
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when a color literal is used in a shorthand property' do
+    let(:scss) { <<-SCSS }
+      p {
+        border: 1px solid #f00;
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when a number is used in a property' do
+    let(:scss) { <<-SCSS }
+      p {
+        z-index: 9000;
+        transition-duration: 250ms;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a non-color keyword is used in a property' do
+    let(:scss) { <<-SCSS }
+      p {
+        overflow: hidden;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a variable is used in a property' do
+    let(:scss) { <<-SCSS }
+      p {
+        color: $my-color;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a variable is used in a function call' do
+    let(:scss) { <<-SCSS }
+      p {
+        color: my-func($my-color);
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a variable is used in a shorthand property' do
+    let(:scss) { <<-SCSS }
+      p {
+        border: 1px solid $my-color;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a property contains "transparent"' do
+    let(:scss) { <<-SCSS }
+      p {
+        border: 1px solid transparent;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a property with function calls contains "transparent"' do
+    let(:scss) { <<-SCSS }
+      p {
+        border: 1px solid some-func(transparent);
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a color literal is used in the special rgba shorthand helper' do
+    let(:scss) { <<-SCSS }
+      p {
+        color: rgba(#fff, .5);
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a color literal is used in a map declaration' do
+    let(:scss) { <<-SCSS }
+      $shades-of-gray: (
+        darker:  #4c4c4c,
+        dark:    #626262,
+        light:   #7d7d7d,
+        lighter: #979797
+      );
+    SCSS
+
+    it { should_not report_lint }
+  end
+end

data/spec/scss_lint/linter/comment_spec.rb

@@ -0,0 +1,79 @@
+require 'spec_helper'
+
+describe SCSSLint::Linter::Comment do
+  context 'when no comments exist' do
+    let(:scss) { <<-SCSS }
+      p {
+        margin: 0;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when comment is a single line comment' do
+    let(:scss) { '// Single line comment' }
+
+    it { should_not report_lint }
+  end
+
+  context 'when comment is a single line comment at the end of a line' do
+    let(:scss) { <<-SCSS }
+      p {
+        margin: 0; // Comment at end of line
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when comment is a multi-line comment' do
+    let(:scss) { <<-SCSS }
+      h1 {
+        color: #eee;
+      }
+      /*
+       * This is a multi-line comment that should report a lint
+       */
+      p {
+        color: #DDD;
+      }
+    SCSS
+
+    it { should report_lint line: 4 }
+  end
+
+  context 'when multi-line-style comment is a at the end of a line' do
+    let(:scss) { <<-SCSS }
+      h1 {
+        color: #eee; /* This is a comment */
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when multi-line comment is allowed by config' do
+    let(:linter_config) { { 'allowed' => '^[/\\* ]*Copyright' } }
+    let(:scss) { <<-SCSS }
+      /* Copyright someone. */
+      a {
+        color: #DDD;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when multi-line comment is not allowed by config' do
+    let(:linter_config) { { 'allowed' => '^[/\\* ]*Copyright' } }
+    let(:scss) { <<-SCSS }
+      /* Other multiline. */
+      p {
+        color: #DDD;
+      }
+    SCSS
+
+    it { should report_lint }
+  end
+end

data/spec/scss_lint/linter/compass/property_with_mixin_spec.rb

@@ -0,0 +1,55 @@
+require 'spec_helper'
+
+describe SCSSLint::Linter::Compass::PropertyWithMixin do
+  context 'when a rule has a property with an equivalent Compass mixin' do
+    let(:scss) { <<-SCSS }
+      p {
+        opacity: .5;
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when a rule includes a Compass property mixin' do
+    let(:scss) { <<-SCSS }
+      p {
+        @include opacity(.5);
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a rule does not have a property with a corresponding Compass mixin' do
+    let(:scss) { <<-SCSS }
+      p {
+        margin: 0;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a rule includes display: inline-block' do
+    let(:scss) { <<-SCSS }
+      p {
+        display: inline-block;
+      }
+    SCSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when properties are ignored' do
+    let(:linter_config) { { 'ignore' => %w[inline-block] } }
+
+    let(:scss) { <<-SCSS }
+      p {
+        display: inline-block;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+end

data/spec/scss_lint/linter/debug_statement_spec.rb

@@ -0,0 +1,21 @@
+require 'spec_helper'
+
+describe SCSSLint::Linter::DebugStatement do
+  context 'when no debug statements are present' do
+    let(:scss) { <<-SCSS }
+      p {
+        color: #fff;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a debug statement is present' do
+    let(:scss) { <<-SCSS }
+      @debug 'This is a debug statement';
+    SCSS
+
+    it { should report_lint line: 1 }
+  end
+end

data/spec/scss_lint/linter/declaration_order_spec.rb

@@ -0,0 +1,575 @@
+require 'spec_helper'
+
+describe SCSSLint::Linter::DeclarationOrder do
+  context 'when rule is empty' do
+    let(:scss) { <<-SCSS }
+      p {
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule contains only properties' do
+    let(:scss) { <<-SCSS }
+      p {
+        background: #000;
+        margin: 5px;
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule contains only mixins' do
+    let(:scss) { <<-SCSS }
+      p {
+        @include border-radius(5px);
+        @include box-shadow(5px);
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule contains no mixins or properties' do
+    let(:scss) { <<-SCSS }
+      p {
+        a {
+          color: #f00;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule contains properties after nested rules' do
+    let(:scss) { <<-SCSS }
+      p {
+        a {
+          color: #f00;
+        }
+        color: #f00;
+        margin: 5px;
+      }
+    SCSS
+
+    it { should report_lint }
+  end
+
+  context 'when @extend appears before any properties or rules' do
+    let(:scss) { <<-SCSS }
+      .warn {
+        font-weight: bold;
+      }
+      .error {
+        @extend .warn;
+        color: #f00;
+        a {
+          color: #ccc;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when @extend appears after a property' do
+    let(:scss) { <<-SCSS }
+      .warn {
+        font-weight: bold;
+      }
+      .error {
+        color: #f00;
+        @extend .warn;
+        a {
+          color: #ccc;
+        }
+      }
+    SCSS
+
+    it { should report_lint line: 6 }
+  end
+
+  context 'when nested rule set' do
+    context 'contains @extend before a property' do
+      let(:scss) { <<-SCSS }
+        p {
+          a {
+            @extend foo;
+            color: #f00;
+          }
+        }
+      SCSS
+
+      it { should_not report_lint }
+    end
+
+    context 'contains @extend after a property' do
+      let(:scss) { <<-SCSS }
+        p {
+          a {
+            color: #f00;
+            @extend foo;
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 4 }
+    end
+
+    context 'contains @extend after nested rule set' do
+      let(:scss) { <<-SCSS }
+        p {
+          a {
+            span {
+              color: #000;
+            }
+            @extend foo;
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 6 }
+    end
+  end
+
+  context 'when @include appears' do
+    context 'before a property and rule set' do
+      let(:scss) { <<-SCSS }
+        .error {
+          @include warn;
+          color: #f00;
+          a {
+            color: #ccc;
+          }
+        }
+      SCSS
+
+      it { should_not report_lint }
+    end
+
+    context 'after a property and before a rule set' do
+      let(:scss) { <<-SCSS }
+        .error {
+          color: #f00;
+          @include warn;
+          a {
+            color: #ccc;
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 3 }
+    end
+  end
+
+  context 'when @include that features @content appears' do
+    context 'before a property' do
+      let(:scss) { <<-SCSS }
+        .foo {
+          @include breakpoint("phone") {
+            color: #ccc;
+          }
+          color: #f00;
+        }
+      SCSS
+
+      it { should report_lint line: 5 }
+    end
+
+    context 'after a property' do
+      let(:scss) { <<-SCSS }
+        .foo {
+          color: #f00;
+          @include breakpoint("phone") {
+            color: #ccc;
+          }
+        }
+      SCSS
+
+      it { should_not report_lint }
+    end
+
+    context 'before an @extend' do
+      let(:scss) { <<-SCSS }
+        .foo {
+          @include breakpoint("phone") {
+            color: #ccc;
+          }
+          @extend .bar;
+        }
+      SCSS
+
+      it { should report_lint line: 5 }
+    end
+
+    context 'before a rule set' do
+      let(:scss) { <<-SCSS }
+        .foo {
+          @include breakpoint("phone") {
+            color: #ccc;
+          }
+          a {
+            color: #fff;
+          }
+        }
+      SCSS
+
+      it { should_not report_lint }
+    end
+
+    context 'after a rule set' do
+      let(:scss) { <<-SCSS }
+        .foo {
+          a {
+            color: #fff;
+          }
+          @include breakpoint("phone") {
+            color: #ccc;
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 5 }
+    end
+
+    context 'with its own nested rule set' do
+      context 'before a property' do
+        let(:scss) { <<-SCSS }
+          @include breakpoint("phone") {
+            a {
+              color: #000;
+            }
+            color: #ccc;
+          }
+        SCSS
+
+        it { should report_lint line: 5 }
+      end
+
+      context 'after a property' do
+        let(:scss) { <<-SCSS }
+          @include breakpoint("phone") {
+            color: #ccc;
+            a {
+              color: #000;
+            }
+          }
+        SCSS
+
+        it { should_not report_lint }
+      end
+    end
+  end
+
+  context 'when the nesting is crazy deep' do
+    context 'and nothing is wrong' do
+      let(:scss) { <<-SCSS }
+        div {
+          ul {
+            @extend .thing;
+            li {
+              @include box-shadow(yes);
+              background: green;
+              a {
+                span {
+                  @include border-radius(5px);
+                  color: #000;
+                }
+              }
+            }
+          }
+        }
+      SCSS
+
+      it { should_not report_lint }
+    end
+
+    context 'and something is wrong' do
+      let(:scss) { <<-SCSS }
+        div {
+          ul {
+            li {
+              a {
+                span {
+                  color: #000;
+                  @include border-radius(5px);
+                }
+              }
+            }
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 7 }
+    end
+  end
+
+  context 'when inside a @media query and rule set' do
+    context 'contains @extend before a property' do
+      let(:scss) { <<-SCSS }
+        @media only screen and (max-width: 1px) {
+          a {
+            @extend foo;
+            color: #f00;
+          }
+        }
+      SCSS
+
+      it { should_not report_lint }
+    end
+
+    context 'contains @extend after a property' do
+      let(:scss) { <<-SCSS }
+        @media only screen and (max-width: 1px) {
+          a {
+            color: #f00;
+            @extend foo;
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 4 }
+    end
+
+    context 'contains @extend after nested rule set' do
+      let(:scss) { <<-SCSS }
+        @media only screen and (max-width: 1px) {
+          a {
+            span {
+              color: #000;
+            }
+            @extend foo;
+          }
+        }
+      SCSS
+
+      it { should report_lint line: 6 }
+    end
+  end
+
+  context 'when a pseudo-element appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        &:hover {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when a pseudo-element appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        &:focus {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a chained selector appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        &.is-active {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a chained selector appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        &.is-active {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when a selector with parent reference appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        .is-active & {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a selector with parent reference appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        .is-active & {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when a pseudo-element appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        &:before {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a pseudo-element appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        &:before {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when a direct descendent appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        > .foo {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a direct descendent appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        > .foo {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when an adjacent sibling appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        & + .foo {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when an adjacent sibling appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        & + .foo {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when a general sibling appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        & ~ .foo {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a general sibling appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        & ~ .foo {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when a descendent appears after a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        color: #fff;
+        .foo {
+          color: #000;
+        }
+      }
+    SCSS
+
+    it { should_not report_lint }
+  end
+
+  context 'when a descendent appears before a property' do
+    let(:scss) { <<-SCSS }
+      a {
+        .foo {
+          color: #000;
+        }
+        color: #fff;
+      }
+    SCSS
+
+    it { should report_lint line: 5 }
+  end
+
+  context 'when order within a media query is incorrect' do
+    let(:scss) { <<-SCSS }
+      @media screen and (max-width: 600px) {
+        @include mix1();
+
+        width: 100%;
+        height: 100%;
+
+        @include mix2();
+      }
+    SCSS
+
+    it { should report_lint }
+  end
+end