More mocha tests (#62)

28 files changed, 421 insertions, 15 deletions

diff --git a/sass/_rfs.scss b/sass/_rfs.scss
index 95477b8..c541a85 100644
--- a/sass/_rfs.scss
+++ b/sass/_rfs.scss
@@ -49,18 +49,14 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
   $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
 }
 
-// Cache $rfs-breakpoint unit
-$rfs-breakpoint-unit: unit($rfs-breakpoint);
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
-@if $rfs-breakpoint-unit == "px" {
+@if $rfs-breakpoint-unit-cache == "px" {
   $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
 }
-@else if $rfs-breakpoint-unit == "" {
-  // Use `px` as default
-  $rfs-breakpoint-unit: "px";
-}
-@else if $rfs-breakpoint-unit == "rem" or $rfs-breakpoint-unit == "em" {
+@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
   $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
 }
 
diff --git a/stylus/rfs.styl b/stylus/rfs.styl
index 7a7707a..7c4bea9 100644
--- a/stylus/rfs.styl
+++ b/stylus/rfs.styl
@@ -43,16 +43,13 @@ if $rfs-base-font-size-unit == "px"
 else if $rfs-base-font-size-unit == "rem"
   $rfs-base-font-size = unit($rfs-base-font-size * $rfs-rem-value, "")
 
-// Cache $rfs-breakpoint unit
-$rfs-breakpoint-unit = unit($rfs-breakpoint)
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache = unit($rfs-breakpoint)
 
 // Remove unit from $rfs-breakpoint for calculations
-if $rfs-breakpoint-unit == "px"
+if $rfs-breakpoint-unit-cache == "px"
   $rfs-breakpoint = unit($rfs-breakpoint, "")
-else if $rfs-breakpoint-unit == ""
-  // Use `px` as default
-  $rfs-breakpoint-unit = "px"
-else if $rfs-breakpoint-unit == "rem" or $rfs-breakpoint-unit == "em"
+else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em"
   $rfs-breakpoint = unit($rfs-breakpoint * $rfs-rem-value, "")
 
 // Responsive font-size mixin
diff --git a/test/less/test-10.less b/test/less/test-10.less
new file mode 100644
index 0000000..5f93344
--- /dev/null
+++ b/test/less/test-10.less
@@ -0,0 +1,10 @@
+@import "../../less/rfs";
+@import "main";
+@rfs-base-font-size: 12px;
+@rfs-font-size-unit: px;
+@rfs-breakpoint: 800;
+@rfs-breakpoint-unit: rem;
+@rfs-two-dimensional: true;
+@rfs-factor: 5;
+@rfs-class: true;
+@rfs-safari-iframe-resize-bug-fix: true;
diff --git a/test/less/test-5.less b/test/less/test-5.less
new file mode 100644
index 0000000..3ba02b6
--- /dev/null
+++ b/test/less/test-5.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-breakpoint-unit: em;
diff --git a/test/less/test-6.less b/test/less/test-6.less
new file mode 100644
index 0000000..93fe09e
--- /dev/null
+++ b/test/less/test-6.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-base-font-size: 17px;
diff --git a/test/less/test-7.less b/test/less/test-7.less
new file mode 100644
index 0000000..0d712c8
--- /dev/null
+++ b/test/less/test-7.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-font-size-unit: px;
diff --git a/test/less/test-8.less b/test/less/test-8.less
new file mode 100644
index 0000000..1a9c660
--- /dev/null
+++ b/test/less/test-8.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-two-dimensional: true;
diff --git a/test/less/test-9.less b/test/less/test-9.less
new file mode 100644
index 0000000..e8d7c36
--- /dev/null
+++ b/test/less/test-9.less
@@ -0,0 +1,9 @@
+@import "main";
+@rfs-base-font-size: 12px;
+@rfs-font-size-unit: px;
+@rfs-breakpoint: 800;
+@rfs-breakpoint-unit: rem;
+@rfs-two-dimensional: true;
+@rfs-factor: 5;
+@rfs-class: true;
+@rfs-safari-iframe-resize-bug-fix: true;
diff --git a/test/lib/tests.js b/test/lib/tests.js
index 38120ba..b5170f1 100644
--- a/test/lib/tests.js
+++ b/test/lib/tests.js
@@ -15,4 +15,28 @@ module.exports = [
     id: 'test-4',
     name: 'Enable class'
   },
+  {
+    id: 'test-5',
+    name: 'Change breakpoint unit to em'
+  },
+  {
+    id: 'test-6',
+    name: 'Change base font size'
+  },
+  {
+    id: 'test-7',
+    name: 'Change font size unit'
+  },
+  {
+    id: 'test-8',
+    name: 'Enable two dimensional'
+  },
+  {
+    id: 'test-9',
+    name: 'Go loco with the config'
+  },
+  {
+    id: 'test-10',
+    name: 'Include mixins multiple times (Should throw a warning for SCSS & Stylus and not fail for less & PostCSS)'
+  },
 ];
