From 41c61c9f1fbb4d4a1b4fdb6d9473d253d2f9ad48 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 11 May 2019 17:36:24 +0800
Subject: [PATCH 01/11] Add CSS module version

---
 modularscale.module.css | 533 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 533 insertions(+)
 create mode 100644 modularscale.module.css

diff --git a/modularscale.module.css b/modularscale.module.css
new file mode 100644
index 0000000..6ae329d
--- /dev/null
+++ b/modularscale.module.css
@@ -0,0 +1,533 @@
+@custom-media --ms-viewport-md (width > 480px);
+@custom-media --ms-viewport-lg (width > 768px);
+
+:root {
+  --ms-ratio-sm: 1.15;
+  --ms-ratio-md: 1.17;
+  --ms-ratio-lg: 1.2;
+  --ms-base: 1rem;
+  --ms-base-sm: var(--ms-base);
+  --ms-base-md: var(--ms-base-sm);
+  --ms-base-lg: var(--ms-base-md);
+}
+
+.fontSizeMinus1 {
+  font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg));
+  }
+}
+
+.fontSize0 {
+  font-size: var(--ms-base-sm);
+  @media (--ms-viewport-md) {
+    font-size: var(--ms-base-md);
+  }
+  @media (--ms-viewport-lg) {
+    font-size: var(--ms-base-lg);
+  }
+}
+
+.fontSize1 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg));
+  }
+}
+
+.fontSize2 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize3 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize4 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize5 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize6 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize7 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize8 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize9 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize10 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize11 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize12 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize13 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize14 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize15 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize16 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize17 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize18 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize19 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.fontSize20 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}

From d2391e1f2e3a8fad36153510c47fc684830a0a53 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 11 May 2019 17:52:11 +0800
Subject: [PATCH 02/11] Document use as a CSS module

---
 README.md               | 102 ++++++++++++++++++++++++++++++++++------
 defaults.css            |  13 +++++
 modularscale.module.css |  13 -----
 3 files changed, 101 insertions(+), 27 deletions(-)
 create mode 100644 defaults.css

