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

6 files changed, 225 insertions, 0 deletions

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);
+  }
+}