Add angle units support

cssnano · Feb 26, 2017 · b49b80a · b49b80a
1 parent 6e8eef6
commit b49b80a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/packages/postcss-convert-values/README.md b/packages/postcss-convert-values/README.md
@@ -58,6 +58,13 @@ Default: `true`
 
 Pass `false` to disable conversion from `ms` to `s` & vice versa.
 
+##### angle
+
+Type: `boolean`
+Default: `true`
+
+Pass `false` to disable conversion from `deg` to `turn` & vice versa.
+
 ## Contributing
 
 Pull requests are welcome. If you add functionality, then please add unit tests

diff --git a/packages/postcss-convert-values/src/__tests__/index.js b/packages/postcss-convert-values/src/__tests__/index.js
@@ -130,22 +130,31 @@ let tests = [{
     fixture: '.has-svg:before{content:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-0.5 0 20 15"><rect fill="white" stroke="none" transform="rotate(45 4.0033 8.87436)" height="5" width="6.32304" y="6.37436" x="0.84178"></rect><rect fill="white" stroke="none" transform="rotate(45 11.1776 7.7066)" width="5" height="16.79756" y="-0.69218" x="8.67764"></rect></svg>")}',
     expected: '.has-svg:before{content:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-0.5 0 20 15"><rect fill="white" stroke="none" transform="rotate(45 4.0033 8.87436)" height="5" width="6.32304" y="6.37436" x="0.84178"></rect><rect fill="white" stroke="none" transform="rotate(45 11.1776 7.7066)" width="5" height="16.79756" y="-0.69218" x="8.67764"></rect></svg>")}'
 }, {
-    message: 'should not convert units',
+    message: 'should convert angle units',
+    fixture: 'h1{transform: rotate(0.25turn);transform: rotate(0.25TURN)}',
+    expected: 'h1{transform: rotate(90deg);transform: rotate(90deg)}'
+}, {
+    message: 'should not convert length units',
     fixture: 'h1{transition-duration:500ms; width:calc(192px + 2em); width:+14px; letter-spacing:-0.1VMIN}',
     expected: 'h1{transition-duration:.5s; width:calc(192px + 2em); width:14px; letter-spacing:-.1vmin}',
     options: { length: false }
 }, {
-    message: 'should not convert units',
+    message: 'should not convert time units',
     fixture: 'h1{transition-duration:500ms; width:calc(192px + 2em); width:+14px; letter-spacing:-0.1VMIN}',
     expected: 'h1{transition-duration:500ms; width:calc(2in + 2em); width:14px; letter-spacing:-.1vmin}',
     options: { time: false }
 }, {
-    message: 'should not convert units with deprecated option',
+    message: 'should not convert angle units',
+    fixture: 'h1{transform: rotate(0.25turn);transform: rotate(0.25TURN)}',
+    expected: 'h1{transform: rotate(.25turn);transform: rotate(.25turn)}',
+    options: { angle: false }
+}, {
+    message: 'should not convert length units with deprecated option',
     fixture: 'h1{transition-duration:500ms; width:calc(192px + 2em); width:+14px; letter-spacing:-0.1VMIN}',
     expected: 'h1{transition-duration:.5s; width:calc(192px + 2em); width:14px; letter-spacing:-.1vmin}',
     options: { convertLength: false }
 }, {
-    message: 'should not convert units with deprecated option',
+    message: 'should not convert time units with deprecated option',
     fixture: 'h1{transition-duration:500ms; width:calc(192px + 2em); width:+14px; letter-spacing:-0.1VMIN}',
     expected: 'h1{transition-duration:500ms; width:calc(2in + 2em); width:14px; letter-spacing:-.1vmin}',
     options: { convertTime: false }

diff --git a/packages/postcss-convert-values/src/index.js b/packages/postcss-convert-values/src/index.js
@@ -26,8 +26,7 @@ function transform (opts) {
         decl.value = valueParser(decl.value).walk(function (node) {
             if (node.type === 'word') {
                 parseWord(node, opts);
-            }
-            if (node.type === 'function') {
+            } else if (node.type === 'function') {
                 if (node.value === 'calc') {
                     node.nodes.forEach(function walkNodes (node) {
                         if (node.type === 'word') {
@@ -37,8 +36,10 @@ function transform (opts) {
                             node.nodes.forEach(walkNodes);
                         }
                     });
+                    return false;
+                } else if (node.value === 'url') {
+                    return false;
                 }
-                return false;
             }
         }).toString();
     };

diff --git a/packages/postcss-convert-values/src/lib/convert.js b/packages/postcss-convert-values/src/lib/convert.js
@@ -12,6 +12,11 @@ const timeConv = {
     'ms': 1
 };
 
+const angleConv = {
+    'turn': 360,
+    'deg': 1
+};
+
 function dropLeadingZero (number) {
     let value = String(number);
 
@@ -48,7 +53,7 @@ function transform (number, unit, conversion) {
         .reduce((a, b) => a.length < b.length ? a : b);
 }
 
-export default function (number, unit, {time, length}) {
+export default function (number, unit, {time, length, angle}) {
     let value = dropLeadingZero(number) + (unit ? unit : '');
     let converted;
 
@@ -60,6 +65,10 @@ export default function (number, unit, {time, length}) {
         converted = transform(number, unit, timeConv);
     }
 
+    if (angle !== false && unit in angleConv) {
+        converted = transform(number, unit, angleConv);
+    }
+
     if (converted && converted.length < value.length) {
         value = converted;
     }