diff --git a/README.md b/README.md
index 6f2ca52..1da7bc0 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@ This implements a basic [Modular Scale](http://www.modularscale.com/) system usi
 
 [postcss-cssnext]: https://www.npmjs.com/package/postcss-cssnext
 [postcss-import]: https://www.npmjs.com/package/postcss-import
+[postcss-custom-media]: https://yarnpkg.com/en/package/postcss-custom-media
+[postcss-variables]: https://yarnpkg.com/en/package/postcss-variables
+[postcss-preset-env]: https://github.com/csstools/postcss-preset-env
 
 ## Installation
 
@@ -19,10 +22,70 @@ npm install --save --save-exact responsive-modular-scale.css
 
 ## Usage
 
-Simply import it, assuming you're using [postcss-import] and [postcss-cssnext].
+`responsive-modular-scale.css` comes in 2 flavors:
+
+- **CSS property sets**, which you can use via `@apply --font-size-2` and [postcss-apply]
+- **CSS modules**, which you can use via `composes: fontSize2 from 'responsive-modular-scale.css/modularscale.module.css'`
+
+[postcss-apply]: https://yarnpkg.com/en/package/postcss-apply
+
+See instructions below.
+
+## Usage as CSS module
+
+(:warning: Experimental) Use with [postcss-preset-env] + [postcss-import].
+
+1. Set up a `variables.css` with your configuration. I recommend placing this wherever you put your common variables (eg, color palettes and font names).
+
+   ```css
+   @import 'responsive-modular-scale.css/defaults.css';
+  
+   :root {
+     --ms-ratio-sm: 1.15;
+     --ms-ratio-md: 1.17;
+     --ms-ratio-lg: 1.2;
+     --ms-base: 1rem;
+     --ms-base-sm: var(--ms-base);
+     --ms-base-md: var(--ms-base-sm);
+     --ms-base-lg: var(--ms-base-md);
+   }
+  
+   @custom-media --ms-viewport-md (width > 480px);
+   @custom-media --ms-viewport-lg (width > 768px);
+   ```
+
+2. In the modules you want to use it, just import the `variables.css`, then use `compose`.
+
+   ```css
+   @import '../variables.css';
+
+   .myButton {
+     composes: fontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
+   }
+   ```
+
+These CSS classes are available:
+
+- `fontSizeMinus1` (negative 1)
+- `fontSize0` (applies the base font size)
+- `fontSize1`
+- `fontSize2`
+- ...
+- `fontSize20`
+
+## Usage as property set
+
+You will need a few PostCSS plugins. Some of them come with [postcss-preset-env][postcss-preset-env] (highly recommended), but you may need to add others.
+
+| Dependency                                      | Comes with [postcss-cssnext]? | Comes with [postcss-preset-env]? |
+| ----------------------------------------------- | ----------------------------- | -------------------------------- |
+| [postcss-import] to import CSS files            | -                             | -                                |
+| [postcss-apply] for property sets               | :+1:                          | -                                |
+| [postcss-custom-media] for custom media queries | :+1:                          | :+1:                             |
+| [postcss-variables] for CSS variables           | :+1:                          | :+1:                             |
 
 ```css
-@import 'responsive-modular-scale.css';
+@import "responsive-modular-scale.css";
 ```
 
 To use it, use any of the provided `--font-size-#` custom property sets:
@@ -35,26 +98,37 @@ div {
 
 This applies a `font-size: 2.0736rem` declaration for desktops—the default ratio is 1.2, so that's `1rem * 1.2 ^ 4`. For mobiles and tablets, it will use a different ratio (1.15 and 1.17 by default).
 
+<details>
+<summary>Sample output</summary>
+
 ```css
-div { font-size: 1.74901rem; }
+div {
+  font-size: 1.74901rem;
+}
 
 @media (min-width: 481px) {
-  div { font-size: 1.87389rem; }
+  div {
+    font-size: 1.87389rem;
+  }
 }
 
 @media (min-width: 769px) {
-  div { font-size: 2.0736rem; }
+  div {
+    font-size: 2.0736rem;
+  }
 }
 ```
 
-It gives you the following custom property sets:
+</details>
 
- - `@apply --font-size--1` (negative 1)
- - `@apply --font-size-0` (applies to base font size)
- - `@apply --font-size-1`
- - `@apply --font-size-2`
- - ... `@apply --font-size-20`
+It gives you the following custom property sets:
 
+- `@apply --font-size--1` (negative 1)
+- `@apply --font-size-0` (applies the base font size)
+- `@apply --font-size-1`
+- `@apply --font-size-2`
+- ...
+- `@apply --font-size-20`
 
 ## Configuration
 
@@ -62,7 +136,7 @@ It's recommended you include this in a "common" file included in most of your pr
 
 ```css
 /* variables.css */
-@import 'responsive-modular-scale.css';
+@import "responsive-modular-scale.css";
 
 :root {
   --ms-ratio-sm: 1.15;
@@ -80,7 +154,7 @@ It's recommended you include this in a "common" file included in most of your pr
 
 ```css
 /* your-other-styles.css */
-@import './variables.css';
+@import "./variables.css";
 
 body {
   @apply --font-size-0;
@@ -112,5 +186,5 @@ Authored and maintained by Rico Sta. Cruz with help from contributors ([list][co
 > GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
 > Twitter [@rstacruz](https://twitter.com/rstacruz)
 
-[MIT]: LICENSE.md
+[mit]: LICENSE.md
 [contributors]: http://github.com/rstacruz/responsive-modular-scale.css/contributors
diff --git a/defaults.css b/defaults.css
new file mode 100644
index 0000000..3fed24f
--- /dev/null
+++ b/defaults.css
@@ -0,0 +1,13 @@
+@custom-media --ms-viewport-md (width > 480px);
+@custom-media --ms-viewport-lg (width > 768px);
+
+:root {
+  --ms-ratio-sm: 1.15;
+  --ms-ratio-md: 1.17;
+  --ms-ratio-lg: 1.2;
+  --ms-base: 1rem;
+  --ms-base-sm: var(--ms-base);
+  --ms-base-md: var(--ms-base-sm);
+  --ms-base-lg: var(--ms-base-md);
+}
+
diff --git a/modularscale.module.css b/modularscale.module.css
index 6ae329d..a74e81b 100644
--- a/modularscale.module.css
+++ b/modularscale.module.css
@@ -1,16 +1,3 @@
-@custom-media --ms-viewport-md (width > 480px);
-@custom-media --ms-viewport-lg (width > 768px);
-
-:root {
-  --ms-ratio-sm: 1.15;
-  --ms-ratio-md: 1.17;
-  --ms-ratio-lg: 1.2;
-  --ms-base: 1rem;
-  --ms-base-sm: var(--ms-base);
-  --ms-base-md: var(--ms-base-sm);
-  --ms-base-lg: var(--ms-base-md);
-}
-
 .fontSizeMinus1 {
   font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
   @media (--ms-viewport-md) {

From 617a64acf23f271bde24b683cf3ffe28c86e7d7a Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 11 May 2019 17:59:43 +0800
Subject: [PATCH 03/11] Update documentation for readability

---
 README.md | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 1da7bc0..3dc3c0a 100644
--- a/README.md
+++ b/README.md
@@ -24,8 +24,8 @@ npm install --save --save-exact responsive-modular-scale.css
 
 `responsive-modular-scale.css` comes in 2 flavors:
 
-- **CSS property sets**, which you can use via `@apply --font-size-2` and [postcss-apply]
-- **CSS modules**, which you can use via `composes: fontSize2 from 'responsive-modular-scale.css/modularscale.module.css'`
+- **CSS property sets**, which you can use via `@apply --font-size-2` via [postcss-apply].
+- **CSS modules**, which you can use via `composes: fontSize2`.
 
 [postcss-apply]: https://yarnpkg.com/en/package/postcss-apply
 
@@ -33,9 +33,9 @@ See instructions below.
 
 ## Usage as CSS module
 
-(:warning: Experimental) Use with [postcss-preset-env] + [postcss-import].
+You can apply modular scale font sizes using CSS modules. For this, it's recommended to use [postcss-preset-env] along with [postcss-import]. (:warning: Experimental!)
 
-1. Set up a `variables.css` with your configuration. I recommend placing this wherever you put your common variables (eg, color palettes and font names).
+1. **Configure it** &mdash; Set up a `variables.css` with your configuration. I recommend placing this wherever you put your common variables (eg, color palettes and font names).
 
    ```css
    @import 'responsive-modular-scale.css/defaults.css';
@@ -54,7 +54,7 @@ See instructions below.
    @custom-media --ms-viewport-lg (width > 768px);
    ```
 
-2. In the modules you want to use it, just import the `variables.css`, then use `compose`.
+2. **Compose it in** &mdash; In the modules you want to use it, just import the `variables.css`, then use `composes`.
 
    ```css
    @import '../variables.css';
@@ -73,9 +73,14 @@ These CSS classes are available:
 - ...
 - `fontSize20`
 
+Learn more about the `composes:` property from the [CSS modules documentation]( https://github.com/css-modules/css-modules#composition).
+
 ## Usage as property set
 
-You will need a few PostCSS plugins. Some of them come with [postcss-preset-env][postcss-preset-env] (highly recommended), but you may need to add others.
+You can also apply modular scale font sizes using CSS property sets (aka, `@apply`). You will need a few PostCSS plugins. I recommend using [postcss-preset-env][postcss-preset-env] along with [postcss-import] and [postcss-apply].
+
+<details>
+<summary><em>View plugins needed</em></summary>
 
 | Dependency                                      | Comes with [postcss-cssnext]? | Comes with [postcss-preset-env]? |
 | ----------------------------------------------- | ----------------------------- | -------------------------------- |
@@ -84,8 +89,10 @@ You will need a few PostCSS plugins. Some of them come with [postcss-preset-env]
 | [postcss-custom-media] for custom media queries | :+1:                          | :+1:                             |
 | [postcss-variables] for CSS variables           | :+1:                          | :+1:                             |
 
+</details>
+
 ```css
-@import "responsive-modular-scale.css";
+@import 'responsive-modular-scale.css';
 ```
 
 To use it, use any of the provided `--font-size-#` custom property sets:
@@ -99,7 +106,7 @@ div {
 This applies a `font-size: 2.0736rem` declaration for desktops—the default ratio is 1.2, so that's `1rem * 1.2 ^ 4`. For mobiles and tablets, it will use a different ratio (1.15 and 1.17 by default).
 
 <details>
-<summary>Sample output</summary>
+<summary><em>View sample output</em></summary>
 
 ```css
 div {

From 891f832203084645240ee6c210dec3664cd8d67c Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 11 May 2019 18:19:18 +0800
Subject: [PATCH 04/11] Link to the correct PostCSS plugin for variables

---
 README.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 3dc3c0a..f0a60b0 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ This implements a basic [Modular Scale](http://www.modularscale.com/) system usi
 [postcss-cssnext]: https://www.npmjs.com/package/postcss-cssnext
 [postcss-import]: https://www.npmjs.com/package/postcss-import
 [postcss-custom-media]: https://yarnpkg.com/en/package/postcss-custom-media
-[postcss-variables]: https://yarnpkg.com/en/package/postcss-variables
+[postcss-custom-properties]: https://yarnpkg.com/en/package/postcss-custom-properties
 [postcss-preset-env]: https://github.com/csstools/postcss-preset-env
 
 ## Installation
@@ -38,8 +38,8 @@ You can apply modular scale font sizes using CSS modules. For this, it's recomme
 1. **Configure it** &mdash; Set up a `variables.css` with your configuration. I recommend placing this wherever you put your common variables (eg, color palettes and font names).
 
    ```css
-   @import 'responsive-modular-scale.css/defaults.css';
-  
+   @import "responsive-modular-scale.css/defaults.css";
+
    :root {
      --ms-ratio-sm: 1.15;
      --ms-ratio-md: 1.17;
@@ -49,7 +49,7 @@ You can apply modular scale font sizes using CSS modules. For this, it's recomme
      --ms-base-md: var(--ms-base-sm);
      --ms-base-lg: var(--ms-base-md);
    }
-  
+
    @custom-media --ms-viewport-md (width > 480px);
    @custom-media --ms-viewport-lg (width > 768px);
    ```
@@ -57,10 +57,10 @@ You can apply modular scale font sizes using CSS modules. For this, it's recomme
 2. **Compose it in** &mdash; In the modules you want to use it, just import the `variables.css`, then use `composes`.
 
    ```css
-   @import '../variables.css';
+   @import "../variables.css";
 
    .myButton {
-     composes: fontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
+     composes: fontSize2 from "responsive-modular-scale.css/modularscale.module.css";
    }
    ```
 
@@ -73,7 +73,7 @@ These CSS classes are available:
 - ...
 - `fontSize20`
 
-Learn more about the `composes:` property from the [CSS modules documentation]( https://github.com/css-modules/css-modules#composition).
+Learn more about the `composes:` property from the [CSS modules documentation](https://github.com/css-modules/css-modules#composition).
 
 ## Usage as property set
 
@@ -87,12 +87,12 @@ You can also apply modular scale font sizes using CSS property sets (aka, `@appl
 | [postcss-import] to import CSS files            | -                             | -                                |
 | [postcss-apply] for property sets               | :+1:                          | -                                |
 | [postcss-custom-media] for custom media queries | :+1:                          | :+1:                             |
-| [postcss-variables] for CSS variables           | :+1:                          | :+1:                             |
+| [postcss-custom-properties] for CSS variables   | :+1:                          | :+1:                             |
 
 </details>
 
 ```css
-@import 'responsive-modular-scale.css';
+@import "responsive-modular-scale.css";
 ```
 
 To use it, use any of the provided `--font-size-#` custom property sets:

From 7bfbdea8d8e76dc32b950c6b396edde8d5219cbb Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 11 May 2019 22:46:46 +0800
Subject: [PATCH 05/11] Implement simple test script

---
 .gitignore             |  4 +++-
 package.json           | 10 ++++++++--
 postcss.config.js      | 12 ++++++++++++
 test/fixtures/test.css |  5 +++++
 test/test.sh           | 31 +++++++++++++++++++++++++++++++
 5 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 test/fixtures/test.css
 create mode 100644 test/test.sh

diff --git a/.gitignore b/.gitignore
index 6416b62..ad6c8e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 node_modules
 
-# Don't commit this for libraries :)
+# Don't commit these for libraries :)
 yarn.lock
 package-lock.json
+
+/test/output
diff --git a/package.json b/package.json
index 1f28fd4..9603ef7 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   "main": "responsive-modular-scale.css",
   "style": "responsive-modular-scale.css",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "bash test/test.sh"
   },
   "repository": {
     "type": "git",
@@ -22,5 +22,11 @@
   "bugs": {
     "url": "https://github.com/rstacruz/responsive-modular-scale.css/issues"
   },
-  "homepage": "https://github.com/rstacruz/responsive-modular-scale.css#readme"
+  "homepage": "https://github.com/rstacruz/responsive-modular-scale.css#readme",
+  "devDependencies": {
+    "postcss-apply": "^0.12.0",
+    "postcss-cli": "^6.1.2",
+    "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.6.0"
+  }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..3cd534d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import')(),
+    require('postcss-apply')(),
+    require('postcss-preset-env')({
+      stage: 0,
+
+      // Don't preserve CSS variables
+      preserve: false
+    })
+  ]
+}
diff --git a/test/fixtures/test.css b/test/fixtures/test.css
new file mode 100644
index 0000000..4c0b9ab
--- /dev/null
+++ b/test/fixtures/test.css
@@ -0,0 +1,5 @@
+@import '../../responsive-modular-scale.css';
+
+#one {
+  @apply --font-size-1;
+}
diff --git a/test/test.sh b/test/test.sh
new file mode 100644
index 0000000..ee1f1e0
--- /dev/null
+++ b/test/test.sh
@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+set -eou pipefail
+
+_grep () {
+	local needle="$1"
+	local haystack="$2"
+	if grep -F "$needle" "$haystack" >/dev/null; then
+		printf "  ✓ [%20s] %s\n" "$haystack" "$needle"
+	else
+		printf "  ✗ [%20s] %s\n" "$haystack" "$needle"
+		exit 1
+	fi
+}
+
+(
+	echo ""
+	echo -e "\033[34mCompiling test fixtures using PostCSS:\033[0m"
+	./node_modules/.bin/postcss test/fixtures --dir test/output
+	echo "  ✓ ok"
+
+	echo ""
+	echo -e "\033[34mChecking output:\033[0m"
+	_grep "font-size: calc(1rem * 1.17);" test/output/test.css
+	_grep "font-size: calc(1rem * 1.2);" test/output/test.css
+	_grep "font-size: calc(1rem * 1.15);" test/output/test.css
+) || (
+	echo ""
+	echo "Failure encountered, oops!"
+	echo "Check the logs above and inspect the output in /test/output/."
+	exit 1
+)

From 6852099c3465474e263a89ea61d3b10dfe1ae5b2 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 11 May 2019 22:50:58 +0800
Subject: [PATCH 06/11] Add simple test for CSS module version

---
 test/fixtures/css_modules.css | 2 ++
 test/test.sh                  | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/css_modules.css

diff --git a/test/fixtures/css_modules.css b/test/fixtures/css_modules.css
new file mode 100644
index 0000000..60fe85e
--- /dev/null
+++ b/test/fixtures/css_modules.css
@@ -0,0 +1,2 @@
+@import '../../defaults.css';
+@import '../../modularscale.module.css';
diff --git a/test/test.sh b/test/test.sh
index ee1f1e0..f4365a3 100644
--- a/test/test.sh
+++ b/test/test.sh
@@ -21,8 +21,11 @@ _grep () {
 	echo ""
 	echo -e "\033[34mChecking output:\033[0m"
 	_grep "font-size: calc(1rem * 1.17);" test/output/test.css
-	_grep "font-size: calc(1rem * 1.2);" test/output/test.css
+	_grep "font-size: calc(1rem * 1.2);"  test/output/test.css
 	_grep "font-size: calc(1rem * 1.15);" test/output/test.css
+	_grep ".fontSize1 {"  test/output/css_modules.css
+	_grep ".fontSize2 {"  test/output/css_modules.css
+	_grep ".fontSize10 {" test/output/css_modules.css
 ) || (
 	echo ""
 	echo "Failure encountered, oops!"

From c173fed3bca3cd63d6126b430e1639017f8ccc2d Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 3 Nov 2019 18:38:05 +1100
Subject: [PATCH 07/11] Add css modules and extend support

---
 modularscale.apply.css       | 524 +++++++++++++++++++++++++++++++++++
 modularscale.extend.css      | 520 ++++++++++++++++++++++++++++++++++
 responsive-modular-scale.css | 144 ----------
 variables.css                |  12 +
 4 files changed, 1056 insertions(+), 144 deletions(-)
 create mode 100644 modularscale.apply.css
 create mode 100644 modularscale.extend.css
 delete mode 100644 responsive-modular-scale.css
 create mode 100644 variables.css

diff --git a/modularscale.apply.css b/modularscale.apply.css
new file mode 100644
index 0000000..6a95b36
--- /dev/null
+++ b/modularscale.apply.css
@@ -0,0 +1,524 @@
+:root {
+  --font-size--1: {
+    font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
+    @media (--ms-viewport-md) {
+      font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg));
+    }
+  }
+
+  --font-size-0: {
+    font-size: var(--ms-base-sm);
+    @media (--ms-viewport-md) {
+      font-size: var(--ms-base-md);
+    }
+    @media (--ms-viewport-lg) {
+      font-size: var(--ms-base-lg);
+    }
+  }
+
+  --font-size-1: {
+    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
+    @media (--ms-viewport-md) {
+      font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg));
+    }
+  }
+
+  --font-size-2: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-3: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-4: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-5: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-6: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-7: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-8: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-9: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-10: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-11: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-12: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-13: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-14: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-15: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-16: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-17: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-18: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-19: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --font-size-20: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+}
diff --git a/modularscale.extend.css b/modularscale.extend.css
new file mode 100644
index 0000000..88ab485
--- /dev/null
+++ b/modularscale.extend.css
@@ -0,0 +1,520 @@
+%font-size--1 {
+  font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg));
+  }
+}
+
+%font-size-0 {
+  font-size: var(--ms-base-sm);
+  @media (--ms-viewport-md) {
+    font-size: var(--ms-base-md);
+  }
+  @media (--ms-viewport-lg) {
+    font-size: var(--ms-base-lg);
+  }
+}
+
+%font-size-1 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg));
+  }
+}
+
+%font-size-2 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-3 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-4 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-5 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-6 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-7 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-8 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-9 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-10 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-11 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-12 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-13 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-14 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-15 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-16 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-17 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-18 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-19 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%font-size-20 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
diff --git a/responsive-modular-scale.css b/responsive-modular-scale.css
deleted file mode 100644
index 0b0f9a1..0000000
--- a/responsive-modular-scale.css
+++ /dev/null
@@ -1,144 +0,0 @@
-@custom-media --ms-viewport-md (width > 480px);
-@custom-media --ms-viewport-lg (width > 768px);
-
-:root {
-  --ms-ratio-sm: 1.15;
-  --ms-ratio-md: 1.17;
-  --ms-ratio-lg: 1.2;
-  --ms-base: 1rem;
-  --ms-base-sm: var(--ms-base);
-  --ms-base-md: var(--ms-base-sm);
-  --ms-base-lg: var(--ms-base-md);
-
-  --font-size--1: {
-    font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) / var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg)); }
-  }
-
-  --font-size-0: {
-    font-size: var(--ms-base-sm);
-    @media (--ms-viewport-md) { font-size: var(--ms-base-md); }
-    @media (--ms-viewport-lg) { font-size: var(--ms-base-lg); }
-  }
-
-  --font-size-1: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-2: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-3: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-4: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-5: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-6: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-7: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-8: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-9: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-10: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-11: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-12: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-13: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-14: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-15: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-16: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-17: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-18: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-19: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-20: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-}
diff --git a/variables.css b/variables.css
new file mode 100644
index 0000000..b5326bb
--- /dev/null
+++ b/variables.css
@@ -0,0 +1,12 @@
+@custom-media --ms-viewport-md (width > 480px);
+@custom-media --ms-viewport-lg (width > 768px);
+
+:root {
+  --ms-ratio-sm: 1.15;
+  --ms-ratio-md: 1.17;
+  --ms-ratio-lg: 1.2;
+  --ms-base: 1rem;
+  --ms-base-sm: var(--ms-base);
+  --ms-base-md: var(--ms-base-sm);
+  --ms-base-lg: var(--ms-base-md);
+}

