Examples, stylelint, yarn, stylus bugfixes and much more...

25 files changed, 818 insertions, 101 deletions

diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 0000000..a9bd048
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,32 @@
+# Examples
+Setup
+```shell
+npm install
+# OR
+yarn
+```
+
+## PostCSS
+### node
+```shell
+cd examples/postcss/node
+node ./index.js
+```
+### Gulp
+```shell
+cd examples/postcss/gulp
+gulp build
+```
+
+
+## SCSS
+### Sass
+```shell
+cd examples/scss/sass
+sass TODO
+```
+### Gulp
+```shell
+cd examples/scss/gulp
+gulp build
+```
diff --git a/examples/postcss/gulp/dest/main.css b/examples/postcss/gulp/dest/main.css
index 121ce9a..1831050 100644
--- a/examples/postcss/gulp/dest/main.css
+++ b/examples/postcss/gulp/dest/main.css
@@ -2,72 +2,77 @@
 .selector-1,
 .disable-responsive-font-size .selector-1,
 .disable-responsive-font-size.selector-1 {
-    background-color: red;
-    width: 300px;
-    font-size: 2rem;
+  background-color: red;
+  width: 300px;
+  font-size: 2rem;
 }
+
 @media (max-width: 1200px) {
-    .selector-1 {
+  .selector-1 {
     font-size: calc(1.2rem + 1.066667vw);
-    }
+  }
 }
 
 /* responsive-font-size property with `rem` unit */
 .selector-2,
 .disable-responsive-font-size .selector-2,
 .disable-responsive-font-size.selector-2 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
+
 @media (max-width: 1200px) {
-    .selector-2 {
+  .selector-2 {
     font-size: calc(1.2rem + 1.066667vw);
-    }
+  }
 }
 
 /* responsive-font-size property with !important */
 .selector-3,
 .disable-responsive-font-size .selector-3,
 .disable-responsive-font-size.selector-3 {
-    font-size: 2rem !important;
+  font-size: 2rem !important;
 }
+
 @media (max-width: 1200px) {
-    .selector-3 {
+  .selector-3 {
     font-size: calc(1.2rem + 1.066667vw) !important;
-    }
+  }
 }
 
 /* rfs shorthand */
 .selector-4,
 .disable-responsive-font-size .selector-4,
 .disable-responsive-font-size.selector-4 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
+
 @media (max-width: 1200px) {
-    .selector-4 {
+  .selector-4 {
     font-size: calc(1.2rem + 1.066667vw);
-    }
+  }
 }
 
 /* not supported unit */
 .selector-5 {
-    font-size: 2em;
+  font-size: 2em;
 }
 
 /* special value */
 .selector-6 {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 /* responsive-font-size property inside @support-query */
 @supports (display: flex) {
-    .selector-7,
-.disable-responsive-font-size .selector-7,
-.disable-responsive-font-size.selector-7 {
-        font-size: 1.75rem;
-    }
-    @media (max-width: 1200px) {
-        .selector-7 {
-        font-size: calc(1.15rem + 0.8vw);
-        }
+  .selector-7,
+  .disable-responsive-font-size .selector-7,
+  .disable-responsive-font-size.selector-7 {
+    font-size: 1.75rem;
+  }
+
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw);
     }
+  }
 }
diff --git a/examples/postcss/gulp/gulpfile.js b/examples/postcss/gulp/gulpfile.js
index 873a17d..4e5e41c 100644
--- a/examples/postcss/gulp/gulpfile.js
+++ b/examples/postcss/gulp/gulpfile.js
@@ -1,20 +1,24 @@
 const gulp = require('gulp');
 const postcss = require('gulp-postcss');
-const rfs = require('../..');
+const rfs = require('../../..');
 const options = {
-    twoDimensional: false,
-    minimumFontSize: 16,
-    fontSizeUnit: 'rem',
-    breakpoint: 1200,
-    breakpointUnit: 'px',
-    factor: 5,
-    unitPrecision: 6,
-    remValue: 16,
-    propList: ['responsive-font-size', 'rfs']
+  twoDimensional: false,
+  minimumFontSize: 16,
+  fontSizeUnit: 'rem',
+  breakpoint: 1200,
+  breakpointUnit: 'px',
+  factor: 5,
+  unitPrecision: 6,
+  remValue: 16,
+  propList: ['responsive-font-size', 'rfs']
 };
 
