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

36 files changed, 2890 insertions, 410 deletions

diff --git a/test/expected/test-1.css b/test/expected/test-1.css
index 28600b3..215e510 100644
--- a/test/expected/test-1.css
+++ b/test/expected/test-1.css
@@ -1,50 +1,230 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-1 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
 
 .selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-2 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
 
 .selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 1200px) {
-    .selector-3 {
-      font-size: calc(1.325rem + 0.9vw)  !important; } }
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
 
 .selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-4 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  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) ; } } }
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-8 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
 
 .selector-9 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-9 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  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/test/expected/test-10.css b/test/expected/test-10.css
index 44c81dc..9998292 100644
--- a/test/expected/test-10.css
+++ b/test/expected/test-10.css
@@ -1,57 +1,253 @@
 .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; } }
+  font-size: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-1 {
+    font-size: 32px;
+  }
+}
 
 .selector-2 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-2 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  font-size: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-2 {
+    font-size: 32px;
+  }
+}
 
 .selector-3 {
-  font-size: 32px !important; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-3 {
-      font-size: calc(16px + 2vmin)  !important;
-      min-width: 0vw; } }
+  font-size: calc(16px + 2vmin) !important;
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-3 {
+    font-size: 32px !important;
+  }
+}
 
 .selector-4 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-4 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  font-size: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-4 {
+    font-size: 32px;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  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; } } }
+    font-size: calc(15.2px + 1.6vmin);
+    min-width: 0vw;
+  }
+  @media (min-width: 50rem), (min-height: 50rem) {
+    .selector-7 {
+      font-size: 28px;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-8 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  flex: 0 999 calc(112px + 50vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-8 {
+    flex: 0 999 512px;
+  }
+}
 
 .selector-9 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-9 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  padding: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-9 {
+    padding: 32px;
+  }
+}
+
+.selector-10 {
+  padding: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-10 {
+    padding: 32px;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-11 {
+    padding-top: 32px;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-12 {
+    padding-right: 32px;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-13 {
+    padding-bottom: 32px;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-14 {
+    padding-left: 32px;
+  }
+}
+
+.selector-15 {
+  margin: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-15 {
+    margin: 32px;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-16 {
+    margin-top: 32px;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-17 {
+    margin-right: 32px;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-18 {
+    margin-bottom: 32px;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-19 {
+    margin-left: 32px;
+  }
+}
+
+.selector-20 {
+  margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-20 {
+    margin: 32px 48px;
+  }
+}
+
+.selector-21 {
+  margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important;
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-21 {
+    margin: 32px 48px !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(19.2px + 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-23 {
+    margin: 0 48px;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0;
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-24 {
+    box-shadow: 0 0 32px #f00, 0 0 48px #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(19.2px + 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-25 {
+    --value: 48px;
+  }
+}
+
+.selector-26 {
+  font-size: 10px;
+}
+
+.selector-27 {
+  margin: calc(-19.2px - 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-27 {
+    margin: -48px;
+  }
+}
+
+.selector-28 {
+  margin: -8px;
+}
diff --git a/test/expected/test-11.css b/test/expected/test-11.css
new file mode 100644
index 0000000..25a1c40
--- /dev/null
+++ b/test/expected/test-11.css
@@ -0,0 +1,230 @@
+.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 {
+  flex: 0 999 32rem;
+}
+@media (max-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 calc(4.325rem + 36.9vw);
+  }
+}
+
+.selector-9 {
+  padding: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-9 {
+    padding: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-10 {
+  padding: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-10 {
+    padding: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-11 {
+  padding-top: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-11 {
+    padding-top: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-12 {
+  padding-right: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-12 {
+    padding-right: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-13 {
+  padding-bottom: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-13 {
+    padding-bottom: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-14 {
+  padding-left: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-14 {
+    padding-left: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-15 {
+  margin: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-15 {
+    margin: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-16 {
+  margin-top: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-16 {
+    margin-top: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-17 {
+  margin-right: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-17 {
+    margin-right: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-18 {
+  margin-bottom: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-18 {
+    margin-bottom: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-19 {
+  margin-left: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-19 {
+    margin-left: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-20 {
+  margin: 2rem 3rem;
+}
+@media (max-width: 1200px) {
+  .selector-20 {
+    margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+  }
+}
+
+.selector-21 {
+  margin: 2rem 3rem !important;
+}
+@media (max-width: 1200px) {
+  .selector-21 {
+    margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 3rem;
+}
+@media (max-width: 1200px) {
+  .selector-23 {
+    margin: 0 calc(1.425rem + 2.1vw);
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+}
+@media (max-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0;
+  }
+}
+
+.selector-25 {
+  --value: 3rem;
+}
+@media (max-width: 1200px) {
+  .selector-25 {
+    --value: calc(1.425rem + 2.1vw);
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: -3rem;
+}
+@media (max-width: 1200px) {
+  .selector-27 {
+    margin: calc(-1.425rem - 2.1vw);
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-2.css b/test/expected/test-2.css
index 318a432..9780f2e 100644
--- a/test/expected/test-2.css
+++ b/test/expected/test-2.css
@@ -1,29 +1,115 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 2rem; }
+  font-size: 2rem;
+}
 
 .selector-2 {
-  font-size: 2rem; }
+  font-size: 2rem;
+}
 
 .selector-3 {
-  font-size: 2rem !important; }
+  font-size: 2rem !important;
+}
 
 .selector-4 {
-  font-size: 2rem; }
+  font-size: 2rem;
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 @supports (display: flex) {
   .selector-7 {
-    font-size: 1.75rem; } }
+    font-size: 1.75rem;
+  }
+}
 
 .selector-8 {
-  font-size: 2rem; }
+  flex: 0 999 32rem;
+}
 
 .selector-9 {
-  font-size: 2rem; }
+  padding: 2rem;
+}
+
+.selector-10 {
+  padding: 2rem;
+}
+
+.selector-11 {
+  padding-top: 2rem;
+}
+
+.selector-12 {
+  padding-right: 2rem;
+}
+
+.selector-13 {
+  padding-bottom: 2rem;
+}
+
+.selector-14 {
+  padding-left: 2rem;
+}
+
+.selector-15 {
+  margin: 2rem;
+}
+
+.selector-16 {
+  margin-top: 2rem;
+}
+
+.selector-17 {
+  margin-right: 2rem;
+}
+
+.selector-18 {
+  margin-bottom: 2rem;
+}
+
+.selector-19 {
+  margin-left: 2rem;
+}
+
+.selector-20 {
+  margin: 2rem 3rem;
+}
+
+.selector-21 {
+  margin: 2rem 3rem !important;
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 3rem;
+}
+
+.selector-24 {
+  box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+}
+
+.selector-25 {
+  --value: 3rem;
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: -3rem;
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-3.css b/test/expected/test-3.css
index 0fe39d5..1463c78 100644
--- a/test/expected/test-3.css
+++ b/test/expected/test-3.css
@@ -1,63 +1,322 @@
 .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.325rem + 0.9vw) ; } }
-
-.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.325rem + 0.9vw) ; } }
+  width: 300px;
+  font-size: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-1,
+.selector-1.disable-rfs {
+  font-size: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
 
-.selector-3,
-.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
-  font-size: 2rem !important; }
+.selector-2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-2,
+.selector-2.disable-rfs {
+  font-size: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
 
-@media (max-width: 1200px) {
+.selector-3 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+.disable-rfs .selector-3,
+.selector-3.disable-rfs {
+  font-size: 2rem !important;
+}
+@media (min-width: 1200px) {
   .selector-3 {
-    font-size: calc(1.325rem + 0.9vw)  !important; } }
-
-.selector-4,
-.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
-  font-size: 2rem; }
+    font-size: 2rem !important;
+  }
+}
 
-@media (max-width: 1200px) {
+.selector-4 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-4,
+.selector-4.disable-rfs {
+  font-size: 2rem;
+}
+@media (min-width: 1200px) {
   .selector-4 {
-    font-size: calc(1.325rem + 0.9vw) ; } }
+    font-size: 2rem;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 @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.3rem + 0.6vw);
+  }
+  .disable-rfs .selector-7,
+  .selector-7.disable-rfs {
+    font-size: 1.75rem;
+  }
+  @media (min-width: 1200px) {
     .selector-7 {
-      font-size: calc(1.3rem + 0.6vw) ; } } }
+      font-size: 1.75rem;
+    }
+  }
+}
 
-.selector-8,
-.disable-responsive-font-size .selector-8, .selector-8.disable-responsive-font-size {
-  font-size: 2rem; }
-
-@media (max-width: 1200px) {
+.selector-8 {
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+.disable-rfs .selector-8,
+.selector-8.disable-rfs {
+  flex: 0 999 32rem;
+}
+@media (min-width: 1200px) {
   .selector-8 {
-    font-size: calc(1.325rem + 0.9vw) ; } }
-
-.selector-9,
-.disable-responsive-font-size .selector-9, .selector-9.disable-responsive-font-size {
-  font-size: 2rem; }
+    flex: 0 999 32rem;
+  }
+}
 
-@media (max-width: 1200px) {
+.selector-9 {
+  padding: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-9,
+.selector-9.disable-rfs {
+  padding: 2rem;
+}
+@media (min-width: 1200px) {
   .selector-9 {
-    font-size: calc(1.325rem + 0.9vw) ; } }
+    padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-10,
+.selector-10.disable-rfs {
+  padding: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-11,
+.selector-11.disable-rfs {
+  padding-top: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-12,
+.selector-12.disable-rfs {
+  padding-right: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-13,
+.selector-13.disable-rfs {
+  padding-bottom: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-14,
+.selector-14.disable-rfs {
+  padding-left: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-15,
+.selector-15.disable-rfs {
+  margin: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-16,
+.selector-16.disable-rfs {
+  margin-top: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-17,
+.selector-17.disable-rfs {
+  margin-right: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-18,
+.selector-18.disable-rfs {
+  margin-bottom: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+.disable-rfs .selector-19,
+.selector-19.disable-rfs {
+  margin-left: 2rem;
+}
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+.disable-rfs .selector-20,
+.selector-20.disable-rfs {
+  margin: 2rem 3rem;
+}
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+.disable-rfs .selector-21,
+.selector-21.disable-rfs {
+  margin: 2rem 3rem !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);
+}
+.disable-rfs .selector-23,
+.selector-23.disable-rfs {
+  margin: 0 3rem;
+}
+@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;
+}
+.disable-rfs .selector-24,
+.selector-24.disable-rfs {
+  box-shadow: 0 0 2rem #f00, 0 0 3rem #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);
+}
+.disable-rfs .selector-25,
+.selector-25.disable-rfs {
+  --value: 3rem;
+}
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vw);
+}
+.disable-rfs .selector-27,
+.selector-27.disable-rfs {
+  margin: -3rem;
+}
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-4.css b/test/expected/test-4.css
index 4524004..538354a 100644
--- a/test/expected/test-4.css
+++ b/test/expected/test-4.css
@@ -1,50 +1,345 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .enable-responsive-font-size .selector-1, .selector-1.enable-responsive-font-size {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: 2rem;
+}
+.enable-rfs .selector-1,
+.selector-1.enable-rfs {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-1,
+  .selector-1.enable-rfs {
+    font-size: 2rem;
+  }
+}
 
 .selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .enable-responsive-font-size .selector-2, .selector-2.enable-responsive-font-size {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: 2rem;
+}
+.enable-rfs .selector-2,
+.selector-2.enable-rfs {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-2,
+  .selector-2.enable-rfs {
+    font-size: 2rem;
+  }
+}
 
 .selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 1200px) {
-    .enable-responsive-font-size .selector-3, .selector-3.enable-responsive-font-size {
-      font-size: calc(1.325rem + 0.9vw)  !important; } }
+  font-size: 2rem !important;
+}
+.enable-rfs .selector-3,
+.selector-3.enable-rfs {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-3,
+  .selector-3.enable-rfs {
+    font-size: 2rem !important;
+  }
+}
 
 .selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .enable-responsive-font-size .selector-4, .selector-4.enable-responsive-font-size {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: 2rem;
+}
+.enable-rfs .selector-4,
+.selector-4.enable-rfs {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-4,
+  .selector-4.enable-rfs {
+    font-size: 2rem;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 @supports (display: flex) {
   .selector-7 {
-    font-size: 1.75rem; }
-    @media (max-width: 1200px) {
-      .enable-responsive-font-size .selector-7, .selector-7.enable-responsive-font-size {
-        font-size: calc(1.3rem + 0.6vw) ; } } }
+    font-size: 1.75rem;
+  }
+  .enable-rfs .selector-7,
+  .selector-7.enable-rfs {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    .enable-rfs .selector-7,
+    .selector-7.enable-rfs {
+      font-size: 1.75rem;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .enable-responsive-font-size .selector-8, .selector-8.enable-responsive-font-size {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  flex: 0 999 32rem;
+}
+.enable-rfs .selector-8,
+.selector-8.enable-rfs {
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-8,
+  .selector-8.enable-rfs {
+    flex: 0 999 32rem;
+  }
+}
 
 .selector-9 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .enable-responsive-font-size .selector-9, .selector-9.enable-responsive-font-size {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  padding: 2rem;
+}
+.enable-rfs .selector-9,
+.selector-9.enable-rfs {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-9,
+  .selector-9.enable-rfs {
+    padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: 2rem;
+}
+.enable-rfs .selector-10,
+.selector-10.enable-rfs {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-10,
+  .selector-10.enable-rfs {
+    padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: 2rem;
+}
+.enable-rfs .selector-11,
+.selector-11.enable-rfs {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-11,
+  .selector-11.enable-rfs {
+    padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: 2rem;
+}
+.enable-rfs .selector-12,
+.selector-12.enable-rfs {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-12,
+  .selector-12.enable-rfs {
+    padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: 2rem;
+}
+.enable-rfs .selector-13,
+.selector-13.enable-rfs {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-13,
+  .selector-13.enable-rfs {
+    padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: 2rem;
+}
+.enable-rfs .selector-14,
+.selector-14.enable-rfs {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-14,
+  .selector-14.enable-rfs {
+    padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: 2rem;
+}
+.enable-rfs .selector-15,
+.selector-15.enable-rfs {
+  margin: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-15,
+  .selector-15.enable-rfs {
+    margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: 2rem;
+}
+.enable-rfs .selector-16,
+.selector-16.enable-rfs {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-16,
+  .selector-16.enable-rfs {
+    margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: 2rem;
+}
+.enable-rfs .selector-17,
+.selector-17.enable-rfs {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-17,
+  .selector-17.enable-rfs {
+    margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: 2rem;
+}
+.enable-rfs .selector-18,
+.selector-18.enable-rfs {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-18,
+  .selector-18.enable-rfs {
+    margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: 2rem;
+}
+.enable-rfs .selector-19,
+.selector-19.enable-rfs {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-19,
+  .selector-19.enable-rfs {
+    margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: 2rem 3rem;
+}
+.enable-rfs .selector-20,
+.selector-20.enable-rfs {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-20,
+  .selector-20.enable-rfs {
+    margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: 2rem 3rem !important;
+}
+.enable-rfs .selector-21,
+.selector-21.enable-rfs {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-21,
+  .selector-21.enable-rfs {
+    margin: 2rem 3rem !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 3rem;
+}
+.enable-rfs .selector-23,
+.selector-23.enable-rfs {
+  margin: 0 calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-23,
+  .selector-23.enable-rfs {
+    margin: 0 3rem;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+}
+.enable-rfs .selector-24,
+.selector-24.enable-rfs {
+  box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0;
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-24,
+  .selector-24.enable-rfs {
+    box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+  }
+}
+
+.selector-25 {
+  --value: 3rem;
+}
+.enable-rfs .selector-25,
+.selector-25.enable-rfs {
+  --value: calc(1.425rem + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-25,
+  .selector-25.enable-rfs {
+    --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: -3rem;
+}
+.enable-rfs .selector-27,
+.selector-27.enable-rfs {
+  margin: calc(-1.425rem - 2.1vw);
+}
+@media (min-width: 1200px) {
+  .enable-rfs .selector-27,
+  .selector-27.enable-rfs {
+    margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-5.css b/test/expected/test-5.css
index 57c0fc1..4a07847 100644
--- a/test/expected/test-5.css
+++ b/test/expected/test-5.css
@@ -1,50 +1,230 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 2rem; }
-  @media (max-width: 75em) {
-    .selector-1 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
 
 .selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 75em) {
-    .selector-2 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
 
 .selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 75em) {
-    .selector-3 {
-      font-size: calc(1.325rem + 0.9vw)  !important; } }
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+@media (min-width: 75em) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
 
 .selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 75em) {
-    .selector-4 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  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) ; } } }
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  @media (min-width: 75em) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 75em) {
-    .selector-8 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  flex: 0 999 calc(4.325rem + 36.9vw);
+}
+@media (min-width: 75em) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
 
 .selector-9 {
-  font-size: 2rem; }
-  @media (max-width: 75em) {
-    .selector-9 {
-      font-size: calc(1.325rem + 0.9vw) ; } }
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-9 {
+    padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 75em) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw);
+}
+@media (min-width: 75em) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important;
+}
+@media (min-width: 75em) {
+  .selector-21 {
+    margin: 2rem 3rem !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(1.425rem + 2.1vw);
+}
+@media (min-width: 75em) {
+  .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: 75em) {
+  .selector-24 {
+    box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(1.425rem + 2.1vw);
+}
+@media (min-width: 75em) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vw);
+}
+@media (min-width: 75em) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-6.css b/test/expected/test-6.css
index a3961f6..a6dd6fb 100644
--- a/test/expected/test-6.css
+++ b/test/expected/test-6.css
@@ -1,50 +1,231 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-1 {
-      font-size: calc(1.15625rem + 1.125vw) ; } }
+  font-size: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
 
 .selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-2 {
-      font-size: calc(1.15625rem + 1.125vw) ; } }
+  font-size: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
 
 .selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 1200px) {
-    .selector-3 {
-      font-size: calc(1.15625rem + 1.125vw)  !important; } }
+  font-size: calc(1.15625rem + 1.125vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
 
 .selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-4 {
-      font-size: calc(1.15625rem + 1.125vw) ; } }
+  font-size: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  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) ; } } }
+    font-size: calc(1.13125rem + 0.825vw);
+  }
+  @media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-8 {
-      font-size: calc(1.15625rem + 1.125vw) ; } }
+  flex: 0 999 calc(4.15625rem + 37.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
 
 .selector-9 {
-  font-size: 2rem; }
-  @media (max-width: 1200px) {
-    .selector-9 {
-      font-size: calc(1.15625rem + 1.125vw) ; } }
+  padding: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-9 {
+    padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(1.15625rem + 1.125vw);
+}
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: calc(1.15625rem + 1.125vw) calc(1.25625rem + 2.325vw);
+}
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: calc(1.15625rem + 1.125vw) calc(1.25625rem + 2.325vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-21 {
+    margin: 2rem 3rem !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(1.25625rem + 2.325vw);
+}
+@media (min-width: 1200px) {
+  .selector-23 {
+    margin: 0 3rem;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(1.15625rem + 1.125vw) #f00,
+    0 0 calc(1.25625rem + 2.325vw) #0f0;
+}
+@media (min-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(1.25625rem + 2.325vw);
+}
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: calc(-1.25625rem - 2.325vw);
+}
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-7.css b/test/expected/test-7.css
index 3b26cb8..194b0cf 100644
--- a/test/expected/test-7.css
+++ b/test/expected/test-7.css
@@ -1,50 +1,230 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-1 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  font-size: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 32px;
+  }
+}
 
 .selector-2 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-2 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  font-size: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 32px;
+  }
+}
 
 .selector-3 {
-  font-size: 32px !important; }
-  @media (max-width: 1200px) {
-    .selector-3 {
-      font-size: calc(21.2px + 0.9vw)  !important; } }
+  font-size: calc(21.2px + 0.9vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 32px !important;
+  }
+}
 
 .selector-4 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-4 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  font-size: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 32px;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 @supports (display: flex) {
   .selector-7 {
-    font-size: 28px; }
-    @media (max-width: 1200px) {
-      .selector-7 {
-        font-size: calc(20.8px + 0.6vw) ; } } }
+    font-size: calc(20.8px + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 28px;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-8 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  flex: 0 999 calc(69.2px + 36.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 512px;
+  }
+}
 
 .selector-9 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-9 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  padding: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-9 {
+    padding: 32px;
+  }
+}
+
+.selector-10 {
+  padding: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 32px;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 32px;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 32px;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 32px;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 32px;
+  }
+}
+
+.selector-15 {
+  margin: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 32px;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 32px;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 32px;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 32px;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 32px;
+  }
+}
+
+.selector-20 {
+  margin: calc(21.2px + 0.9vw) calc(22.8px + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 32px 48px;
+  }
+}
+
+.selector-21 {
+  margin: calc(21.2px + 0.9vw) calc(22.8px + 2.1vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-21 {
+    margin: 32px 48px !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(22.8px + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-23 {
+    margin: 0 48px;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(21.2px + 0.9vw) #f00, 0 0 calc(22.8px + 2.1vw) #0f0;
+}
+@media (min-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 32px #f00, 0 0 48px #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(22.8px + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 48px;
+  }
+}
+
+.selector-26 {
+  font-size: 10px;
+}
+
+.selector-27 {
+  margin: calc(-22.8px - 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -48px;
+  }
+}
+
+.selector-28 {
+  margin: -8px;
+}
diff --git a/test/expected/test-8.css b/test/expected/test-8.css
index 135044a..88ddfe2 100644
--- a/test/expected/test-8.css
+++ b/test/expected/test-8.css
@@ -1,50 +1,231 @@
 .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) ; } }
+  font-size: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-1 {
+    font-size: 2rem;
+  }
+}
 
 .selector-2 {
-  font-size: 2rem; }
-  @media (max-width: 1200px), (max-height: 1200px) {
-    .selector-2 {
-      font-size: calc(1.325rem + 0.9vmin) ; } }
+  font-size: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-2 {
+    font-size: 2rem;
+  }
+}
 
 .selector-3 {
-  font-size: 2rem !important; }
-  @media (max-width: 1200px), (max-height: 1200px) {
-    .selector-3 {
-      font-size: calc(1.325rem + 0.9vmin)  !important; } }
+  font-size: calc(1.325rem + 0.9vmin) !important;
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-3 {
+    font-size: 2rem !important;
+  }
+}
 
 .selector-4 {
-  font-size: 2rem; }
-  @media (max-width: 1200px), (max-height: 1200px) {
-    .selector-4 {
-      font-size: calc(1.325rem + 0.9vmin) ; } }
+  font-size: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-4 {
+    font-size: 2rem;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  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) ; } } }
+    font-size: calc(1.3rem + 0.6vmin);
+  }
+  @media (min-width: 1200px), (min-height: 1200px) {
+    .selector-7 {
+      font-size: 1.75rem;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 2rem; }
-  @media (max-width: 1200px), (max-height: 1200px) {
-    .selector-8 {
-      font-size: calc(1.325rem + 0.9vmin) ; } }
+  flex: 0 999 calc(4.325rem + 36.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-8 {
+    flex: 0 999 32rem;
+  }
+}
 
 .selector-9 {
-  font-size: 2rem; }
-  @media (max-width: 1200px), (max-height: 1200px) {
-    .selector-9 {
-      font-size: calc(1.325rem + 0.9vmin) ; } }
+  padding: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-9 {
+    padding: 2rem;
+  }
+}
+
+.selector-10 {
+  padding: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-10 {
+    padding: 2rem;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-11 {
+    padding-top: 2rem;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-12 {
+    padding-right: 2rem;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-13 {
+    padding-bottom: 2rem;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-14 {
+    padding-left: 2rem;
+  }
+}
+
+.selector-15 {
+  margin: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-15 {
+    margin: 2rem;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-16 {
+    margin-top: 2rem;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-17 {
+    margin-right: 2rem;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-18 {
+    margin-bottom: 2rem;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(1.325rem + 0.9vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-19 {
+    margin-left: 2rem;
+  }
+}
+
+.selector-20 {
+  margin: calc(1.325rem + 0.9vmin) calc(1.425rem + 2.1vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-20 {
+    margin: 2rem 3rem;
+  }
+}
+
+.selector-21 {
+  margin: calc(1.325rem + 0.9vmin) calc(1.425rem + 2.1vmin) !important;
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-21 {
+    margin: 2rem 3rem !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(1.425rem + 2.1vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-23 {
+    margin: 0 3rem;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(1.325rem + 0.9vmin) #f00,
+    0 0 calc(1.425rem + 2.1vmin) #0f0;
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(1.425rem + 2.1vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-25 {
+    --value: 3rem;
+  }
+}
+
+.selector-26 {
+  font-size: 0.625rem;
+}
+
+.selector-27 {
+  margin: calc(-1.425rem - 2.1vmin);
+}
+@media (min-width: 1200px), (min-height: 1200px) {
+  .selector-27 {
+    margin: -3rem;
+  }
+}
+
+.selector-28 {
+  margin: -0.5rem;
+}
diff --git a/test/expected/test-9.css b/test/expected/test-9.css
index 44c81dc..9998292 100644
--- a/test/expected/test-9.css
+++ b/test/expected/test-9.css
@@ -1,57 +1,253 @@
 .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; } }
+  font-size: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-1 {
+    font-size: 32px;
+  }
+}
 
 .selector-2 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-2 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  font-size: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-2 {
+    font-size: 32px;
+  }
+}
 
 .selector-3 {
-  font-size: 32px !important; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-3 {
-      font-size: calc(16px + 2vmin)  !important;
-      min-width: 0vw; } }
+  font-size: calc(16px + 2vmin) !important;
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-3 {
+    font-size: 32px !important;
+  }
+}
 
 .selector-4 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-4 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  font-size: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-4 {
+    font-size: 32px;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  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; } } }
+    font-size: calc(15.2px + 1.6vmin);
+    min-width: 0vw;
+  }
+  @media (min-width: 50rem), (min-height: 50rem) {
+    .selector-7 {
+      font-size: 28px;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-8 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  flex: 0 999 calc(112px + 50vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-8 {
+    flex: 0 999 512px;
+  }
+}
 
 .selector-9 {
-  font-size: 32px; }
-  @media (max-width: 50rem), (max-height: 50rem) {
-    .selector-9 {
-      font-size: calc(16px + 2vmin) ;
-      min-width: 0vw; } }
+  padding: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-9 {
+    padding: 32px;
+  }
+}
+
+.selector-10 {
+  padding: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-10 {
+    padding: 32px;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-11 {
+    padding-top: 32px;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-12 {
+    padding-right: 32px;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-13 {
+    padding-bottom: 32px;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-14 {
+    padding-left: 32px;
+  }
+}
+
+.selector-15 {
+  margin: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-15 {
+    margin: 32px;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-16 {
+    margin-top: 32px;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-17 {
+    margin-right: 32px;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-18 {
+    margin-bottom: 32px;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(16px + 2vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-19 {
+    margin-left: 32px;
+  }
+}
+
+.selector-20 {
+  margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-20 {
+    margin: 32px 48px;
+  }
+}
+
+.selector-21 {
+  margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important;
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-21 {
+    margin: 32px 48px !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(19.2px + 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-23 {
+    margin: 0 48px;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0;
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-24 {
+    box-shadow: 0 0 32px #f00, 0 0 48px #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(19.2px + 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-25 {
+    --value: 48px;
+  }
+}
+
+.selector-26 {
+  font-size: 10px;
+}
+
+.selector-27 {
+  margin: calc(-19.2px - 3.6vmin);
+  min-width: 0vw;
+}
+@media (min-width: 50rem), (min-height: 50rem) {
+  .selector-27 {
+    margin: -48px;
+  }
+}
+
+.selector-28 {
+  margin: -8px;
+}
diff --git a/test/less/main.less b/test/less/main.less
index 3302d8d..02fc492 100644
--- a/test/less/main.less
+++ b/test/less/main.less
@@ -4,17 +4,17 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  .responsive-font-size(32px);
+  .font-size(32px);
 }
 
 // responsive-font-size property with `rem` unit
 .selector-2 {
-  .responsive-font-size(2rem);
+  .font-size(2rem);
 }
 
 // responsive-font-size property with !important
 .selector-3 {
-  .responsive-font-size(2rem, true);
+  .font-size(2rem important);
 }
 
 // rfs shorthand
@@ -24,12 +24,12 @@
 
 // not supported unit
 .selector-5 {
-  .responsive-font-size(2em);
+  .font-size(2em);
 }
 
 // special value
 .selector-6 {
-  .responsive-font-size(inherit);
+  .font-size(inherit);
 }
 
 // responsive-font-size property inside @support-query
@@ -41,10 +41,93 @@
 
 // responsive-font-size property without unit
 .selector-8 {
-  .responsive-font-size(32);
+  .rfs(0 999 32rem, flex);
 }
 
-// font-size shorthand
+// padding property
 .selector-9 {
-  .font-size(2rem);
+  .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/test/less/test-10.less b/test/less/test-10.less
index d05bf48..991fc33 100644
--- a/test/less/test-10.less
+++ b/test/less/test-10.less
@@ -1,7 +1,7 @@
 @import "../../less";
 @import "main";
-@rfs-base-font-size: 12px;
-@rfs-font-size-unit: px;
+@rfs-base-value: 12px;
+@rfs-unit: px;
 @rfs-breakpoint: 800;
 @rfs-breakpoint-unit: rem;
 @rfs-two-dimensional: true;
diff --git a/test/less/test-11.less b/test/less/test-11.less
new file mode 100644
index 0000000..137bfbf
--- /dev/null
+++ b/test/less/test-11.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-mode: "max-media-query";
diff --git a/test/less/test-2.less b/test/less/test-2.less
index ce73abf..4c440ab 100644
--- a/test/less/test-2.less
+++ b/test/less/test-2.less
@@ -1,2 +1,2 @@
 @import "main";
-@enable-responsive-font-sizes: false;
+@enable-rfs: false;
diff --git a/test/less/test-6.less b/test/less/test-6.less
index 93fe09e..6aafade 100644
--- a/test/less/test-6.less
+++ b/test/less/test-6.less
@@ -1,2 +1,2 @@
 @import "main";
-@rfs-base-font-size: 17px;
+@rfs-base-value: 17px;
diff --git a/test/less/test-7.less b/test/less/test-7.less
index 0d712c8..8ea8d7d 100644
--- a/test/less/test-7.less
+++ b/test/less/test-7.less
@@ -1,2 +1,2 @@
 @import "main";
-@rfs-font-size-unit: px;
+@rfs-unit: px;
diff --git a/test/less/test-9.less b/test/less/test-9.less
index e8d7c36..bd2e356 100644
--- a/test/less/test-9.less
+++ b/test/less/test-9.less
@@ -1,6 +1,6 @@
 @import "main";
-@rfs-base-font-size: 12px;
-@rfs-font-size-unit: px;
+@rfs-base-value: 12px;
+@rfs-unit: px;
 @rfs-breakpoint: 800;
 @rfs-breakpoint-unit: rem;
 @rfs-two-dimensional: true;
diff --git a/test/postcss/main.css b/test/postcss/main.css
index 1540a3b..2a1db4a 100644
--- a/test/postcss/main.css
+++ b/test/postcss/main.css
@@ -1,39 +1,115 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  responsive-font-size: 32px;
+  font-size: rfs(32px);
 }
 
 .selector-2 {
-  responsive-font-size: 2rem;
+  font-size: rfs(2rem);
 }
 
 .selector-3 {
-  responsive-font-size: 2rem !important;
+  font-size: rfs(2rem) !important;
 }
 
 .selector-4 {
-  rfs: 2rem;
+  font-size: rfs(2rem);
 }
 
 .selector-5 {
-  responsive-font-size: 2em;
+  font-size: rfs(2em);
 }
 
 .selector-6 {
-  responsive-font-size: inherit;
+  font-size: rfs(inherit);
 }
 
 @supports (display: flex) {
   .selector-7 {
-    rfs: 28px;
+    font-size: rfs(28px);
   }
 }
 
 .selector-8 {
-  responsive-font-size: 32;
+  flex: rfs(0 999 32rem);
 }
 
 .selector-9 {
-  responsive-font-size: 2rem;
+  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/test/postcss/tests.js b/test/postcss/tests.js
index b5f03d6..304e747 100644
--- a/test/postcss/tests.js
+++ b/test/postcss/tests.js
@@ -3,7 +3,7 @@
 module.exports = {
   'test-1': {},
   'test-2': {
-    enableResponsiveFontSizes: false
+    enableRfs: false
   },
   'test-3': {
     class: 'disable'
@@ -15,17 +15,17 @@ module.exports = {
     breakpointUnit: 'em'
   },
   'test-6': {
-    baseFontSize: '17px'
+    baseValue: '17px'
   },
   'test-7': {
-    fontSizeUnit: 'px'
+    unit: 'px'
   },
   'test-8': {
     twoDimensional: true
   },
   'test-9': {
-    baseFontSize: '12px',
-    fontSizeUnit: 'px',
+    baseValue: '12px',
+    unit: 'px',
     breakpoint: 800,
     breakpointUnit: 'rem',
     twoDimensional: true,
@@ -34,13 +34,16 @@ module.exports = {
     safariIframeResizeBugFix: true
   },
   'test-10': { // Not testable
-    baseFontSize: '12px',
-    fontSizeUnit: 'px',
+    baseValue: '12px',
+    unit: 'px',
     breakpoint: 800,
     breakpointUnit: 'rem',
     twoDimensional: true,
     factor: 5,
     class: true,
     safariIframeResizeBugFix: true
+  },
+  'test-11': {
+    mode: 'max-media-query'
   }
 };
diff --git a/test/sass/_main.scss b/test/sass/_main.scss
new file mode 100644
index 0000000..9a1a8e3
--- /dev/null
+++ b/test/sass/_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/test/sass/main.scss b/test/sass/main.scss
deleted file mode 100644
index c92eef6..0000000
--- a/test/sass/main.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../../scss";
-
-// responsive-font-size property with `px` unit
-.selector-1 {
-  background-color: #f00;
-  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);
-  }
-}
-
-// responsive-font-size property without unit
-.selector-8 {
-  @include responsive-font-size(32);
-}
-
-// font-size shorthand
-.selector-9 {
-  @include font-size(2rem);
-}
diff --git a/test/sass/test-10.scss b/test/sass/test-10.scss
index 378e100..4b54c16 100644
--- a/test/sass/test-10.scss
+++ b/test/sass/test-10.scss
@@ -1,5 +1,5 @@
-$rfs-base-font-size: 12px;
-$rfs-font-size-unit: px;
+$rfs-base-value: 12px;
+$rfs-unit: px;
 $rfs-breakpoint: 800;
 $rfs-breakpoint-unit: rem;
 $rfs-two-dimensional: true;
diff --git a/test/sass/test-11.scss b/test/sass/test-11.scss
new file mode 100644
index 0000000..22a4804
--- /dev/null
+++ b/test/sass/test-11.scss
@@ -0,0 +1,2 @@
+$rfs-mode: max-media-query;
+@import "main";
diff --git a/test/sass/test-2.scss b/test/sass/test-2.scss
index 9c8f267..c3420ea 100644
--- a/test/sass/test-2.scss
+++ b/test/sass/test-2.scss
@@ -1,2 +1,2 @@
-$enable-responsive-font-sizes: false;
+$enable-rfs: false;
 @import "main";
diff --git a/test/sass/test-6.scss b/test/sass/test-6.scss
index 926213e..4a250bf 100644
--- a/test/sass/test-6.scss
+++ b/test/sass/test-6.scss
@@ -1,2 +1,2 @@
-$rfs-base-font-size: 17px;
+$rfs-base-value: 17px;
 @import "main";
diff --git a/test/sass/test-7.scss b/test/sass/test-7.scss
index ceace3a..67d1404 100644
--- a/test/sass/test-7.scss
+++ b/test/sass/test-7.scss
@@ -1,2 +1,2 @@
-$rfs-font-size-unit: px;
+$rfs-unit: px;
 @import "main";
diff --git a/test/sass/test-9.scss b/test/sass/test-9.scss
index 84f6f73..7d9a4c1 100644
--- a/test/sass/test-9.scss
+++ b/test/sass/test-9.scss
@@ -1,5 +1,5 @@
-$rfs-base-font-size: 12px;
-$rfs-font-size-unit: px;
+$rfs-base-value: 12px;
+$rfs-unit: px;
 $rfs-breakpoint: 800;
 $rfs-breakpoint-unit: rem;
 $rfs-two-dimensional: true;
diff --git a/test/stylus/main.styl b/test/stylus/main.styl
index 644bd9a..22f2f17 100644
--- a/test/stylus/main.styl
+++ b/test/stylus/main.styl
@@ -3,29 +3,86 @@
 .selector-1
   background-color: #f00
   width: 300px
-  responsive-font-size(32px)
+  rfs(32px)
 
 .selector-2
-  responsive-font-size(2rem)
+  rfs(2rem)
 
 .selector-3
-  responsive-font-size(2rem, true)
+  rfs(2rem !important)
 
 .selector-4
   rfs(2rem)
 
 .selector-5
-  responsive-font-size(2em)
+  rfs(2em)
 
 .selector-6
-  responsive-font-size(inherit)
+  rfs(inherit)
 
 @supports (display: flex)
   .selector-7
     rfs(28px)
 
 .selector-8
-  responsive-font-size(32)
+  rfs(0 999 32rem, flex)
 
 .selector-9
-  responsive-font-size(2rem)
+  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)
diff --git a/test/stylus/test-10.styl b/test/stylus/test-10.styl
index 695140f..1797f01 100644
--- a/test/stylus/test-10.styl
+++ b/test/stylus/test-10.styl
@@ -1,5 +1,5 @@
-$rfs-base-font-size = 12px
-$rfs-font-size-unit = px
+$rfs-base-value = 12px
+$rfs-unit = px
 $rfs-breakpoint = 800
 $rfs-breakpoint-unit = rem
 $rfs-two-dimensional = true
diff --git a/test/stylus/test-11.styl b/test/stylus/test-11.styl
new file mode 100644
index 0000000..03c0fd2
--- /dev/null
+++ b/test/stylus/test-11.styl
@@ -0,0 +1,2 @@
+$rfs-mode = "max-media-query"
+@import "main"
diff --git a/test/stylus/test-2.styl b/test/stylus/test-2.styl
index 1ecdedc..3fba4fe 100644
--- a/test/stylus/test-2.styl
+++ b/test/stylus/test-2.styl
@@ -1,2 +1,2 @@
-$enable-responsive-font-sizes = false
+$enable-rfs = false
 @import "main";
diff --git a/test/stylus/test-6.styl b/test/stylus/test-6.styl
index f3df4b1..476d8d5 100644
--- a/test/stylus/test-6.styl
+++ b/test/stylus/test-6.styl
@@ -1,2 +1,2 @@
-$rfs-base-font-size = 17px
+$rfs-base-value = 17px
 @import "main";
diff --git a/test/stylus/test-7.styl b/test/stylus/test-7.styl
index fce5ecd..070bad8 100644
--- a/test/stylus/test-7.styl
+++ b/test/stylus/test-7.styl
@@ -1,2 +1,2 @@
-$rfs-font-size-unit = px
+$rfs-unit = px
 @import "main";
diff --git a/test/stylus/test-9.styl b/test/stylus/test-9.styl
index a860640..e37acb9 100644
--- a/test/stylus/test-9.styl
+++ b/test/stylus/test-9.styl
@@ -1,5 +1,5 @@
-$rfs-base-font-size = 12px
-$rfs-font-size-unit = px
+$rfs-base-value = 12px
+$rfs-unit = px
 $rfs-breakpoint = 800
 $rfs-breakpoint-unit = rem
 $rfs-two-dimensional = true
diff --git a/test/tests.json b/test/tests.json
index f61f030..726ebd1 100644
--- a/test/tests.json
+++ b/test/tests.json
@@ -38,5 +38,9 @@
   {
     "id": "test-10",
     "name": "Include mixins multiple times"
+  },
+  {
+    "id": "test-11",
+    "name": "Use max-media-query mode"
   }
 ]