Support for every property (#144)

- Support for all properties
- Shorthand mixins for margins and paddings
- Support for custom properties
- Clearer way to declare `!important` rules: `@include rfs(1rem !important)` instead of `@include rfs(1rem, true)`
- Switched to mobile first approach, still possible to switch to the `max-width` media queries if needed
- Configuration variables are changed:
	- Base font size -> Base value
	- Font size unit -> Unit
- `responsive-font-size` property changed to `rfs()` function (see https://github.com/twbs/rfs/issues/116)
- Dropped `responsive-font-size` mixins
- Dropped Less 2 support since we had to work with lists
- Prevent generation of `/test/expected/main.css`
- Additional tests for new implementations
- Cleanup npm scripts examples
- Code examples in `README.md` are grouped by processor and collapsed

33 files changed, 1447 insertions, 786 deletions

diff --git a/examples/README.md b/examples/README.md
index 012f79a..7deb92c 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -1,6 +1,8 @@
 # Examples
 
-Setup
+## Setup
+
+Install dependencies in the root of the project.
 
 ```shell
 npm install
@@ -8,20 +10,24 @@ npm install
 yarn
 ```
 
+## Example setup
+
+Each folder contains a node (`index.js`) & gulp (`gulpfile.js`) example.
+
 ## Less
 
 ### node
 
 ```shell
-cd examples/less/node
-node ./index.js
+cd examples/less
+node index.js
 ```
 
 ### Gulp
 
 ```shell
-cd examples/less/gulp
-gulp build
+cd examples/less
+gulp
 ```
 
 
@@ -30,15 +36,15 @@ gulp build
 ### node
 
 ```shell
-cd examples/postcss/node
-node ./index.js
+cd examples/postcss
+node index.js
 ```
 
 ### Gulp
 
 ```shell
-cd examples/postcss/gulp
-gulp build
+cd examples/postcss
+gulp
 ```
 
 
@@ -47,15 +53,15 @@ gulp build
 ### node
 
 ```shell
-cd examples/scss/node
-node ./index.js
+cd examples/scss
+node index.js
 ```
 
 ### Gulp
 
 ```shell
-cd examples/scss/gulp
-gulp build
+cd examples/scss
+gulp
 ```
 
 
@@ -64,13 +70,13 @@ gulp build
 ### node
 
 ```shell
-cd examples/stylus/node
-node ./index.js
+cd examples/stylus
+node index.js
 ```
 
 ### Gulp
 
 ```shell
-cd examples/stylus/gulp
-gulp build
+cd examples/stylus
+gulp
 ```
diff --git a/examples/less/dest/main.css b/examples/less/dest/main.css
new file mode 100644
index 0000000..17ab0bd
--- /dev/null
+++ b/examples/less/dest/main.css
@@ -0,0 +1,203 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
+.selector-2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
+.selector-3 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
+.selector-4 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
+.selector-5 {
+  font-size: 2em;
+}
+.selector-6 {
+  font-size: inherit;
+}
+@supports (display: flex) {
+  .selector-7 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+  }
+}
+.selector-8 {
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
+.selector-9 {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-9 {
+    padding: 2rem;
+  }
+}
+.selector-10 {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+.selector-15 {
+  margin: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+.selector-20 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+.selector-21 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-21 {
+    margin: 2rem 3rem !important;
+  }
+}
+.selector-22 {
+  font-size: 0;
+}
+.selector-23 {
+  margin: 0 calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-23 {
+    margin: 0 3rem;
+  }
+}
+.selector-24 {
+  box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00 , 0 0 calc(1.425rem + 2.1vw) #0f0;
+}
+@media (min-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 2rem #f00 , 0 0 3rem #0f0;
+  }
+}
+.selector-25 {
+  --value: calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+.selector-26 {
+  font-size: 0.625rem;
+}
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/examples/less/gulp/dest/main.css b/examples/less/gulp/dest/main.css
deleted file mode 100644
index 43cc4e7..0000000
--- a/examples/less/gulp/dest/main.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .selector-1 {
-    font-size: calc(1.325rem + 0.9vw) ;
-  }
-}
-.selector-2 {
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .selector-2 {
-    font-size: calc(1.325rem + 0.9vw) ;
-  }
-}
-.selector-3 {
-  font-size: 2rem  !important;
-}
-@media (max-width: 1200px) {
-  .selector-3 {
-    font-size: calc(1.325rem + 0.9vw)  !important;
-  }
-}
-.selector-4 {
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .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: 1200px) {
-    .selector-7 {
-      font-size: calc(1.3rem + 0.6vw) ;
-    }
-  }
-}
-.selector-8 {
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .selector-8 {
-    font-size: calc(1.325rem + 0.9vw) ;
-  }
-}
diff --git a/examples/less/gulp/src/main.less b/examples/less/gulp/src/main.less
deleted file mode 100644
index ed2cc25..0000000
--- a/examples/less/gulp/src/main.less
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "../../../../less";
-
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  .responsive-font-size(32px);
-}
-
-.selector-2 {
-  .responsive-font-size(2rem);
-}
-
-.selector-3 {
-  .responsive-font-size(2rem, true);
-}
-
-.selector-4 {
-  .rfs(2rem);
-}
-
-.selector-5 {
-  .responsive-font-size(2em);
-}
-
-.selector-6 {
-  .responsive-font-size(inherit);
-}
-
-@supports (display: flex) {
-  .selector-7 {
-    .rfs(28px);
-  }
-}
-
-.selector-8 {
-  .responsive-font-size(32);
-}
diff --git a/examples/less/gulp/gulpfile.js b/examples/less/gulpfile.js
index 51600f9..a6048b6 100644
--- a/examples/less/gulp/gulpfile.js
+++ b/examples/less/gulpfile.js
@@ -3,7 +3,7 @@
 const gulp = require('gulp');
 const less = require('gulp-less');
 
