Add rem fallback

Close #31

Author: MoOx

CHANGELOG.md

@@ -29,6 +29,7 @@ cssnext({
 - Added: `url` option: non absolute url() are now rebased according to `from` (and `to` options if provided). Enabled by default.
 - Added: `compress` option now accept CSSWring options directly.
 - Added: `browsers` option can enable or disable features and is propagated to autoprefixer
+- Added: px fallback for `rem` unit
 
 # 0.6.6 - 2014-12-22
 

README.md

@@ -59,7 +59,8 @@ Follow [@cssnext on Twitter](https://twitter.com/cssnext) to get latest news & j
 ([⇗](https://github.com/postcss/postcss-font-variant)),
 * [filter](http://www.w3.org/TR/filter-effects/) properties
 ([⇗](https://github.com/iamvdo/pleeease-filters))
-
+* [rem](http://www.w3.org/TR/css3-values/#rem-unit) units
+([⇗](https://github.com/robwierzbowski/node-pixrem))
 
 ### Bonus features
 
@@ -248,6 +249,7 @@ Here are all available features:
 - `colorRebeccapurple`
 - `fontVariant`
 - `filter`
+- `rem`
 - `autoprefixer`
 
 _Note: order is important to get everything working correctly._

index.js

@@ -23,6 +23,7 @@ var caniuseFeaturesMap = {
   // colorFunction:[null],
   // fontVariant: [null],
   // filter: [null], // @todo can be done using a callback, this is only used for Firefox < 35
+  rem: ["rem"],
   // autoprefixer: [null] // will always be null since autoprefixer does the same game as we do
 }
 
@@ -40,6 +41,7 @@ var features = {
   colorFunction: function(options) { return require("postcss-color-function")(options)},
   fontVariant: function(options) { return require("postcss-font-variant")(options)},
   filter: function(options) { return require("pleeease-filters")(options)},
+  rem: function(options) { return require("pixrem")(options)},
   autoprefixer: function(options) { return require("autoprefixer-core")(options).postcss}
 }
 

package.json

@@ -35,6 +35,7 @@
     "exit": "^0.1.2",
     "node-watch": "^0.3.4",
     "object-assign": "^2.0.0",
+    "pixrem": "^1.1.0",
     "pleeease-filters": "^1.0.0",
     "postcss": "^4.0.2",
     "postcss-calc": "^4.0.0",

test/fixtures/cases/example.css

@@ -6,7 +6,7 @@
 }
 
 /* custom media queries */
-@custom-media --viewport-medium (width <= 50rem);
+@custom-media --viewport-medium (width <= 50em);
 
 /* some var() & calc() */
 body {
@@ -20,6 +20,7 @@ body {
 /* custom media query usage */
 @media (--viewport-medium) {
   body { font-size: calc(var(--fontSize) * 1.2); }
+  /* no need for px here since browsers that supports media queries support rem already */
 }
 
 /* custom selectors */

test/fixtures/cases/example.expected.css

@@ -6,14 +6,18 @@
 body {
   color: rgba(18, 52, 86, 0.47059);
 
+  font-size: 16px;
+
   font-size: 1rem;
+  line-height: 24px;
   line-height: 1.5rem;
   padding: calc(0.5rem + 1px);
 }
 
 /* custom media query usage */
-@media (max-width: 50rem) {
+@media (max-width: 50em) {
   body { font-size: 1.2rem; }
+  /* no need for px here since browsers that supports media queries support rem already */
 }
 
 /* custom selectors */

test/fixtures/features/rem.css

@@ -0,0 +1,11 @@
+.sky {
+  margin: 2.5rem 2px 3em 100%;
+  color: blue;
+}
+
+@media screen and (min-width: 20rem) {
+  .leaf {
+    margin-bottom: 1.333rem;
+    font-size: 1.5rem;
+  }
+}

test/fixtures/features/rem.expected.css

@@ -0,0 +1,12 @@
+.sky {
+  margin: 40px 2px 3em 100%;
+  margin: 2.5rem 2px 3em 100%;
+  color: blue;
+}
+
+@media screen and (min-width: 20rem) {
+  .leaf {
+    margin-bottom: 1.333rem;
+    font-size: 1.5rem;
+  }
+}