diff --git a/test/postcss/tests.js b/test/postcss/tests.js
index 6de7d8b..37fb0dd 100644
--- a/test/postcss/tests.js
+++ b/test/postcss/tests.js
@@ -8,5 +8,37 @@ module.exports = {
   },
   'test-4': {
     class: 'enable'
+  },
+  'test-5': {
+    breakpointUnit: 'em'
+  },
+  'test-6': {
+    baseFontSize: '17px'
+  },
+  'test-7': {
+    fontSizeUnit: 'px'
+  },
+  'test-8': {
+    twoDimensional: true
+  },
+  'test-9': {
+    baseFontSize: '12px',
+    fontSizeUnit: 'px',
+    breakpoint: 800,
+    breakpointUnit: 'rem',
+    twoDimensional: true,
+    factor: 5,
+    class: true,
+    safariIframeResizeBugFix: true,
+  },
+  'test-10': { // Not testable
+    baseFontSize: '12px',
+    fontSizeUnit: 'px',
+    breakpoint: 800,
+    breakpointUnit: 'rem',
+    twoDimensional: true,
+    factor: 5,
+    class: true,
+    safariIframeResizeBugFix: true,
   }
 };
diff --git a/test/result/test-10.css b/test/result/test-10.css
new file mode 100644
index 0000000..c84a744
--- /dev/null
+++ b/test/result/test-10.css
@@ -0,0 +1,50 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-1 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
+
+.selector-2 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-2 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
+
+.selector-3 {
+  font-size: 32px !important; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-3 {
+      font-size: calc(16px + 2vmin)  !important;
+      min-width: 0vw; } }
+
+.selector-4 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-4 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
+
+.selector-5 {
+  font-size: 2em; }
+
+.selector-6 {
+  font-size: inherit; }
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 28px; }
+    @media (max-width: 50rem), (max-height: 50rem) {
+      .selector-7 {
+        font-size: calc(15.2px + 1.6vmin) ;
+        min-width: 0vw; } } }
+
+.selector-8 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-8 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
diff --git a/test/result/test-5.css b/test/result/test-5.css
new file mode 100644
index 0000000..461b32b
--- /dev/null
+++ b/test/result/test-5.css
@@ -0,0 +1,44 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 2rem; }
+  @media (max-width: 75em) {
+    .selector-1 {
+      font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-2 {
+  font-size: 2rem; }
+  @media (max-width: 75em) {
+    .selector-2 {
+      font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-3 {
+  font-size: 2rem !important; }
+  @media (max-width: 75em) {
+    .selector-3 {
+      font-size: calc(1.325rem + 0.9vw)  !important; } }
+
+.selector-4 {
+  font-size: 2rem; }
+  @media (max-width: 75em) {
+    .selector-4 {
+      font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-5 {
+  font-size: 2em; }
+
+.selector-6 {
+  font-size: inherit; }
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 1.75rem; }
+    @media (max-width: 75em) {
+      .selector-7 {
+        font-size: calc(1.3rem + 0.6vw) ; } } }
+
+.selector-8 {
+  font-size: 2rem; }
+  @media (max-width: 75em) {
+    .selector-8 {
+      font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/test/result/test-6.css b/test/result/test-6.css
new file mode 100644
index 0000000..d4330c1
--- /dev/null
+++ b/test/result/test-6.css
@@ -0,0 +1,44 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-1 {
+      font-size: calc(1.15625rem + 1.125vw) ; } }
+
+.selector-2 {
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-2 {
+      font-size: calc(1.15625rem + 1.125vw) ; } }
+
+.selector-3 {
+  font-size: 2rem !important; }
+  @media (max-width: 1200px) {
+    .selector-3 {
+      font-size: calc(1.15625rem + 1.125vw)  !important; } }
+
+.selector-4 {
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-4 {
+      font-size: calc(1.15625rem + 1.125vw) ; } }
+
+.selector-5 {
+  font-size: 2em; }
+
+.selector-6 {
+  font-size: inherit; }
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 1.75rem; }
+    @media (max-width: 1200px) {
+      .selector-7 {
+        font-size: calc(1.13125rem + 0.825vw) ; } } }
+
+.selector-8 {
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-8 {
+      font-size: calc(1.15625rem + 1.125vw) ; } }
diff --git a/test/result/test-7.css b/test/result/test-7.css
new file mode 100644
index 0000000..ae43db2
--- /dev/null
+++ b/test/result/test-7.css
@@ -0,0 +1,44 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 32px; }
+  @media (max-width: 1200px) {
+    .selector-1 {
+      font-size: calc(21.2px + 0.9vw) ; } }
+
+.selector-2 {
+  font-size: 32px; }
+  @media (max-width: 1200px) {
+    .selector-2 {
+      font-size: calc(21.2px + 0.9vw) ; } }
+
+.selector-3 {
+  font-size: 32px !important; }
+  @media (max-width: 1200px) {
+    .selector-3 {
+      font-size: calc(21.2px + 0.9vw)  !important; } }
+
+.selector-4 {
+  font-size: 32px; }
+  @media (max-width: 1200px) {
+    .selector-4 {
+      font-size: calc(21.2px + 0.9vw) ; } }
+
+.selector-5 {
+  font-size: 2em; }
+
+.selector-6 {
+  font-size: inherit; }
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 28px; }
+    @media (max-width: 1200px) {
+      .selector-7 {
+        font-size: calc(20.8px + 0.6vw) ; } } }
+
+.selector-8 {
+  font-size: 32px; }
+  @media (max-width: 1200px) {
+    .selector-8 {
+      font-size: calc(21.2px + 0.9vw) ; } }
diff --git a/test/result/test-8.css b/test/result/test-8.css
new file mode 100644
index 0000000..910e037
--- /dev/null
+++ b/test/result/test-8.css
@@ -0,0 +1,44 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 2rem; }
+  @media (max-width: 1200px), (max-height: 1200px) {
+    .selector-1 {
+      font-size: calc(1.325rem + 0.9vmin) ; } }
+
+.selector-2 {
+  font-size: 2rem; }
+  @media (max-width: 1200px), (max-height: 1200px) {
+    .selector-2 {
+      font-size: calc(1.325rem + 0.9vmin) ; } }
+
+.selector-3 {
+  font-size: 2rem !important; }
+  @media (max-width: 1200px), (max-height: 1200px) {
+    .selector-3 {
+      font-size: calc(1.325rem + 0.9vmin)  !important; } }
+
+.selector-4 {
+  font-size: 2rem; }
+  @media (max-width: 1200px), (max-height: 1200px) {
+    .selector-4 {
+      font-size: calc(1.325rem + 0.9vmin) ; } }
+
+.selector-5 {
+  font-size: 2em; }
+
+.selector-6 {
+  font-size: inherit; }
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 1.75rem; }
+    @media (max-width: 1200px), (max-height: 1200px) {
+      .selector-7 {
+        font-size: calc(1.3rem + 0.6vmin) ; } } }
+
+.selector-8 {
+  font-size: 2rem; }
+  @media (max-width: 1200px), (max-height: 1200px) {
+    .selector-8 {
+      font-size: calc(1.325rem + 0.9vmin) ; } }
diff --git a/test/result/test-9.css b/test/result/test-9.css
new file mode 100644
index 0000000..c84a744
--- /dev/null
+++ b/test/result/test-9.css
@@ -0,0 +1,50 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-1 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
+
+.selector-2 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-2 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
+
+.selector-3 {
+  font-size: 32px !important; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-3 {
+      font-size: calc(16px + 2vmin)  !important;
+      min-width: 0vw; } }
+
+.selector-4 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-4 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
+
+.selector-5 {
+  font-size: 2em; }
+
+.selector-6 {
+  font-size: inherit; }
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 28px; }
+    @media (max-width: 50rem), (max-height: 50rem) {
+      .selector-7 {
+        font-size: calc(15.2px + 1.6vmin) ;
+        min-width: 0vw; } } }
+
+.selector-8 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-8 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
diff --git a/test/sass/test-10.scss b/test/sass/test-10.scss
new file mode 100644
index 0000000..a788bb7
--- /dev/null
+++ b/test/sass/test-10.scss
@@ -0,0 +1,10 @@
+$rfs-base-font-size: 12px;
+$rfs-font-size-unit: px;
+$rfs-breakpoint: 800;
+$rfs-breakpoint-unit: rem;
+$rfs-two-dimensional: true;
+$rfs-factor: 5;
+$rfs-class: true;
+$rfs-safari-iframe-resize-bug-fix: true;
+@import "../../sass/rfs";
+@import "main";
diff --git a/test/sass/test-5.scss b/test/sass/test-5.scss
new file mode 100644
index 0000000..ab8d882
--- /dev/null
+++ b/test/sass/test-5.scss
@@ -0,0 +1,2 @@
+$rfs-breakpoint-unit: em;
+@import "main";
diff --git a/test/sass/test-6.scss b/test/sass/test-6.scss
new file mode 100644
index 0000000..926213e
--- /dev/null
+++ b/test/sass/test-6.scss
@@ -0,0 +1,2 @@
+$rfs-base-font-size: 17px;
+@import "main";
diff --git a/test/sass/test-7.scss b/test/sass/test-7.scss
new file mode 100644
index 0000000..ceace3a
--- /dev/null
+++ b/test/sass/test-7.scss
@@ -0,0 +1,2 @@
+$rfs-font-size-unit: px;
+@import "main";
diff --git a/test/sass/test-8.scss b/test/sass/test-8.scss
new file mode 100644
index 0000000..145fa0e
--- /dev/null
+++ b/test/sass/test-8.scss
@@ -0,0 +1,2 @@
+$rfs-two-dimensional: true;
+@import "main";
diff --git a/test/sass/test-9.scss b/test/sass/test-9.scss
new file mode 100644
index 0000000..84f6f73
--- /dev/null
+++ b/test/sass/test-9.scss
@@ -0,0 +1,9 @@
+$rfs-base-font-size: 12px;
+$rfs-font-size-unit: px;
+$rfs-breakpoint: 800;
+$rfs-breakpoint-unit: rem;
+$rfs-two-dimensional: true;
+$rfs-factor: 5;
+$rfs-class: true;
+$rfs-safari-iframe-resize-bug-fix: true;
+@import "main";
diff --git a/test/stylus/test-10.styl b/test/stylus/test-10.styl
new file mode 100644
index 0000000..10b84d8
--- /dev/null
+++ b/test/stylus/test-10.styl
@@ -0,0 +1,10 @@
+$rfs-base-font-size = 12px
+$rfs-font-size-unit = px
+$rfs-breakpoint = 800
+$rfs-breakpoint-unit = rem
+$rfs-two-dimensional = true
+$rfs-factor = 5
+$rfs-class = true
+$rfs-safari-iframe-resize-bug-fix = true
+@import "../../stylus/rfs";
+@import "main"
diff --git a/test/stylus/test-5.styl b/test/stylus/test-5.styl
new file mode 100644
index 0000000..578f328
--- /dev/null
+++ b/test/stylus/test-5.styl
@@ -0,0 +1,2 @@
+$rfs-breakpoint-unit = em
+@import "main";
diff --git a/test/stylus/test-6.styl b/test/stylus/test-6.styl
new file mode 100644
index 0000000..f3df4b1
--- /dev/null
+++ b/test/stylus/test-6.styl
@@ -0,0 +1,2 @@
+$rfs-base-font-size = 17px
+@import "main";
diff --git a/test/stylus/test-7.styl b/test/stylus/test-7.styl
new file mode 100644
index 0000000..fce5ecd
--- /dev/null
+++ b/test/stylus/test-7.styl
@@ -0,0 +1,2 @@
+$rfs-font-size-unit = px
+@import "main";
diff --git a/test/stylus/test-8.styl b/test/stylus/test-8.styl
new file mode 100644
index 0000000..cc9f178
--- /dev/null
+++ b/test/stylus/test-8.styl
@@ -0,0 +1,2 @@
+$rfs-two-dimensional = true
+@import "main";
diff --git a/test/stylus/test-9.styl b/test/stylus/test-9.styl
new file mode 100644
index 0000000..a860640
--- /dev/null
+++ b/test/stylus/test-9.styl
@@ -0,0 +1,9 @@
+$rfs-base-font-size = 12px
+$rfs-font-size-unit = px
+$rfs-breakpoint = 800
+$rfs-breakpoint-unit = rem
+$rfs-two-dimensional = true
+$rfs-factor = 5
+$rfs-class = true
+$rfs-safari-iframe-resize-bug-fix = true
+@import "main"