styler-sass 0.1.4 → 0.1.5.alpha

data/spec/bourbon/functions/unpack_spec.rb

@@ -0,0 +1,32 @@
+require "spec_helper"
+
+describe "unpack" do
+  before(:all) do
+    ParserSupport.parse_file("functions/unpack")
+  end
+
+  context "single" do
+    it "unpacks four identical measurements" do
+      expect(".single").to have_rule("padding: 10px 10px 10px 10px")
+    end
+  end
+
+  context "double" do
+    it "unpacks identical measurements for top and bottom,
+      and different identical measurements for left and right" do
+      expect(".double").to have_rule("padding: 1em 2em 1em 2em")
+    end
+  end
+
+  context "triple" do
+    it "unpacks identical measurements for left and right" do
+      expect(".triple").to have_rule("padding: 10px 20px 0 20px")
+    end
+  end
+
+  context "quadruple" do
+    it "unpacks four distict measurements" do
+      expect(".quadruple").to have_rule("padding: 0 calc(1em + 10px) 20px 50px")
+    end
+  end
+end

data/spec/bourbon/helpers/convert_units_spec.rb

@@ -0,0 +1,31 @@
+require "spec_helper"
+
+describe "convert-units" do
+  before(:all) do
+    ParserSupport.parse_file("helpers/convert-units")
+  end
+
+  context "called with integer and px" do
+    it "is converted to px length" do
+      expect(".px").to have_rule("height: 12px")
+    end
+  end
+
+  context "called with integer and pt" do
+    it "is converted to points" do
+      expect(".pt").to have_rule("font-size: 16pt")
+    end
+  end
+
+  context "called with integer and deg" do
+    it "is converted to degrees" do
+      expect(".deg").to have_rule("transform: rotate(180deg)")
+    end
+  end
+
+  context "called with string and px" do
+    it "returns false" do
+      expect(".string").to have_rule("padding-top: false")
+    end
+  end
+end

data/spec/bourbon/helpers/directional_values_spec.rb

@@ -0,0 +1,39 @@
+require "spec_helper"
+
+describe "directional-values" do
+  before(:all) do
+    ParserSupport.parse_file("helpers/directional-values")
+  end
+
+  context "collapse-directionals" do
+    it "returns four distinct lengths unaltered" do
+      expect(".four").to have_rule("padding: 10px 20px 30px 40px")
+    end
+
+    it "returns collapsed horizontal lengths" do
+      expect(".three").to have_rule("padding: 5px 10px 5px 20px")
+    end
+
+    it "returns collapsed vertical and horizontal lengths" do
+      expect(".two").to have_rule("padding: 50px 100px")
+    end
+
+    it "returns collapsed lengths when all match" do
+      expect(".one").to have_rule("padding: 10px")
+    end
+  end
+
+  context "directional-property" do
+    it "returns property and values with four distinct lengths" do
+      expect(".border-all").to have_rule("border-width: 2px 5px 8px 12px")
+    end
+
+    it "returns property and value with one length" do
+      expect(".border-top").to have_rule("border-top: 10px")
+    end
+
+    it "returns property and value with vertical and horizontal values" do
+      expect(".border-color").to have_rule("border-color: #ffffff #000000")
+    end
+  end
+end

data/spec/bourbon/helpers/font_source_declaration_spec.rb

@@ -0,0 +1,29 @@
+require "spec_helper"
+
+describe "font-source-declaration" do
+  before(:all) do
+    ParserSupport.parse_file("helpers/font-source-declaration")
+  end
+
+  context "called with pipeline" do
+    it "returns pipeline path" do
+      rule = 'src: font-url("b.eot?#iefix") format("embedded-opentype"), ' +
+             'font-url("b.woff2") format("woff2"), ' +
+             'font-url("b.woff") format("woff"), ' +
+             'font-url("b.ttf") format("truetype"), ' +
+             'font-url("b.svg#a") format("svg")'
+      expect(".has-pipeline").to have_rule(rule)
+    end
+  end
+
+  context "called with no pipeline" do
+    it "does not return pipeline path" do
+      rule = 'src: url("b.eot?#iefix") format("embedded-opentype"), ' +
+             'url("b.woff2") format("woff2"), ' +
+             'url("b.woff") format("woff"), ' +
+             'url("b.ttf") format("truetype"), ' +
+             'url("b.svg#a") format("svg")'
+      expect(".no-pipeline").to have_rule(rule)
+    end
+  end
+end