From 4637d07a934b35900fc09817c9c6bd662b93929c Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 3 Nov 2019 19:22:45 +1100
Subject: [PATCH 08/11] Add support for @extend

---
 CHANGELOG.md            |  31 +++++
 README.md               | 246 +++++++++++++++++++++++++++-------------
 defaults.css            |   1 -
 modularscale.apply.css  |  44 +++----
 modularscale.extend.css |  44 +++----
 modularscale.module.css |  44 +++----
 test/fixtures/test.css  |   5 +-
 test/test.sh            |  13 ++-
 variables.css           |  12 --
 9 files changed, 272 insertions(+), 168 deletions(-)
 delete mode 100644 variables.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 779fadb..c96a744 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,34 @@
+## [v0.3.0.rc1]
+
+> Unreleased
+
+v0.3.0 is an almost-full rewrite. It now supports more PostCSS setups. Use it as CSS modules, functional selectors (`@extend`), or custom property sets (`@apply`).
+
+- **Breaking change:** The filenames have been changed. Since responsive-modular-scale now comes in 3 flavors, you'll need to specify the variant you want. The old default is available as `modularscale.apply.css`.
+
+  ```css
+  /* Before (v0.2.0) */
+  @import 'responsive-modular-scale.css';
+
+  /* After (v0.3.0) */
+  @import 'responsive-modular-scale.css/defaults.css';
+  @import 'responsive-modular-scale.css/modularscale.apply.css';
+  ```
+
+- **Breaking change:** The classnames have been changed. `--font-size-X` is now `--ms-font-size-X` to prevent potential name clashes.
+
+  ```css
+  /* Before (v0.2.0) */
+  @apply --font-size-2;
+
+  /* After (v0.3.0) */
+  @apply --ms-font-size-2;
+  ```
+
+- **New:** Responsive-modular-scale is now available as a CSS module with `modularscale.module.css`. See [README.md](./README.md) for info.
+
+- **New:** Responsive-modular-scale now works as functional selectors (aka, `@extend`) with `modularscale.extend.css`. See [README.md](./README.md) for info.
+
 ## [v0.2.0]
 
 > Jan 17, 2019
