[ref: #8] Add pe unit to transform px to em

Author: James Kolce

lib/compile.js

@@ -9,6 +9,7 @@ module.exports = (file) => {
   return postcss([
     require('postcss-lh'),
     require('postcss-pr'),
+    require('postcss-pe'),
     require('postcss-custom-media'),
     require('postcss-media-minmax'),
     require('autoprefixer')

package.json

@@ -19,6 +19,7 @@
     "postcss-custom-media": "^5.0.1",
     "postcss-lh": "^1.1.0",
     "postcss-media-minmax": "^2.1.2",
+    "postcss-pe": "^1.0.0",
     "postcss-pr": "^1.0.0"
   },
   "devDependencies": {

test/fixtures/pxToEm/pxToEm.css

@@ -0,0 +1,28 @@
+:root {
+  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
+}
+
+@media (max-width: 500px) {
+  :root {
+    font-size: 14px;
+  }
+}
+
+@media print {
+  :root {
+    font: 11pt / 1.3 "Georgia", "Times New Roman", "Times", serif;
+  }
+}
+
+section {
+  margin-bottom: 1.5em;
+  padding-top: 2em;
+}
+
+.othersection {
+  font-size: 3em;
+}
+
+.othersection article {
+  margin-top: 2em;
+}

test/fixtures/pxToEm/pxToEm.scss

@@ -0,0 +1,26 @@
+:root {
+  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
+
+  @media (max-width: 500px) {
+    font-size: 14px;
+  }
+}
+
+@media print {
+  :root {
+    font: 11pt / 1.3 "Georgia", "Times New Roman", "Times", serif;
+  }
+}
+
+section {
+  margin-bottom: 24pe;
+  padding-top: 32pe;
+}
+
+.othersection {
+  font-size: 48pe;
+}
+
+.othersection article {
+  margin-top: 96/48pe;
+}

test/index.js

@@ -33,7 +33,12 @@ test('units', (t) => {
   t.equal(
     actual('pxToRem'),
     expected('pxToRem'),
-    'should be added');
+    'should be transformed');
+
+  t.equal(
+    actual('pxToEm'),
+    expected('pxToEm'),
+    'should be transformed');
 
   t.end();
 });