data/spec/bourbon/helpers/str_to_num_spec.rb

@@ -0,0 +1,25 @@
+require "spec_helper"
+
+describe "str-to-num" do
+  before(:all) do
+    ParserSupport.parse_file("helpers/str-to-num")
+  end
+
+  context "called with integer string" do
+    it "is converted to integer" do
+      expect(".string-to-integer").to have_rule("height: 10")
+    end
+  end
+
+  context "called with px string" do
+    it "is converted to px" do
+      expect(".string-to-px").to have_rule("height: 15px")
+    end
+  end
+
+  context "called with negative px string" do
+    it "is converted to negative px" do
+      expect(".string-to-negative-px").to have_rule("height: -25px")
+    end
+  end
+end

data/spec/fixtures/_setup.scss

@@ -0,0 +1 @@
+@import "app/assets/stylesheets/bourbon";

data/spec/fixtures/addons/border-color.scss

@@ -0,0 +1,26 @@
+@import "setup";
+
+$red: #ff0000;
+$blue: #00ff00;
+$green: #0000ff;
+$purple: #ffff00;
+
+.border-color-all {
+  @include border-color($red);
+}
+
+.border-color-alternate {
+  @include border-color($blue $green);
+}
+
+.border-color-implied-left {
+  @include border-color($red $blue $green);
+}
+
+.border-color-explicit {
+  @include border-color($green $blue $red $purple);
+}
+
+.border-color-false-third {
+  @include border-color($blue $purple null $green);
+}

data/spec/fixtures/addons/border-radius.scss

@@ -0,0 +1,17 @@
+@import "setup";
+
+.border-top-radius {
+  @include border-top-radius(1em);
+}
+
+.border-left-radius {
+  @include border-left-radius(2em);
+}
+
+.border-right-radius {
+  @include border-right-radius(3em);
+}
+
+.border-bottom-radius {
+  @include border-bottom-radius(4em);
+}

data/spec/fixtures/addons/border-style.scss

@@ -0,0 +1,21 @@
+@import "setup";
+
+.border-style-all {
+  @include border-style(solid);
+}
+
+.border-style-alternate {
+  @include border-style(dotted dashed);
+}
+
+.border-style-implied-left {
+  @include border-style(dashed double solid);
+}
+
+.border-style-explicit {
+  @include border-style(dotted groove ridge none);
+}
+
+.border-style-false-third {
+  @include border-style(inset none null double);
+}

data/spec/fixtures/addons/border-width.scss

@@ -0,0 +1,21 @@
+@import "setup";
+
+.border-width-all {
+  @include border-width(1px);
+}
+
+.border-width-alternate {
+  @include border-width(2px 3px);
+}
+
+.border-width-implied-left {
+  @include border-width(4px 5px 6px);
+}
+
+.border-width-explicit {
+  @include border-width(7px 8px 9px 10px);
+}
+
+.border-width-false-third {
+  @include border-width(11px 12px null 13px);
+}

data/spec/fixtures/addons/buttons.scss

@@ -0,0 +1,17 @@
+@import "setup";
+
+.all-buttons {
+  content: $all-buttons;
+}
+
+.all-buttons-active {
+  content: $all-buttons-active;
+}
+
+.all-buttons-focus {
+  content: $all-buttons-focus;
+}
+
+.all-buttons-hover {
+  content: $all-buttons-hover;
+}

data/spec/fixtures/addons/clearfix.scss

@@ -0,0 +1,5 @@
+@import "setup";
+
+.clearfix {
+  @include clearfix;
+}

data/spec/fixtures/addons/ellipsis.scss

@@ -0,0 +1,5 @@
+@import "setup";
+
+.ellipsis {
+  @include ellipsis;
+}

data/spec/fixtures/addons/font-stacks.scss