-gulp.task('css', () => {
-    return gulp.src('./src/main.css')
-        .pipe(postcss([rfs(options)]))
-        .pipe(gulp.dest('./dest'));
+gulp.task('build', () => {
+  return gulp.src('./src/main.css')
+    .pipe(postcss([rfs(options)]))
+    .pipe(gulp.dest('./dest'));
+});
+
+gulp.task('watch', function () {
+  gulp.watch('./src/**/*.css', ['build']);
 });
diff --git a/examples/postcss/gulp/src/main.css b/examples/postcss/gulp/src/main.css
index ebc55d4..65e41fd 100644
--- a/examples/postcss/gulp/src/main.css
+++ b/examples/postcss/gulp/src/main.css
@@ -1,38 +1,38 @@
 /* responsive-font-size property with `px` unit */
 .selector-1 {
-    background-color: red;
-    width: 300px;
-    responsive-font-size: 32px;
+  background-color: red;
+  width: 300px;
+  responsive-font-size: 32px;
 }
 
 /* responsive-font-size property with `rem` unit */
 .selector-2 {
-    responsive-font-size: 2rem;
+  responsive-font-size: 2rem;
 }
 
 /* responsive-font-size property with !important */
 .selector-3 {
-    responsive-font-size: 2rem !important;
+  responsive-font-size: 2rem !important;
 }
 
 /* rfs shorthand */
 .selector-4 {
-    rfs: 2rem;
+  rfs: 2rem;
 }
 
 /* not supported unit */
 .selector-5 {
-    responsive-font-size: 2em;
+  responsive-font-size: 2em;
 }
 
 /* special value */
 .selector-6 {
-    responsive-font-size: inherit;
+  responsive-font-size: inherit;
 }
 
 /* responsive-font-size property inside @support-query */
 @supports (display: flex) {
-    .selector-7 {
-        rfs: 28px;
-    }
+  .selector-7 {
+    rfs: 28px;
+  }
 }
diff --git a/examples/postcss/node/main.dest.css b/examples/postcss/node/dest/main.css
index 121ce9a..1831050 100644
--- a/examples/postcss/node/main.dest.css
+++ b/examples/postcss/node/dest/main.css
@@ -2,72 +2,77 @@
 .selector-1,
 .disable-responsive-font-size .selector-1,
 .disable-responsive-font-size.selector-1 {
-    background-color: red;
-    width: 300px;
-    font-size: 2rem;
+  background-color: red;
+  width: 300px;
+  font-size: 2rem;
 }
+
 @media (max-width: 1200px) {
-    .selector-1 {
+  .selector-1 {
     font-size: calc(1.2rem + 1.066667vw);
-    }
+  }
 }
 
 /* responsive-font-size property with `rem` unit */
 .selector-2,
 .disable-responsive-font-size .selector-2,
 .disable-responsive-font-size.selector-2 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
+
 @media (max-width: 1200px) {
-    .selector-2 {
+  .selector-2 {
     font-size: calc(1.2rem + 1.066667vw);
-    }
+  }
 }
 
 /* responsive-font-size property with !important */
 .selector-3,
 .disable-responsive-font-size .selector-3,
 .disable-responsive-font-size.selector-3 {
-    font-size: 2rem !important;
+  font-size: 2rem !important;
 }
+
 @media (max-width: 1200px) {
-    .selector-3 {
+  .selector-3 {
     font-size: calc(1.2rem + 1.066667vw) !important;
-    }
+  }
 }
 
 /* rfs shorthand */
 .selector-4,
 .disable-responsive-font-size .selector-4,
 .disable-responsive-font-size.selector-4 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
+
 @media (max-width: 1200px) {
-    .selector-4 {
+  .selector-4 {
     font-size: calc(1.2rem + 1.066667vw);
-    }
+  }
 }
 
 /* not supported unit */
 .selector-5 {
-    font-size: 2em;
+  font-size: 2em;
 }
 
 /* special value */
 .selector-6 {
-    font-size: inherit;
+  font-size: inherit;
 }
 
 /* responsive-font-size property inside @support-query */
 @supports (display: flex) {
-    .selector-7,
-.disable-responsive-font-size .selector-7,
-.disable-responsive-font-size.selector-7 {
-        font-size: 1.75rem;
-    }
-    @media (max-width: 1200px) {
-        .selector-7 {
-        font-size: calc(1.15rem + 0.8vw);
-        }
+  .selector-7,
+  .disable-responsive-font-size .selector-7,
+  .disable-responsive-font-size.selector-7 {
+    font-size: 1.75rem;
+  }
+
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw);
     }
+  }
 }