diff --git a/README.md b/README.md
index f0a60b0..3c9c78e 100644
--- a/README.md
+++ b/README.md
@@ -22,79 +22,40 @@ npm install --save --save-exact responsive-modular-scale.css
 
 ## Usage
 
-`responsive-modular-scale.css` comes in 2 flavors:
+`responsive-modular-scale.css` can be used in 3 different ways:
 
-- **CSS property sets**, which you can use via `@apply --font-size-2` via [postcss-apply].
-- **CSS modules**, which you can use via `composes: fontSize2`.
+### Functional selectors (`postcss-extend-rule`)
 
-[postcss-apply]: https://yarnpkg.com/en/package/postcss-apply
-
-See instructions below.
-
-## Usage as CSS module
-
-You can apply modular scale font sizes using CSS modules. For this, it's recommended to use [postcss-preset-env] along with [postcss-import]. (:warning: Experimental!)
-
-1. **Configure it** &mdash; Set up a `variables.css` with your configuration. I recommend placing this wherever you put your common variables (eg, color palettes and font names).
-
-   ```css
-   @import "responsive-modular-scale.css/defaults.css";
-
-   :root {
-     --ms-ratio-sm: 1.15;
-     --ms-ratio-md: 1.17;
-     --ms-ratio-lg: 1.2;
-     --ms-base: 1rem;
-     --ms-base-sm: var(--ms-base);
-     --ms-base-md: var(--ms-base-sm);
-     --ms-base-lg: var(--ms-base-md);
-   }
-
-   @custom-media --ms-viewport-md (width > 480px);
-   @custom-media --ms-viewport-lg (width > 768px);
-   ```
-
-2. **Compose it in** &mdash; In the modules you want to use it, just import the `variables.css`, then use `composes`.
-
-   ```css
-   @import "../variables.css";
+See [§ Usage as functional selectors](#usage-as-functional-selectors).
 
-   .myButton {
-     composes: fontSize2 from "responsive-modular-scale.css/modularscale.module.css";
-   }
-   ```
-
-These CSS classes are available:
-
-- `fontSizeMinus1` (negative 1)
-- `fontSize0` (applies the base font size)
-- `fontSize1`
-- `fontSize2`
-- ...
-- `fontSize20`
-
-Learn more about the `composes:` property from the [CSS modules documentation](https://github.com/css-modules/css-modules#composition).
+```css
+.title {
+  @extend %ms-font-size-2;
+}
+```
 
-## Usage as property set
+### Property sets (`postcss-apply`)
 
-You can also apply modular scale font sizes using CSS property sets (aka, `@apply`). You will need a few PostCSS plugins. I recommend using [postcss-preset-env][postcss-preset-env] along with [postcss-import] and [postcss-apply].
+See [§ Usage as property sets](#usage-as-property-sets).
 
-<details>
-<summary><em>View plugins needed</em></summary>
+```css
+.title {
+  @apply --ms-font-size-2;
+}
+```
 
-| Dependency                                      | Comes with [postcss-cssnext]? | Comes with [postcss-preset-env]? |
-| ----------------------------------------------- | ----------------------------- | -------------------------------- |
-| [postcss-import] to import CSS files            | -                             | -                                |
-| [postcss-apply] for property sets               | :+1:                          | -                                |
-| [postcss-custom-media] for custom media queries | :+1:                          | :+1:                             |
-| [postcss-custom-properties] for CSS variables   | :+1:                          | :+1:                             |
+### CSS modules
 
-</details>
+See [§ Usage as a CSS module](#usage-as-a-css-module).
 
 ```css
-@import "responsive-modular-scale.css";
+.title {
+  composes: msFontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
+}
 ```
 
+## How it works
+
 To use it, use any of the provided `--font-size-#` custom property sets:
 
 ```css
@@ -128,23 +89,11 @@ div {
 
 </details>
 
-It gives you the following custom property sets:
-
-- `@apply --font-size--1` (negative 1)
-- `@apply --font-size-0` (applies the base font size)
-- `@apply --font-size-1`
-- `@apply --font-size-2`
-- ...
-- `@apply --font-size-20`
-
-## Configuration
+## Configuring settings
 
-It's recommended you include this in a "common" file included in most of your project's files; usually, that's something like `variables.css`. You can change these ratios and breakpoints like so:
+Set up a `variables.css` with your configuration. Consider placing this wherever you put your common variables (eg, color palettes and font names). See: [`defaults.css`](./defaults.css).
 
 ```css
-/* variables.css */
-@import "responsive-modular-scale.css";
-
 :root {
   --ms-ratio-sm: 1.15;
   --ms-ratio-md: 1.17;
@@ -159,19 +108,150 @@ It's recommended you include this in a "common" file included in most of your pr
 @custom-media --ms-viewport-lg (width > 768px);
 ```
 
+## Usage as functional selectors
+
+To use this as functional selectors (ie, `@extend`), you'll need these PostCSS plugins:
+
+- [**postcss-prepend-imports**](postcss-prepend-imports)
+- [**postcss-extend-rule**](postcss-extend-rule)
+- [**postcss-preset-env**](postcss-preset-env)
+
+Configure PostCSS to load these plugins and import your variables. Here's an example config:
+
+```js
+/* postcss.config.js */
+module.exports = ctx => {
+  return {
+    plugins: [
+      // ...
+      require('postcss-prepend-imports')({
+        files: [
+          require.resolve(
+            'responsive-modular-scale.css/responsive-modular-scale.css'
+          )
+        ]
+      }),
+      require('postcss-extend-rule')(),
+      require('postcss-preset-env')({
+        importFrom: [require.resolve('./your/path/to/variables.css')]
+      })
+      // ...
+    ]
+  }
+}
+```
+
+You'll then be able to use them with `@extend` in your CSS.
+
 ```css
-/* your-other-styles.css */
-@import "./variables.css";
+.title {
+  @extend %ms-font-size-2;
+}
+```
+
+These selectors will become available:
 
-body {
-  @apply --font-size-0;
+- `@extend %ms-font-size--1` (negative 1)
+- `@extend %ms-font-size-0` (applies the base font size)
+- `@extend %ms-font-size-1`
+- `@extend %ms-font-size-2`
+- ...
+- `@extend %ms-font-size-20`
+
+## Usage as property sets
+
+You can also apply modular scale font sizes using CSS property sets (aka, `@apply`). You'll need these PostCSS plugins:
+
+- [**postcss-prepend-imports**](postcss-prepend-imports)
+- [**postcss-apply**](postcss-apply)
+- [**postcss-preset-env**](postcss-preset-env)
+
+Configure PostCSS to load these plugins and import your variables. Here's an example config:
+
+```js
+/* postcss.config.js */
+module.exports = ctx => {
+  return {
+    plugins: [
+      // ...
+      require('postcss-prepend-imports')({
+        files: [
+          require.resolve(
+            'responsive-modular-scale.css/responsive-modular-scale.css'
+          )
+        ]
+      }),
+      require('postcss-extend-rule')(),
+      require('postcss-preset-env')({
+        importFrom: [require.resolve('./your/path/to/variables.css')]
+      })
+      // ...
+    ]
+  }
 }
+```
 
-div {
-  @apply --font-size-4;
+You'll then be able to use them with `@apply` in your CSS.
+
+```css
+.title {
+  @apply --ms-font-size-2;
 }
 ```
 
+These property sets will become available:
+
+- `@apply --font-size--1` (negative 1)
+- `@apply --font-size-0` (applies the base font size)
+- `@apply --font-size-1`
+- `@apply --font-size-2`
+- ...
+- `@apply --font-size-20`
+
+## Usage as a CSS module
+
+:warning: `Experimental` - You can apply modular scale font sizes using CSS modules.
+
+To use this as functional selectors (ie, `@extend`), you'll need these PostCSS plugins:
+
+- [**postcss-preset-env**](postcss-preset-env)
+
+Configure PostCSS to load these plugins and import your variables. Here's an example config:
+
+```js
+/* postcss.config.js */
+module.exports = ctx => {
+  return {
+    plugins: [
+      // ...
+      require('postcss-preset-env')({
+        importFrom: [require.resolve('./your/path/to/variables.css')]
+      })
+      // ...
+    ]
+  }
+}
+```
+
+You'll then be able to use them with `composes` in your CSS.
+
+```css
+.myButton {
+  composes: msFontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
+}
+```
+
+These CSS classes are available:
+
+- `msFontSizeMinus1` (negative 1)
+- `msFontSize0` (applies the base font size)
+- `msFontSize1`
+- `msFontSize2`
+- ...
+- `msFontSize20`
+
+Learn more about the `composes:` property from the [CSS modules documentation](https://github.com/css-modules/css-modules#composition).
+
 ## Prior art
 
 - [postcss-modular-scale](https://www.npmjs.com/package/postcss-modular-scale) is a PostCSS plugin. However, it doesn't support responsive ratios, and the syntax is non-standard CSS.
@@ -195,3 +275,7 @@ Authored and maintained by Rico Sta. Cruz with help from contributors ([list][co
 
 [mit]: LICENSE.md
 [contributors]: http://github.com/rstacruz/responsive-modular-scale.css/contributors
+[css-modules]: https://github.com/css-modules/css-modules
+[postcss-apply]: https://yarnpkg.com/en/package/postcss-apply
+[postcss-extend-rule]: https://github.com/csstools/postcss-extend-rule
+[postcss-prepend-imports]: https://www.npmjs.com/package/postcss-prepend-imports
diff --git a/defaults.css b/defaults.css
index 3fed24f..b5326bb 100644
--- a/defaults.css
+++ b/defaults.css
@@ -10,4 +10,3 @@
   --ms-base-md: var(--ms-base-sm);
   --ms-base-lg: var(--ms-base-md);
 }
-
diff --git a/modularscale.apply.css b/modularscale.apply.css
index 6a95b36..d6a2e17 100644
--- a/modularscale.apply.css
+++ b/modularscale.apply.css
@@ -1,5 +1,5 @@
 :root {
-  --font-size--1: {
+  --ms-font-size--1: {
     font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
     @media (--ms-viewport-md) {
       font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
@@ -9,7 +9,7 @@
     }
   }
 
-  --font-size-0: {
+  --ms-font-size-0: {
     font-size: var(--ms-base-sm);
     @media (--ms-viewport-md) {
       font-size: var(--ms-base-md);
@@ -19,7 +19,7 @@
     }
   }
 
-  --font-size-1: {
+  --ms-font-size-1: {
     font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
     @media (--ms-viewport-md) {
       font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
@@ -29,7 +29,7 @@
     }
   }
 
-  --font-size-2: {
+  --ms-font-size-2: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
     );
@@ -45,7 +45,7 @@
     }
   }
 
-  --font-size-3: {
+  --ms-font-size-3: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm)
@@ -64,7 +64,7 @@
     }
   }
 
-  --font-size-4: {
+  --ms-font-size-4: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm)
@@ -83,7 +83,7 @@
     }
   }
 
-  --font-size-5: {
+  --ms-font-size-5: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
@@ -102,7 +102,7 @@
     }
   }
 
-  --font-size-6: {
+  --ms-font-size-6: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -124,7 +124,7 @@
     }
   }
 
-  --font-size-7: {
+  --ms-font-size-7: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -146,7 +146,7 @@
     }
   }
 
-  --font-size-8: {
+  --ms-font-size-8: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -168,7 +168,7 @@
     }
   }
 
-  --font-size-9: {
+  --ms-font-size-9: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -193,7 +193,7 @@
     }
   }
 
-  --font-size-10: {
+  --ms-font-size-10: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -218,7 +218,7 @@
     }
   }
 
-  --font-size-11: {
+  --ms-font-size-11: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -243,7 +243,7 @@
     }
   }
 
-  --font-size-12: {
+  --ms-font-size-12: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -271,7 +271,7 @@
     }
   }
 
-  --font-size-13: {
+  --ms-font-size-13: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -299,7 +299,7 @@
     }
   }
 
-  --font-size-14: {
+  --ms-font-size-14: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -327,7 +327,7 @@
     }
   }
 
-  --font-size-15: {
+  --ms-font-size-15: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -358,7 +358,7 @@
     }
   }
 
-  --font-size-16: {
+  --ms-font-size-16: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -389,7 +389,7 @@
     }
   }
 
-  --font-size-17: {
+  --ms-font-size-17: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -420,7 +420,7 @@
     }
   }
 
-  --font-size-18: {
+  --ms-font-size-18: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -454,7 +454,7 @@
     }
   }
 
-  --font-size-19: {
+  --ms-font-size-19: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -488,7 +488,7 @@
     }
   }
 
-  --font-size-20: {
+  --ms-font-size-20: {
     font-size: calc(
       var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
         var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
diff --git a/modularscale.extend.css b/modularscale.extend.css
index 88ab485..e699a50 100644
--- a/modularscale.extend.css
+++ b/modularscale.extend.css
@@ -1,4 +1,4 @@
-%font-size--1 {
+%ms-font-size--1 {
   font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
   @media (--ms-viewport-md) {
     font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
@@ -8,7 +8,7 @@
   }
 }
 
-%font-size-0 {
+%ms-font-size-0 {
   font-size: var(--ms-base-sm);
   @media (--ms-viewport-md) {
     font-size: var(--ms-base-md);
@@ -18,7 +18,7 @@
   }
 }
 
-%font-size-1 {
+%ms-font-size-1 {
   font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
   @media (--ms-viewport-md) {
     font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
@@ -28,7 +28,7 @@
   }
 }
 
-%font-size-2 {
+%ms-font-size-2 {
   font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
   @media (--ms-viewport-md) {
     font-size: calc(
@@ -42,7 +42,7 @@
   }
 }
 
-%font-size-3 {
+%ms-font-size-3 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm)
@@ -61,7 +61,7 @@
   }
 }
 
-%font-size-4 {
+%ms-font-size-4 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm)
@@ -80,7 +80,7 @@
   }
 }
 
-%font-size-5 {
+%ms-font-size-5 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
@@ -99,7 +99,7 @@
   }
 }
 
-%font-size-6 {
+%ms-font-size-6 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -121,7 +121,7 @@
   }
 }
 
-%font-size-7 {
+%ms-font-size-7 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -143,7 +143,7 @@
   }
 }
 
-%font-size-8 {
+%ms-font-size-8 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -165,7 +165,7 @@
   }
 }
 
-%font-size-9 {
+%ms-font-size-9 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -190,7 +190,7 @@
   }
 }
 
-%font-size-10 {
+%ms-font-size-10 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -215,7 +215,7 @@
   }
 }
 
-%font-size-11 {
+%ms-font-size-11 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -240,7 +240,7 @@
   }
 }
 
-%font-size-12 {
+%ms-font-size-12 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -268,7 +268,7 @@
   }
 }
 
-%font-size-13 {
+%ms-font-size-13 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -296,7 +296,7 @@
   }
 }
 
-%font-size-14 {
+%ms-font-size-14 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -324,7 +324,7 @@
   }
 }
 
-%font-size-15 {
+%ms-font-size-15 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -355,7 +355,7 @@
   }
 }
 
-%font-size-16 {
+%ms-font-size-16 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -386,7 +386,7 @@
   }
 }
 
-%font-size-17 {
+%ms-font-size-17 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -417,7 +417,7 @@
   }
 }
 
-%font-size-18 {
+%ms-font-size-18 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -451,7 +451,7 @@
   }
 }
 
-%font-size-19 {
+%ms-font-size-19 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -485,7 +485,7 @@
   }
 }
 
-%font-size-20 {
+%ms-font-size-20 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
diff --git a/modularscale.module.css b/modularscale.module.css
index a74e81b..3c5df83 100644
--- a/modularscale.module.css
+++ b/modularscale.module.css
@@ -1,4 +1,4 @@
-.fontSizeMinus1 {
+.msFontSizeMinus1 {
   font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
   @media (--ms-viewport-md) {
     font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
@@ -8,7 +8,7 @@
   }
 }
 
-.fontSize0 {
+.msFontSize0 {
   font-size: var(--ms-base-sm);
   @media (--ms-viewport-md) {
     font-size: var(--ms-base-md);
@@ -18,7 +18,7 @@
   }
 }
 
-.fontSize1 {
+.msFontSize1 {
   font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
   @media (--ms-viewport-md) {
     font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
@@ -28,7 +28,7 @@
   }
 }
 
-.fontSize2 {
+.msFontSize2 {
   font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
   @media (--ms-viewport-md) {
     font-size: calc(
@@ -42,7 +42,7 @@
   }
 }
 
-.fontSize3 {
+.msFontSize3 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm)
@@ -61,7 +61,7 @@
   }
 }
 
-.fontSize4 {
+.msFontSize4 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm)
@@ -80,7 +80,7 @@
   }
 }
 
-.fontSize5 {
+.msFontSize5 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
@@ -99,7 +99,7 @@
   }
 }
 
-.fontSize6 {
+.msFontSize6 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -121,7 +121,7 @@
   }
 }
 
-.fontSize7 {
+.msFontSize7 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -143,7 +143,7 @@
   }
 }
 
-.fontSize8 {
+.msFontSize8 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -165,7 +165,7 @@
   }
 }
 
-.fontSize9 {
+.msFontSize9 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -190,7 +190,7 @@
   }
 }
 
-.fontSize10 {
+.msFontSize10 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -215,7 +215,7 @@
   }
 }
 
-.fontSize11 {
+.msFontSize11 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -240,7 +240,7 @@
   }
 }
 
-.fontSize12 {
+.msFontSize12 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -268,7 +268,7 @@
   }
 }
 
-.fontSize13 {
+.msFontSize13 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -296,7 +296,7 @@
   }
 }
 
-.fontSize14 {
+.msFontSize14 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -324,7 +324,7 @@
   }
 }
 
-.fontSize15 {
+.msFontSize15 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -355,7 +355,7 @@
   }
 }
 
-.fontSize16 {
+.msFontSize16 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -386,7 +386,7 @@
   }
 }
 
-.fontSize17 {
+.msFontSize17 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -417,7 +417,7 @@
   }
 }
 
-.fontSize18 {
+.msFontSize18 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -451,7 +451,7 @@
   }
 }
 
-.fontSize19 {
+.msFontSize19 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
@@ -485,7 +485,7 @@
   }
 }
 
-.fontSize20 {
+.msFontSize20 {
   font-size: calc(
     var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
       var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
diff --git a/test/fixtures/test.css b/test/fixtures/test.css
index 4c0b9ab..274355b 100644
--- a/test/fixtures/test.css
+++ b/test/fixtures/test.css
@@ -1,5 +1,6 @@
-@import '../../responsive-modular-scale.css';
+@import '../../defaults.css';
+@import '../../modularscale.apply.css';
 
 #one {
-  @apply --font-size-1;
+  @apply --ms-font-size-1;
 }
diff --git a/test/test.sh b/test/test.sh
index f4365a3..35b1ad5 100644
--- a/test/test.sh
+++ b/test/test.sh
@@ -20,12 +20,13 @@ _grep () {
 
 	echo ""
 	echo -e "\033[34mChecking output:\033[0m"
-	_grep "font-size: calc(1rem * 1.17);" test/output/test.css
-	_grep "font-size: calc(1rem * 1.2);"  test/output/test.css
-	_grep "font-size: calc(1rem * 1.15);" test/output/test.css
-	_grep ".fontSize1 {"  test/output/css_modules.css
-	_grep ".fontSize2 {"  test/output/css_modules.css
-	_grep ".fontSize10 {" test/output/css_modules.css
+	_grep "font-size: calc(" test/output/test.css
+	_grep "1rem * 1.17);" test/output/test.css
+	_grep "1rem * 1.2);"  test/output/test.css
+	_grep "1rem * 1.15);" test/output/test.css
+	_grep ".msFontSize1 {"  test/output/css_modules.css
+	_grep ".msFontSize2 {"  test/output/css_modules.css
+	_grep ".msFontSize10 {" test/output/css_modules.css
 ) || (
 	echo ""
 	echo "Failure encountered, oops!"
diff --git a/variables.css b/variables.css
deleted file mode 100644
index b5326bb..0000000
--- a/variables.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@custom-media --ms-viewport-md (width > 480px);
-@custom-media --ms-viewport-lg (width > 768px);
-
-:root {
-  --ms-ratio-sm: 1.15;
-  --ms-ratio-md: 1.17;
-  --ms-ratio-lg: 1.2;
-  --ms-base: 1rem;
-  --ms-base-sm: var(--ms-base);
-  --ms-base-md: var(--ms-base-sm);
-  --ms-base-lg: var(--ms-base-md);
-}

From c5c58beeed61a5ff6c5163ca06491def6cf52b33 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 3 Nov 2019 19:24:59 +1100
Subject: [PATCH 09/11] Bump version to 0.3.0.rc.1

---
 CHANGELOG.md | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c96a744..125aa5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## [v0.3.0.rc1]
+## [v0.3.0.rc.1]
 
 > Unreleased
 
diff --git a/package.json b/package.json
index 9603ef7..ca07292 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "responsive-modular-scale.css",
   "description": "Responsive typography using CSS variables",
-  "version": "0.2.0",
+  "version": "0.3.0.rc.1",
   "author": "Rico Sta. Cruz <rico@ricostacruz.com>",
   "keywords": [
     "css",

From c8f81bf41392ed0294e0383c0fa49d8ff9e560ad Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 3 Nov 2019 19:25:37 +1100
Subject: [PATCH 10/11] v0.3.0-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ca07292..723c145 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "responsive-modular-scale.css",
   "description": "Responsive typography using CSS variables",
-  "version": "0.3.0.rc.1",
+  "version": "0.3.0-rc.1",
   "author": "Rico Sta. Cruz <rico@ricostacruz.com>",
   "keywords": [
     "css",

From f40e8b393ce78d441efae05efe929e880f3b126a Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 3 Nov 2019 19:36:49 +1100
Subject: [PATCH 11/11] Update PostCSS instructions

---
 README.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3c9c78e..c6eefb0 100644
--- a/README.md
+++ b/README.md
@@ -131,9 +131,11 @@ module.exports = ctx => {
           )
         ]
       }),
-      require('postcss-extend-rule')(),
       require('postcss-preset-env')({
-        importFrom: [require.resolve('./your/path/to/variables.css')]
+        importFrom: [require.resolve('./your/path/to/variables.css')],
+        insertBefore: {
+          'all-property': [require('postcss-extend-rule')()]
+        }
       })
       // ...
     ]
@@ -181,7 +183,7 @@ module.exports = ctx => {
           )
         ]
       }),
-      require('postcss-extend-rule')(),
+      require('postcss-apply')(),
       require('postcss-preset-env')({
         importFrom: [require.resolve('./your/path/to/variables.css')]
       })