@@ -0,0 +1,21 @@
+@import "setup";
+
+.georgia {
+  content: $georgia;
+}
+
+.helvetica {
+  content: $helvetica;
+}
+
+.lucida-grande {
+  content: $lucida-grande;
+}
+
+.monospace {
+  content: $monospace;
+}
+
+.verdana {
+  content: $verdana;
+}

data/spec/fixtures/addons/hide-text.scss

@@ -0,0 +1,5 @@
+@import "setup";
+
+.hide-text {
+  @include hide-text;
+}

data/spec/fixtures/addons/margin.scss

@@ -0,0 +1,21 @@
+@import "setup";
+
+.margin-all {
+  @include margin(1px);
+}
+
+.margin-alternate {
+  @include margin(2px 3px);
+}
+
+.margin-implied-left {
+  @include margin(4px 5px 6px);
+}
+
+.margin-explicit {
+  @include margin(7px 8px 9px 10px);
+}
+
+.margin-false-third {
+  @include margin(11px 12px null 13px);
+}

data/spec/fixtures/addons/padding.scss

@@ -0,0 +1,21 @@
+@import "setup";
+
+.padding-all {
+  @include padding(1px);
+}
+
+.padding-alternate {
+  @include padding(2px 3px);
+}
+
+.padding-implied-left {
+  @include padding(4px 5px 6px);
+}
+
+.padding-explicit {
+  @include padding(7px 8px 9px 10px);
+}
+
+.padding-false-third {
+  @include padding(11px 12px null 13px);
+}

data/spec/fixtures/addons/position.scss

@@ -0,0 +1,25 @@
+@import "setup";
+
+.position-only-type {
+  @include position(relative);
+}
+
+.position-all {
+  @include position(fixed, 1em);
+}
+
+.position-alternate {
+  @include position(absolute, 2px 3px);
+}
+
+.position-implied-left {
+  @include position(relative, 4px 5px 6px);
+}
+
+.position-explicit {
+  @include position(fixed, 7px 8px 9px 10px);
+}
+
+.position-false-third {
+  @include position(static, 11px null null 13px);
+}

data/spec/fixtures/addons/retina-image.scss

@@ -0,0 +1,21 @@
+@import "setup";
+
+.retina-default {
+  @include retina-image("retina-default", "320px 480px");
+}
+
+.retina-extension {
+  @include retina-image("retina-extension", "20px 40px", "jpg");
+}
+
+.retina-custom-name {
+  @include retina-image("default", "10px 5px", "png", "custom");
+}
+
+.retina-custom-suffix {
+  @include retina-image("default", "3em 2em", "png", false, "@2x");
+}
+
+.retina-pipeline {
+  @include retina-image("default", "100px 20px", "jpg", null, null, false);
+}

data/spec/fixtures/addons/size.scss

@@ -0,0 +1,13 @@
+@import "setup";
+
+.size-implicit {
+  @include size(10px);
+}
+
+.size-both {
+  @include size(1em 2em);
+}
+
+.size-auto {
+  @include size(100px auto);
+}

data/spec/fixtures/addons/text-inputs.scss

@@ -0,0 +1,17 @@
+@import "setup";
+
+.all-text-inputs {
+  content: $all-text-inputs;
+}
+
+.all-text-inputs-active {
+  content: $all-text-inputs-active;
+}
+
+.all-text-inputs-focus {
+  content: $all-text-inputs-focus;
+}
+
+.all-text-inputs-hover {
+  content: $all-text-inputs-hover;
+}

data/spec/fixtures/addons/triangle.scss