diff --git a/examples/postcss/node/index.js b/examples/postcss/node/index.js
index e0390b6..68ccec0 100644
--- a/examples/postcss/node/index.js
+++ b/examples/postcss/node/index.js
@@ -1,24 +1,26 @@
 const fs = require('fs');
 const postcss = require('postcss');
-const rfs = require('../..');
-const css = fs.readFileSync('main.css', 'utf8');
+const rfs = require('../../..');
+const css = fs.readFileSync('src/main.css', 'utf8');
 const options = {
-    twoDimensional: false,
-    minimumFontSize: 16,
-    fontSizeUnit: 'rem',
-    // breakpoint: 1200,
-    breakpointUnit: 'px',
-    factor: 5,
-    unitPrecision: 6,
-    remValue: 16,
-    propList: ['responsive-font-size', 'rfs']
+  twoDimensional: false,
+  minimumFontSize: 16,
+  fontSizeUnit: 'rem',
+  breakpoint: '75rem',
+  breakpointUnit: 'px',
+  factor: 5,
+  unitPrecision: 6,
+  remValue: 16,
+  propList: ['responsive-font-size', 'rfs']
 };
 
 const processedCss = postcss(rfs(options)).process(css).css;
 
-fs.writeFile('main.dest.css', processedCss, (err) => {
-    if (err) {
-        throw err;
-    }
+fs.writeFile('dest/main.css', processedCss, (err) => {
+  if (err) {
+    throw err;
+  }
+  else {
     console.log('Responsive font sizes generated.');
+  }
 });
diff --git a/examples/postcss/node/main.css b/examples/postcss/node/src/main.css
index ebc55d4..65e41fd 100644
--- a/examples/postcss/node/main.css
+++ b/examples/postcss/node/src/main.css
@@ -1,38 +1,38 @@
 /* responsive-font-size property with `px` unit */
 .selector-1 {
-    background-color: red;
-    width: 300px;
-    responsive-font-size: 32px;
+  background-color: red;
+  width: 300px;
+  responsive-font-size: 32px;
 }
 
 /* responsive-font-size property with `rem` unit */
 .selector-2 {
-    responsive-font-size: 2rem;
+  responsive-font-size: 2rem;
 }
 
 /* responsive-font-size property with !important */
 .selector-3 {
-    responsive-font-size: 2rem !important;
+  responsive-font-size: 2rem !important;
 }
 
 /* rfs shorthand */
 .selector-4 {
-    rfs: 2rem;
+  rfs: 2rem;
 }
 
 /* not supported unit */
 .selector-5 {
-    responsive-font-size: 2em;
+  responsive-font-size: 2em;
 }
 
 /* special value */
 .selector-6 {
-    responsive-font-size: inherit;
+  responsive-font-size: inherit;
 }
 
 /* responsive-font-size property inside @support-query */
 @supports (display: flex) {
-    .selector-7 {
-        rfs: 28px;
-    }
+  .selector-7 {
+    rfs: 28px;
+  }
 }
diff --git a/examples/sass/gulp/dest/main.css b/examples/sass/gulp/dest/main.css
new file mode 100644
index 0000000..dd46c10
--- /dev/null
+++ b/examples/sass/gulp/dest/main.css
@@ -0,0 +1,54 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px; }
+  .selector-1,
+  .disable-responsive-font-size .selector-1, .selector-1.disable-responsive-font-size {
+    font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-1 {
+      font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
+  font-size: 2rem !important; }
+
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.2rem + 1.06667vw)  !important; } }
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* not supported unit */
+.selector-5 {
+  font-size: 2em; }
+
+/* special value */
+.selector-6 {
+  font-size: inherit; }
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7,
+  .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem; }
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw) ; } } }
diff --git a/examples/sass/gulp/gulpfile.js b/examples/sass/gulp/gulpfile.js
new file mode 100644
index 0000000..3073675
--- /dev/null
+++ b/examples/sass/gulp/gulpfile.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const gulp = require('gulp'),
+ sass = require('gulp-sass');
+
+gulp.task('build', function () {
+  return gulp.src('./src/**/*.sass')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./dest'));
+});
+
+gulp.task('watch', function () {
+  gulp.watch('./src/**/*.sass', ['build']);
+});
diff --git a/examples/sass/gulp/src/main.sass b/examples/sass/gulp/src/main.sass
new file mode 100644
index 0000000..76f6757
--- /dev/null
+++ b/examples/sass/gulp/src/main.sass
@@ -0,0 +1,32 @@
+@import "../../../../scss/rfs"
+
+/* responsive-font-size property with `px` unit */
+.selector-1
+  background-color: red
+  width: 300px
+  @include responsive-font-size(32px)
+
+/* responsive-font-size property with `rem` unit */
+.selector-2
+  @include responsive-font-size(2rem)
+
+/* responsive-font-size property with !important */
+.selector-3
+  @include responsive-font-size(2rem, true)
+
+/* rfs shorthand */
+.selector-4
+  @include rfs(2rem)
+
+/* not supported unit */
+.selector-5
+  @include responsive-font-size(2em)
+
+/* special value */
+.selector-6
+  @include responsive-font-size(inherit)
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex)
+  .selector-7
+    @include rfs(28px)
diff --git a/examples/sass/node/dest/main.css b/examples/sass/node/dest/main.css
new file mode 100644
index 0000000..466b604
--- /dev/null
+++ b/examples/sass/node/dest/main.css
@@ -0,0 +1,65 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px; }
+
+.selector-1,
+.disable-responsive-font-size .selector-1,
+.selector-1.disable-responsive-font-size {
+  font-size: 2rem;
+}
+
+@media (max-width: 1200px) {
+  .selector-1 {
+    font-size: calc(1.2rem + 1.06667vw); }
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.2rem + 1.06667vw); }
+}
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
+  font-size: 2rem !important; }
+
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.2rem + 1.06667vw) !important; }
+}
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.2rem + 1.06667vw); }
+}
+
+/* not supported unit */
+.selector-5 {
+  font-size: 2em; }
+
+/* special value */
+.selector-6 {
+  font-size: inherit; }
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7,
+  .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem; }
+
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw); }
+  }
+}
diff --git a/examples/sass/node/index.js b/examples/sass/node/index.js
new file mode 100644
index 0000000..491ed36
--- /dev/null
+++ b/examples/sass/node/index.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const sass = require('node-sass');
+
+
+sass.render({
+    file: 'src/main.sass', outFile: 'dest/main.css',
+  }, function (error, result) { // node-style callback from v3.0.0 onwards
+    if (!error) {
+      // No errors during the compilation, write this result on the disk
+      fs.writeFile('dest/main.css', result.css, function (err) {
+        if (!err) {
+          console.log('Responsive font sizes generated.');
+        }
+        else {
+          throw err;
+        }
+      });
+    }
+    else {
+      throw error;
+    }
+  }
+);
diff --git a/examples/sass/node/src/main.sass b/examples/sass/node/src/main.sass
new file mode 100644
index 0000000..76f6757
--- /dev/null
+++ b/examples/sass/node/src/main.sass
@@ -0,0 +1,32 @@
+@import "../../../../scss/rfs"
+
+/* responsive-font-size property with `px` unit */
+.selector-1
+  background-color: red
+  width: 300px
+  @include responsive-font-size(32px)
+
+/* responsive-font-size property with `rem` unit */
+.selector-2
+  @include responsive-font-size(2rem)
+
+/* responsive-font-size property with !important */
+.selector-3
+  @include responsive-font-size(2rem, true)
+
+/* rfs shorthand */
+.selector-4
+  @include rfs(2rem)
+
+/* not supported unit */
+.selector-5
+  @include responsive-font-size(2em)
+
+/* special value */
+.selector-6
+  @include responsive-font-size(inherit)
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex)
+  .selector-7
+    @include rfs(28px)
diff --git a/examples/scss/gulp/dest/main.css b/examples/scss/gulp/dest/main.css
new file mode 100644
index 0000000..dd46c10
--- /dev/null
+++ b/examples/scss/gulp/dest/main.css
@@ -0,0 +1,54 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px; }
+  .selector-1,
+  .disable-responsive-font-size .selector-1, .selector-1.disable-responsive-font-size {
+    font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-1 {
+      font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
+  font-size: 2rem !important; }
+
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.2rem + 1.06667vw)  !important; } }
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* not supported unit */
+.selector-5 {
+  font-size: 2em; }
+
+/* special value */
+.selector-6 {
+  font-size: inherit; }
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7,
+  .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem; }
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw) ; } } }
diff --git a/examples/scss/gulp/gulpfile.js b/examples/scss/gulp/gulpfile.js
new file mode 100644
index 0000000..62c60de
--- /dev/null
+++ b/examples/scss/gulp/gulpfile.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const gulp = require('gulp'),
+ sass = require('gulp-sass');
+
+gulp.task('build', function () {
+  return gulp.src('./src/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./dest'));
+});
+
+gulp.task('watch', function () {
+  gulp.watch('./src/**/*.scss', ['build']);
+});
diff --git a/examples/scss/gulp/src/main.scss b/examples/scss/gulp/src/main.scss
new file mode 100644
index 0000000..5724d86
--- /dev/null
+++ b/examples/scss/gulp/src/main.scss
@@ -0,0 +1,40 @@
+@import "../../../../scss/rfs";
+
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px;
+  @include responsive-font-size(32px);
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2 {
+  @include responsive-font-size(2rem);
+}
+
+/* responsive-font-size property with !important */
+.selector-3 {
+  @include responsive-font-size(2rem, true);
+}
+
+/* rfs shorthand */
+.selector-4 {
+  @include rfs(2rem);
+}
+
+/* not supported unit */
+.selector-5 {
+  @include responsive-font-size(2em);
+}
+
+/* special value */
+.selector-6 {
+  @include responsive-font-size(inherit);
+}
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7 {
+    @include rfs(28px);
+  }
+}
diff --git a/examples/scss/node/dest/main.css b/examples/scss/node/dest/main.css
new file mode 100644
index 0000000..dd46c10
--- /dev/null
+++ b/examples/scss/node/dest/main.css
@@ -0,0 +1,54 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px; }
+  .selector-1,
+  .disable-responsive-font-size .selector-1, .selector-1.disable-responsive-font-size {
+    font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-1 {
+      font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
+  font-size: 2rem !important; }
+
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.2rem + 1.06667vw)  !important; } }
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* not supported unit */
+.selector-5 {
+  font-size: 2em; }
+
+/* special value */
+.selector-6 {
+  font-size: inherit; }
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7,
+  .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem; }
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw) ; } } }
diff --git a/examples/scss/node/index.js b/examples/scss/node/index.js
new file mode 100644
index 0000000..7af0d1e
--- /dev/null
+++ b/examples/scss/node/index.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const sass = require('node-sass');
+
+
+sass.render({
+    file: 'src/main.scss', outFile: 'dest/main.css',
+  }, function (error, result) { // node-style callback from v3.0.0 onwards
+    if (!error) {
+      // No errors during the compilation, write this result on the disk
+      fs.writeFile('dest/main.css', result.css, function (err) {
+        if (!err) {
+          console.log('Responsive font sizes generated.');
+        }
+        else {
+          throw err;
+        }
+      });
+    }
+    else {
+      throw error;
+    }
+  }
+);
diff --git a/examples/scss/node/src/main.scss b/examples/scss/node/src/main.scss
new file mode 100644
index 0000000..5724d86
--- /dev/null
+++ b/examples/scss/node/src/main.scss
@@ -0,0 +1,40 @@
+@import "../../../../scss/rfs";
+
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px;
+  @include responsive-font-size(32px);
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2 {
+  @include responsive-font-size(2rem);
+}
+
+/* responsive-font-size property with !important */
+.selector-3 {
+  @include responsive-font-size(2rem, true);
+}
+
+/* rfs shorthand */
+.selector-4 {
+  @include rfs(2rem);
+}
+
+/* not supported unit */
+.selector-5 {
+  @include responsive-font-size(2em);
+}
+
+/* special value */
+.selector-6 {
+  @include responsive-font-size(inherit);
+}
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7 {
+    @include rfs(28px);
+  }
+}
diff --git a/examples/stylus/gulp/dest/main.css b/examples/stylus/gulp/dest/main.css
new file mode 100644
index 0000000..07c6246
--- /dev/null
+++ b/examples/stylus/gulp/dest/main.css
@@ -0,0 +1,69 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+}
+.selector-1,
+.disable-responsive-font-size .selector-1,
+.selector-1.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-1 {
+    font-size: calc(1.2rem + 1.066666666666667vw);
+  }
+}
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2,
+.selector-2.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.2rem + 1.066666666666667vw);
+  }
+}
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3,
+.selector-3.disable-responsive-font-size {
+  font-size: 2rem!important;
+}
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.2rem + 1.066666666666667vw)!important;
+  }
+}
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4,
+.selector-4.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.2rem + 1.066666666666667vw);
+  }
+}
+/* not supported unit */
+.selector-5 {
+  font-size: 2em;
+}
+/* special value */
+.selector-6 {
+  font-size: inherit;
+}
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7,
+  .disable-responsive-font-size .selector-7,
+  .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem;
+  }
+@media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw);
+    }
+}
+}
diff --git a/examples/stylus/gulp/gulpfile.js b/examples/stylus/gulp/gulpfile.js
new file mode 100644
index 0000000..60a76b0
--- /dev/null
+++ b/examples/stylus/gulp/gulpfile.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const gulp = require('gulp'),
+ stylus = require('gulp-stylus');
+
+gulp.task('build', function () {
+  return gulp.src('./src/**/*.styl')
+    .pipe(stylus())
+    .pipe(gulp.dest('./dest'));
+});
+
+gulp.task('watch', function () {
+  gulp.watch('./src/**/*.styl', ['build']);
+});
diff --git a/examples/stylus/gulp/src/main.styl b/examples/stylus/gulp/src/main.styl
new file mode 100644
index 0000000..21c6e76
--- /dev/null
+++ b/examples/stylus/gulp/src/main.styl
@@ -0,0 +1,32 @@
+@import "../../../../stylus/rfs"
+
+/* responsive-font-size property with `px` unit */
+.selector-1
+  background-color: red
+  width: 300px
+  responsive-font-size(32px)
+
+/* responsive-font-size property with `rem` unit */
+.selector-2
+  responsive-font-size(2rem)
+
+/* responsive-font-size property with !important */
+.selector-3
+  responsive-font-size(2rem, true)
+
+/* rfs shorthand */
+.selector-4
+  rfs(2rem)
+
+/* not supported unit */
+.selector-5
+  responsive-font-size(2em)
+
+/* special value */
+.selector-6
+  responsive-font-size(inherit)
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex)
+  .selector-7
+    rfs(28px)
diff --git a/examples/stylus/node/dest/main.css b/examples/stylus/node/dest/main.css
new file mode 100644
index 0000000..dd46c10
--- /dev/null
+++ b/examples/stylus/node/dest/main.css
@@ -0,0 +1,54 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+  background-color: red;
+  width: 300px; }
+  .selector-1,
+  .disable-responsive-font-size .selector-1, .selector-1.disable-responsive-font-size {
+    font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-1 {
+      font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
+  font-size: 2rem !important; }
+
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.2rem + 1.06667vw)  !important; } }
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.2rem + 1.06667vw) ; } }
+
+/* not supported unit */
+.selector-5 {
+  font-size: 2em; }
+
+/* special value */
+.selector-6 {
+  font-size: inherit; }
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+  .selector-7,
+  .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem; }
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.15rem + 0.8vw) ; } } }
diff --git a/examples/stylus/node/index.js b/examples/stylus/node/index.js
new file mode 100644
index 0000000..896c9c2
--- /dev/null
+++ b/examples/stylus/node/index.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const stylus = require('stylus');
+
+
+sass.render({
+    file: 'src/main.sass', outFile: 'dest/main.css',
+  }, function (error, result) { // node-style callback from v3.0.0 onwards
+    if (!error) {
+      // No errors during the compilation, write this result on the disk
+      fs.writeFile('dest/main.css', result.css, function (err) {
+        if (!err) {
+          console.log('Responsive font sizes generated.');
+        }
+        else {
+          throw err;
+        }
+      });
+    }
+    else {
+      throw error;
+    }
+  }
+);
diff --git a/examples/stylus/node/src/main.sass b/examples/stylus/node/src/main.sass
new file mode 100644
index 0000000..76f6757
--- /dev/null
+++ b/examples/stylus/node/src/main.sass
@@ -0,0 +1,32 @@
+@import "../../../../scss/rfs"
+
+/* responsive-font-size property with `px` unit */
+.selector-1
+  background-color: red
+  width: 300px
+  @include responsive-font-size(32px)
+
+/* responsive-font-size property with `rem` unit */
+.selector-2
+  @include responsive-font-size(2rem)
+
+/* responsive-font-size property with !important */
+.selector-3
+  @include responsive-font-size(2rem, true)
+
+/* rfs shorthand */
+.selector-4
+  @include rfs(2rem)
+
+/* not supported unit */
+.selector-5
+  @include responsive-font-size(2em)
+
+/* special value */
+.selector-6
+  @include responsive-font-size(inherit)
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex)
+  .selector-7
+    @include rfs(28px)