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

6 files changed, 117 insertions, 101 deletions

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