@@ -0,0 +1,9 @@
+@import "setup";
+
+.triangle-down {
+  @include triangle(12px, #ffffff, down);
+}
+
+.triangle-corner {
+  @include triangle(12px 6px, #000000 #aaaaaa, up-left);
+}

data/spec/fixtures/addons/word-wrap.scss

@@ -0,0 +1,9 @@
+@import "setup";
+
+.word-wrap {
+  @include word-wrap;
+}
+
+.word-wrap-break {
+  @include word-wrap(normal);
+}

data/spec/fixtures/css3/font-face.scss

@@ -0,0 +1,6 @@
+@import "setup";
+
+@include font-face("Helvetica", "/fonts");
+@include font-face("Verdana", "/assets/fonts", "bold", "italic");
+@include font-face("Georgia", "/assets", "normal", "normal", false);
+@include font-face("Arial", "/", "normal", "normal", false, woff2 svg);

data/spec/fixtures/css3/hidpi-media-query.scss

@@ -0,0 +1,13 @@
+@import "setup";
+
+.hidpi-defaults {
+  @include hidpi() {
+    color: #ff0000;
+  }
+}
+
+.hidpi-ratio {
+  @include hidpi(1.5) {
+    color: #00ff00;
+  }
+}

data/spec/fixtures/functions/assign-inputs.scss

@@ -0,0 +1,19 @@
+@import "setup";
+
+#{assign-inputs($text-inputs-list)} {
+  color: #ff0000;
+}
+
+#{assign-inputs($text-inputs-list, active)} {
+  color: #00ff00;
+}
+
+#{assign-inputs($text-inputs-list)},
+select {
+  color: #0000ff;
+}
+
+input[type="file"],
+#{assign-inputs($text-inputs-list)} {
+  color: #ff00ff;
+}

data/spec/fixtures/functions/contains.scss

@@ -0,0 +1,28 @@
+@import "setup";
+
+$single: "apple";
+$multiple: "pineapple", "banana", "cumquat";
+
+@mixin color-contains($list, $values) {
+  @if contains($list, $values) {
+    color: #fff;
+  } @else {
+    color: #000;
+  }
+}
+
+.single {
+  @include color-contains($single, "apple");
+}
+
+.single-missing {
+  @include color-contains($single, "pear");
+}
+
+.multiple {
+  @include color-contains($multiple, "banana");
+}
+
+.multiple-missing {
+  @include color-contains($multiple, "strawberry");
+}

data/spec/fixtures/functions/is-length.scss

@@ -0,0 +1,35 @@
+@import "setup";
+
+@mixin color-length($value) {
+  @if is-length($value) {
+    color: #fff;
+  }
+}
+
+.integer {
+  @include color-length(1);
+}
+
+.pixels {
+  @include color-length(10px);
+}
+
+.ems {
+  @include color-length(10em);
+}
+
+.percent {
+  @include color-length(10%);
+}
+
+.calc {
+  @include color-length(calc(2em - 5px));
+}
+
+.string {
+  @include color-length("stringy");
+}
+
+.null {
+  @include color-length(null);
+}

data/spec/fixtures/functions/is-light.scss

@@ -0,0 +1,29 @@
+@import "setup";
+
+@mixin reverse-color($color) {
+  @if is-light($color) {
+    color: #000;
+  } @else {
+    color: #fff;
+  }
+}
+
+.pink {
+  @include reverse-color(#ffcccc);
+}
+
+.sky {
+  @include reverse-color(#aaeeff);
+}
+
+.medium-gray {
+  @include reverse-color(#888);
+}
+
+.charcoal {
+  @include reverse-color(#333);
+}
+
+.translucent {
+  @include reverse-color(rgba(#fff, 0.1));
+}

data/spec/fixtures/functions/is-number.scss

@@ -0,0 +1,31 @@
+@import "setup";
+
+@mixin line-height($number) {
+  @if is-number($number) {
+    line-height: $number;
+  }
+}
+
+.integer {
+  @include line-height(1);
+}
+
+.px {
+  @include line-height(2px);
+}
+
+.em {
+  @include line-height(3em);
+}
+
+.rem {
+  @include line-height(4rem);
+}
+
+.percent {
+  @include line-height(5%);
+}
+
+.string {
+  @include line-height("stringy");
+}

data/spec/fixtures/functions/is-size.scss

@@ -0,0 +1,31 @@
+@import "setup";
+
+@mixin size-margin($size) {
+  @if is-size($size) {
+    margin-top: $size;
+  }
+}
+
+.integer {
+  @include size-margin(1);
+}
+
+.px {
+  @include size-margin(2px);
+}
+
+.em {
+  @include size-margin(3em);
+}
+
+.rem {
+  @include size-margin(4rem);
+}
+
+.percent {
+  @include size-margin(5%);
+}
+
+.string {
+  @include size-margin("stringy");
+}