-gulp.task('build', () => {
+gulp.task('default', () => {
   return gulp.src('./src/**/*.less')
     .pipe(less())
     .pipe(gulp.dest('./dest'));
diff --git a/examples/less/node/index.js b/examples/less/index.js
index 41760fb..85dc8ce 100644
--- a/examples/less/node/index.js
+++ b/examples/less/index.js
@@ -17,8 +17,6 @@ less.render(
       if (err) {
         throw err;
       }
-
-      console.log('Responsive font sizes generated.');
     });
   },
   error => {
diff --git a/examples/less/node/dest/main.css b/examples/less/node/dest/main.css
deleted file mode 100644
index 43cc4e7..0000000
--- a/examples/less/node/dest/main.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .selector-1 {
-    font-size: calc(1.325rem + 0.9vw) ;
-  }
-}
-.selector-2 {
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .selector-2 {
-    font-size: calc(1.325rem + 0.9vw) ;
-  }
-}
-.selector-3 {
-  font-size: 2rem  !important;
-}
-@media (max-width: 1200px) {
-  .selector-3 {
-    font-size: calc(1.325rem + 0.9vw)  !important;
-  }
-}
-.selector-4 {
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .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: 1200px) {
-    .selector-7 {
-      font-size: calc(1.3rem + 0.6vw) ;
-    }
-  }
-}
-.selector-8 {
-  font-size: 2rem ;
-}
-@media (max-width: 1200px) {
-  .selector-8 {
-    font-size: calc(1.325rem + 0.9vw) ;
-  }
-}
diff --git a/examples/less/node/src/main.less b/examples/less/node/src/main.less
deleted file mode 100644
index ed2cc25..0000000
--- a/examples/less/node/src/main.less
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "../../../../less";
-
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  .responsive-font-size(32px);
-}
-
-.selector-2 {
-  .responsive-font-size(2rem);
-}
-
-.selector-3 {
-  .responsive-font-size(2rem, true);
-}
-
-.selector-4 {
-  .rfs(2rem);
-}
-
-.selector-5 {
-  .responsive-font-size(2em);
-}
-
-.selector-6 {
-  .responsive-font-size(inherit);
-}
-
-@supports (display: flex) {
-  .selector-7 {
-    .rfs(28px);
-  }
-}
-
-.selector-8 {
-  .responsive-font-size(32);
-}
diff --git a/examples/less/src/main.less b/examples/less/src/main.less
new file mode 100644
index 0000000..e5d1c2a
--- /dev/null
+++ b/examples/less/src/main.less
@@ -0,0 +1,133 @@
+@import "../../../less";
+
+// responsive-font-size property with `px` unit
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  .font-size(32px);
+}
+
+// responsive-font-size property with `rem` unit
+.selector-2 {
+  .font-size(2rem);
+}
+
+// responsive-font-size property with !important
+.selector-3 {
+  .font-size(2rem important);
+}
+
+// rfs shorthand
+.selector-4 {
+  .rfs(2rem);
+}
+
+// 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 {
+    .rfs(28px);
+  }
+}
+
+// responsive-font-size property without unit
+.selector-8 {
+  .rfs(0 999 32rem, flex);
+}
+
+// padding property
+.selector-9 {
+  .rfs(2rem, padding);
+}
+
+// padding shorthands
+.selector-10 {
+  .padding(2rem);
+}
+
+.selector-11 {
+  .padding-top(2rem);
+}
+
+.selector-12 {
+  .padding-right(2rem);
+}
+
+.selector-13 {
+  .padding-bottom(2rem);
+}
+
+.selector-14 {
+  .padding-left(2rem);
+}
+
+// margin shorthands
+.selector-15 {
+  .margin(2rem);
+}
+
+.selector-16 {
+  .margin-top(2rem);
+}
+
+.selector-17 {
+  .margin-right(2rem);
+}
+
+.selector-18 {
+  .margin-bottom(2rem);
+}
+
+.selector-19 {
+  .margin-left(2rem);
+}
+
+// Multiple values
+.selector-20 {
+  .margin(2rem 3rem);
+}
+
+// Multiple values with important
+.selector-21 {
+  .margin(2rem 3rem important);
+}
+
+// Zero test
+.selector-22 {
+  .rfs(0);
+}
+
+// Zero test
+.selector-23 {
+  .margin(0 3rem);
+}
+
+// Value with comma
+.selector-24 {
+  .rfs(0 0 2rem #f00 ~"," 0 0 3rem #0f0, box-shadow);
+}
+
+.selector-25 {
+  .rfs(3rem, --value);
+}
+
+.selector-26 {
+  .font-size(10px);
+}
+
+.selector-27 {
+  .margin(-3rem);
+}
+
+.selector-28 {
+  .margin(-.5rem);
+}
diff --git a/examples/postcss/dest/main.css b/examples/postcss/dest/main.css
new file mode 100644
index 0000000..41814d6
--- /dev/null
+++ b/examples/postcss/dest/main.css
@@ -0,0 +1,275 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-1 {
+  font-size: 2rem;
+  }
+}
+
+.selector-2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-2 {
+  font-size: 2rem;
+  }
+}
+
+.selector-3 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+@media (min-width: 1200px) {
+
+  .selector-3 {
+  font-size: 2rem !important;
+  }
+}
+
+.selector-4 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-4 {
+  font-size: 2rem;
+  }
+}
+
+.selector-5 {
+  font-size: 2em;
+}
+
+.selector-6 {
+  font-size: inherit;
+}
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+
+    .selector-7 {
+    font-size: 1.75rem;
+    }
+  }
+}
+
+.selector-8 {
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-8 {
+  flex: 0 999 32rem;
+  }
+}
+
+.selector-9 {
+  padding: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-9 {
+  padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-10 {
+  padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-11 {
+  padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-12 {
+  padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-13 {
+  padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-14 {
+  padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-15 {
+  margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-16 {
+  margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-17 {
+  margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-18 {
+  margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-19 {
+  margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-20 {
+  margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+
+@media (min-width: 1200px) {
+
+  .selector-21 {
+  margin: 2rem 3rem !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(1.425rem + 2.1vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-23 {
+  margin: 0 3rem;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0;
+}
+
+@media (min-width: 1200px) {
+
+  .selector-24 {
+  box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(1.425rem + 2.1vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-25 {
+  --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vw);
+}
+
+@media (min-width: 1200px) {
+
+  .selector-27 {
+  margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/examples/postcss/gulp/dest/main.css b/examples/postcss/gulp/dest/main.css
deleted file mode 100644
index 0afd3a6..0000000
--- a/examples/postcss/gulp/dest/main.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-1 {
-  font-size: calc(1.325rem + 0.9vw);
-  }
-}
-
-.selector-2 {
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-2 {
-  font-size: calc(1.325rem + 0.9vw);
-  }
-}
-
-.selector-3 {
-  font-size: 2rem !important;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-3 {
-  font-size: calc(1.325rem + 0.9vw) !important;
-  }
-}
-
-.selector-4 {
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .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: 1200px) {
-
-    .selector-7 {
-    font-size: calc(1.3rem + 0.6vw);
-    }
-  }
-}
-
-.selector-8 {
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-8 {
-  font-size: calc(1.325rem + 0.9vw);
-  }
-}
diff --git a/examples/postcss/gulp/src/main.css b/examples/postcss/gulp/src/main.css
deleted file mode 100644
index d1027ca..0000000
--- a/examples/postcss/gulp/src/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  responsive-font-size: 32px;
-}
-
-.selector-2 {
-  responsive-font-size: 2rem;
-}
-
-.selector-3 {
-  responsive-font-size: 2rem !important;
-}
-
-.selector-4 {
-  rfs: 2rem;
-}
-
-.selector-5 {
-  responsive-font-size: 2em;
-}
-
-.selector-6 {
-  responsive-font-size: inherit;
-}
-
-@supports (display: flex) {
-  .selector-7 {
-    rfs: 28px;
-  }
-}
-
-.selector-8 {
-  responsive-font-size: 32;
-}
diff --git a/examples/postcss/gulp/gulpfile.js b/examples/postcss/gulpfile.js
index 9c56767..62bbc88 100644
--- a/examples/postcss/gulp/gulpfile.js
+++ b/examples/postcss/gulpfile.js
@@ -2,23 +2,22 @@
 
 const gulp = require('gulp');
 const postcss = require('gulp-postcss');
-const rfs = require('../../..');
+const rfs = require('../../postcss');
 
 const options = {
   twoDimensional: false,
-  baseFontSize: 20,
-  fontSizeUnit: 'rem',
+  baseValue: 20,
+  unit: 'rem',
   breakpoint: 1200,
   breakpointUnit: 'px',
   factor: 10,
   class: false,
   unitPrecision: 6,
   safariIframeResizeBugFix: false,
-  remValue: 16,
-  propList: ['responsive-font-size', 'rfs']
+  remValue: 16
 };
 
-gulp.task('build', () => {
+gulp.task('default', () => {
   return gulp.src('./src/main.css')
     .pipe(postcss([rfs(options)]))
     .pipe(gulp.dest('./dest'));
diff --git a/examples/postcss/node/index.js b/examples/postcss/index.js
index b132c26..f005f6a 100644
--- a/examples/postcss/node/index.js
+++ b/examples/postcss/index.js
@@ -3,19 +3,20 @@
 const fs = require('fs');
 const path = require('path');
 const postcss = require('postcss');
-const rfs = require('../../..');
+const rfs = require('../../postcss');
 
 const css = fs.readFileSync(path.join(__dirname, '/src/main.css'), 'utf8');
 const options = {
   twoDimensional: false,
-  baseFontSize: 20,
-  fontSizeUnit: 'rem',
-  breakpoint: '75rem',
+  baseValue: 20,
+  unit: 'rem',
+  breakpoint: 1200,
   breakpointUnit: 'px',
   factor: 10,
+  class: false,
   unitPrecision: 6,
-  remValue: 16,
-  propList: ['responsive-font-size', 'rfs']
+  safariIframeResizeBugFix: false,
+  remValue: 16
 };
 
 const processedCss = postcss(rfs(options)).process(css).css;
@@ -24,6 +25,4 @@ fs.writeFile(path.join(__dirname, '/dest/main.css'), processedCss, err => {
   if (err) {
     throw err;
   }
-
-  console.log('Responsive font sizes generated.');
 });
diff --git a/examples/postcss/node/dest/main.css b/examples/postcss/node/dest/main.css
deleted file mode 100644
index 0afd3a6..0000000
--- a/examples/postcss/node/dest/main.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-1 {
-  font-size: calc(1.325rem + 0.9vw);
-  }
-}
-
-.selector-2 {
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-2 {
-  font-size: calc(1.325rem + 0.9vw);
-  }
-}
-
-.selector-3 {
-  font-size: 2rem !important;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-3 {
-  font-size: calc(1.325rem + 0.9vw) !important;
-  }
-}
-
-.selector-4 {
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .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: 1200px) {
-
-    .selector-7 {
-    font-size: calc(1.3rem + 0.6vw);
-    }
-  }
-}
-
-.selector-8 {
-  font-size: 2rem;
-}
-
-@media (max-width: 1200px) {
-
-  .selector-8 {
-  font-size: calc(1.325rem + 0.9vw);
-  }
-}
diff --git a/examples/postcss/node/src/main.css b/examples/postcss/node/src/main.css
deleted file mode 100644
index d1027ca..0000000
--- a/examples/postcss/node/src/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  responsive-font-size: 32px;
-}
-
-.selector-2 {
-  responsive-font-size: 2rem;
-}
-
-.selector-3 {
-  responsive-font-size: 2rem !important;
-}
-
-.selector-4 {
-  rfs: 2rem;
-}
-
-.selector-5 {
-  responsive-font-size: 2em;
-}
-
-.selector-6 {
-  responsive-font-size: inherit;
-}
-
-@supports (display: flex) {
-  .selector-7 {
-    rfs: 28px;
-  }
-}
-
-.selector-8 {
-  responsive-font-size: 32;
-}
diff --git a/examples/postcss/src/main.css b/examples/postcss/src/main.css
new file mode 100644
index 0000000..2a1db4a
--- /dev/null
+++ b/examples/postcss/src/main.css
@@ -0,0 +1,115 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: rfs(32px);
+}
+
+.selector-2 {
+  font-size: rfs(2rem);
+}
+
+.selector-3 {
+  font-size: rfs(2rem) !important;
+}
+
+.selector-4 {
+  font-size: rfs(2rem);
+}
+
+.selector-5 {
+  font-size: rfs(2em);
+}
+
+.selector-6 {
+  font-size: rfs(inherit);
+}
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: rfs(28px);
+  }
+}
+
+.selector-8 {
+  flex: rfs(0 999 32rem);
+}
+
+.selector-9 {
+  padding: rfs(2rem);
+}
+
+.selector-10 {
+  padding: rfs(2rem);
+}
+
+.selector-11 {
+  padding-top: rfs(2rem);
+}
+
+.selector-12 {
+  padding-right: rfs(2rem);
+}
+
+.selector-13 {
+  padding-bottom: rfs(2rem);
+}
+
+.selector-14 {
+  padding-left: rfs(2rem);
+}
+
+.selector-15 {
+  margin: rfs(2rem);
+}
+
+.selector-16 {
+  margin-top: rfs(2rem);
+}
+
+.selector-17 {
+  margin-right: rfs(2rem);
+}
+
+.selector-18 {
+  margin-bottom: rfs(2rem);
+}
+
+.selector-19 {
+  margin-left: rfs(2rem);
+}
+
+.selector-20 {
+  margin: rfs(2rem 3rem);
+}
+
+.selector-21 {
+  margin: rfs(2rem 3rem) !important;
+}
+
+.selector-22 {
+  font-size: rfs(0);
+}
+
+.selector-23 {
+  margin: rfs(0 3rem);
+}
+
+.selector-24 {
+  box-shadow: rfs(0 0 2rem #f00, 0 0 3rem #0f0);
+}
+
+.selector-25 {
+  --value: rfs(3rem);
+}
+
+.selector-26 {
+  font-size: rfs(10px);
+}
+
+.selector-27 {
+  margin: rfs(-3rem);
+}
+
+.selector-28 {
+  margin: rfs(-.5rem);
+}
diff --git a/examples/scss/dest/main.css b/examples/scss/dest/main.css
new file mode 100644
index 0000000..d8b1ad4
--- /dev/null
+++ b/examples/scss/dest/main.css
@@ -0,0 +1,252 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
+
+.selector-2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
+
+.selector-3 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
+
+.selector-4 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
+
+.selector-5 {
+  font-size: 2em;
+}
+
+.selector-6 {
+  font-size: inherit;
+}
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+  }
+}
+
+.selector-8 {
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
+
+.selector-9 {
+  padding: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-9 {
+    padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+
+@media (min-width: 1200px) {
+  .selector-21 {
+    margin: 2rem 3rem !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(1.425rem + 2.1vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-23 {
+    margin: 0 3rem;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00 , 0 0 calc(1.425rem + 2.1vw) #0f0;
+}
+
+@media (min-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 2rem #f00 , 0 0 3rem #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(1.425rem + 2.1vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vw);
+}
+
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/examples/scss/gulp/dest/main.css b/examples/scss/gulp/dest/main.css
deleted file mode 100644
index 3bed4b0..0000000
--- a/examples/scss/gulp/dest/main.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-1 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
-
-.selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-2 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
-
-.selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 1200px) {
-    .selector-3 {
-      font-size: calc(1.325rem + 0.9vw)  !important; } }
-
-.selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .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: 1200px) {
-      .selector-7 {
-        font-size: calc(1.3rem + 0.6vw) ; } } }
-
-.selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-8 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/examples/scss/gulp/src/main.scss b/examples/scss/gulp/src/main.scss
deleted file mode 100644
index 5c7b744..0000000
--- a/examples/scss/gulp/src/main.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "../../../../scss";
-
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  @include responsive-font-size(32px);
-}
-
-.selector-2 {
-  @include responsive-font-size(2rem);
-}
-
-.selector-3 {
-  @include responsive-font-size(2rem, true);
-}
-
-.selector-4 {
-  @include rfs(2rem);
-}
-
-.selector-5 {
-  @include responsive-font-size(2em);
-}
-
-.selector-6 {
-  @include responsive-font-size(inherit);
-}
-
-@supports (display: flex) {
-  .selector-7 {
-    @include rfs(28px);
-  }
-}
-
-.selector-8 {
-  @include responsive-font-size(32);
-}
diff --git a/examples/scss/gulp/gulpfile.js b/examples/scss/gulpfile.js
index f46a31d..33acf36 100644
--- a/examples/scss/gulp/gulpfile.js
+++ b/examples/scss/gulpfile.js
@@ -3,9 +3,9 @@
 const gulp = require('gulp');
 const sass = require('gulp-sass');
 
-gulp.task('build', () => {
+gulp.task('default', () => {
   return gulp.src('./src/**/*.scss')
-    .pipe(sass().on('error', sass.logError))
+    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
     .pipe(gulp.dest('./dest'));
 });
 
diff --git a/examples/scss/node/index.js b/examples/scss/index.js
index 1d7f4d5..9591bf3 100644
--- a/examples/scss/node/index.js
+++ b/examples/scss/index.js
@@ -6,7 +6,8 @@ const sass = require('node-sass');
 
 sass.render({
   file: path.join(__dirname, '/src/main.scss'),
-  outFile: path.join(__dirname, '/dest/main.css')
+  outFile: path.join(__dirname, '/dest/main.css'),
+  outputStyle: 'expanded'
 }, (error, result) => { // Node-style callback from v3.0.0 onwards
   if (error) {
     throw error;
@@ -17,8 +18,6 @@ sass.render({
     if (err) {
       throw err;
     }
-
-    console.log('Responsive font sizes generated.');
   });
 }
 );
diff --git a/examples/scss/node/dest/main.css b/examples/scss/node/dest/main.css
deleted file mode 100644
index 3bed4b0..0000000
--- a/examples/scss/node/dest/main.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-1 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
-
-.selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-2 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
-
-.selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 1200px) {
-    .selector-3 {
-      font-size: calc(1.325rem + 0.9vw)  !important; } }
-
-.selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .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: 1200px) {
-      .selector-7 {
-        font-size: calc(1.3rem + 0.6vw) ; } } }
-
-.selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-8 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/examples/scss/node/src/main.scss b/examples/scss/node/src/main.scss
deleted file mode 100644
index 5c7b744..0000000
--- a/examples/scss/node/src/main.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "../../../../scss";
-
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  @include responsive-font-size(32px);
-}
-
-.selector-2 {
-  @include responsive-font-size(2rem);
-}
-
-.selector-3 {
-  @include responsive-font-size(2rem, true);
-}
-
-.selector-4 {
-  @include rfs(2rem);
-}
-
-.selector-5 {
-  @include responsive-font-size(2em);
-}
-
-.selector-6 {
-  @include responsive-font-size(inherit);
-}
-
-@supports (display: flex) {
-  .selector-7 {
-    @include rfs(28px);
-  }
-}
-
-.selector-8 {
-  @include responsive-font-size(32);
-}
diff --git a/examples/scss/src/main.scss b/examples/scss/src/main.scss
new file mode 100644
index 0000000..8e7250f
--- /dev/null
+++ b/examples/scss/src/main.scss
@@ -0,0 +1,137 @@
+@import "../../../scss";
+
+// font-size property with `px` unit
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  @include font-size(32px);
+}
+
+// font-size property with `rem` unit
+.selector-2 {
+  @include font-size(2rem);
+}
+
+// font-size property with !important
+.selector-3 {
+  @include font-size(2rem !important);
+}
+
+// rfs shorthand
+.selector-4 {
+  @include rfs(2rem);
+}
+
+// not supported unit
+.selector-5 {
+  @include font-size(2em);
+}
+
+// special value
+.selector-6 {
+  @include font-size(inherit);
+}
+
+// font-size property inside @support-query
+@supports (display: flex) {
+  .selector-7 {
+    @include rfs(28px);
+  }
+}
+
+// flex property with unitless values
+.selector-8 {
+  @include rfs(0 999 32rem, flex);
+}
+
+// padding property
+.selector-9 {
+  @include rfs(2rem, $property: padding);
+}
+
+// padding shorthands
+.selector-10 {
+  @include padding(2rem);
+}
+
+.selector-11 {
+  @include padding-top(2rem);
+}
+
+.selector-12 {
+  @include padding-right(2rem);
+}
+
+.selector-13 {
+  @include padding-bottom(2rem);
+}
+
+.selector-14 {
+  @include padding-left(2rem);
+}
+
+// margin shorthands
+.selector-15 {
+  @include margin(2rem);
+}
+
+.selector-16 {
+  @include margin-top(2rem);
+}
+
+.selector-17 {
+  @include margin-right(2rem);
+}
+
+.selector-18 {
+  @include margin-bottom(2rem);
+}
+
+.selector-19 {
+  @include margin-left(2rem);
+}
+
+// Multiple values
+.selector-20 {
+  @include margin(2rem 3rem);
+}
+
+// Multiple values with important
+.selector-21 {
+  @include margin(2rem 3rem !important);
+}
+
+// Zero test
+.selector-22 {
+  @include rfs(0);
+}
+
+// Zero combination test
+.selector-23 {
+  @include margin(0 3rem);
+}
+
+// Value with comma
+.selector-24 {
+  @include rfs(0 0 2rem #f00 #{","} 0 0 3rem #0f0, box-shadow);
+}
+
+// Custom properties
+.selector-25 {
+  @include rfs(3rem, --value);
+}
+
+// Test small value
+.selector-26 {
+  @include font-size(10px);
+}
+
+// Negative units
+.selector-27 {
+  @include margin(-3rem);
+}
+
+// Small negative unit
+.selector-28 {
+  @include margin(-.5rem);
+}
diff --git a/examples/stylus/dest/main.css b/examples/stylus/dest/main.css
new file mode 100644
index 0000000..da6e0f6
--- /dev/null
+++ b/examples/stylus/dest/main.css
@@ -0,0 +1,203 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
+.selector-2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
+.selector-3 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
+.selector-4 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
+.selector-5 {
+  font-size: 2em;
+}
+.selector-6 {
+  font-size: inherit;
+}
+@supports (display: flex) {
+  .selector-7 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+@media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+}
+}
+.selector-8 {
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
+.selector-9 {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-9 {
+    padding: 2rem;
+  }
+}
+.selector-10 {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+.selector-15 {
+  margin: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+.selector-20 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+.selector-21 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-21 {
+    margin: 2rem 3rem !important;
+  }
+}
+.selector-22 {
+  font-size: 0;
+}
+.selector-23 {
+  margin: 0 calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-23 {
+    margin: 0 3rem;
+  }
+}
+.selector-24 {
+  box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00 , 0 0 calc(1.425rem + 2.1vw) #0f0;
+}
+@media (min-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 2rem #f00 , 0 0 3rem #0f0;
+  }
+}
+.selector-25 {
+  --value: calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+.selector-26 {
+  font-size: 0.625rem;
+}
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/examples/stylus/gulp/dest/main.css b/examples/stylus/gulp/dest/main.css
deleted file mode 100644
index 11ac0f3..0000000
--- a/examples/stylus/gulp/dest/main.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .selector-1 {
-    font-size: calc(1.325rem + 0.9vw);
-  }
-}
-.selector-2 {
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .selector-2 {
-    font-size: calc(1.325rem + 0.9vw);
-  }
-}
-.selector-3 {
-  font-size: 2rem !important;
-}
-@media (max-width: 1200px) {
-  .selector-3 {
-    font-size: calc(1.325rem + 0.9vw)!important;
-  }
-}
-.selector-4 {
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .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: 1200px) {
-    .selector-7 {
-      font-size: calc(1.3rem + 0.6vw);
-    }
-}
-}
-.selector-8 {
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .selector-8 {
-    font-size: calc(1.325rem + 0.9vw);
-  }
-}
diff --git a/examples/stylus/gulp/src/main.styl b/examples/stylus/gulp/src/main.styl
deleted file mode 100644
index 0a1c728..0000000
--- a/examples/stylus/gulp/src/main.styl
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../../../../stylus"
-.selector-1
-  background-color: #f00
-  width: 300px
-  responsive-font-size(32px)
-
-.selector-2
-  responsive-font-size(2rem)
-
-.selector-3
-  responsive-font-size(2rem, true)
-
-.selector-4
-  rfs(2rem)
-
-.selector-5
-  responsive-font-size(2em)
-
-.selector-6
-  responsive-font-size(inherit)
-
-@supports (display: flex)
-  .selector-7
-    rfs(28px)
-
-.selector-8
-  responsive-font-size(32)
diff --git a/examples/stylus/gulp/gulpfile.js b/examples/stylus/gulpfile.js
index 3ea42bd..abde6d4 100644
--- a/examples/stylus/gulp/gulpfile.js
+++ b/examples/stylus/gulpfile.js
@@ -3,7 +3,7 @@
 const gulp = require('gulp');
 const stylus = require('gulp-stylus');
 
-gulp.task('build', () => {
+gulp.task('default', () => {
   return gulp.src('./src/**/*.styl')
     .pipe(stylus())
     .pipe(gulp.dest('./dest'));
diff --git a/examples/stylus/node/index.js b/examples/stylus/index.js
index b139adf..8ab8f13 100644
--- a/examples/stylus/node/index.js
+++ b/examples/stylus/index.js
@@ -17,7 +17,5 @@ stylus.render(str, {
     if (err) {
       throw err;
     }
-
-    console.log('Responsive font sizes generated.');
   });
 });
diff --git a/examples/stylus/node/dest/main.css b/examples/stylus/node/dest/main.css
deleted file mode 100644
index 11ac0f3..0000000
--- a/examples/stylus/node/dest/main.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.selector-1 {
-  background-color: #f00;
-  width: 300px;
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .selector-1 {
-    font-size: calc(1.325rem + 0.9vw);
-  }
-}
-.selector-2 {
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .selector-2 {
-    font-size: calc(1.325rem + 0.9vw);
-  }
-}
-.selector-3 {
-  font-size: 2rem !important;
-}
-@media (max-width: 1200px) {
-  .selector-3 {
-    font-size: calc(1.325rem + 0.9vw)!important;
-  }
-}
-.selector-4 {
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .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: 1200px) {
-    .selector-7 {
-      font-size: calc(1.3rem + 0.6vw);
-    }
-}
-}
-.selector-8 {
-  font-size: 2rem;
-}
-@media (max-width: 1200px) {
-  .selector-8 {
-    font-size: calc(1.325rem + 0.9vw);
-  }
-}
diff --git a/examples/stylus/node/src/main.styl b/examples/stylus/node/src/main.styl
deleted file mode 100644
index 0a1c728..0000000
--- a/examples/stylus/node/src/main.styl
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../../../../stylus"
-.selector-1
-  background-color: #f00
-  width: 300px
-  responsive-font-size(32px)
-
-.selector-2
-  responsive-font-size(2rem)
-
-.selector-3
-  responsive-font-size(2rem, true)
-
-.selector-4
-  rfs(2rem)
-
-.selector-5
-  responsive-font-size(2em)
-
-.selector-6
-  responsive-font-size(inherit)
-
-@supports (display: flex)
-  .selector-7
-    rfs(28px)
-
-.selector-8
-  responsive-font-size(32)
diff --git a/examples/stylus/src/main.styl b/examples/stylus/src/main.styl
new file mode 100644
index 0000000..245037c
--- /dev/null
+++ b/examples/stylus/src/main.styl
@@ -0,0 +1,88 @@
+@import "../../../stylus"
+
+.selector-1
+  background-color: #f00
+  width: 300px
+  rfs(32px)
+
+.selector-2
+  rfs(2rem)
+
+.selector-3
+  rfs(2rem !important)
+
+.selector-4
+  rfs(2rem)
+
+.selector-5
+  rfs(2em)
+
+.selector-6
+  rfs(inherit)
+
+@supports (display: flex)
+  .selector-7
+    rfs(28px)
+
+.selector-8
+  rfs(0 999 32rem, flex)
+
+.selector-9
+  rfs(2rem, padding)
+
+.selector-10
+  rfs-padding(2rem)
+
+.selector-11
+  rfs-padding-top(2rem)
+
+.selector-12
+  rfs-padding-right(2rem)
+
+.selector-13
+  rfs-padding-bottom(2rem)
+
+.selector-14
+  rfs-padding-left(2rem)
+
+.selector-15
+  rfs-margin(2rem)
+
+.selector-16
+  rfs-margin-top(2rem)
+
+.selector-17
+  rfs-margin-right(2rem)
+
+.selector-18
+  rfs-margin-bottom(2rem)
+
+.selector-19
+  rfs-margin-left(2rem)
+
+.selector-20
+  rfs-margin(2rem 3rem)
+
+.selector-21
+  rfs-margin(2rem 3rem !important)
+
+.selector-22
+  rfs(0)
+
+.selector-23
+  rfs-margin(0 3rem)
+
+.selector-24
+  rfs(0 0 2rem #f00\, 0 0 3rem #0f0, box-shadow)
+
+.selector-25
+  rfs(3rem, --value)
+
+.selector-26
+  rfs-font-size(10px)
+
+.selector-27
+  rfs-margin(-3rem)
+
+.selector-28
+  rfs-margin(-.5rem)