fix: handle uppercase property and values on `postcss-normalize-posit…

…ions` (#607)
cssnano · Sep 20, 2018 · c521423 · c521423
1 parent d177936
commit c521423
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git a/packages/postcss-normalize-positions/README.md b/packages/postcss-normalize-positions/README.md
@@ -16,15 +16,15 @@ npm install postcss-normalize-positions --save
 
 ```css
 div {
-    background-position: bottom right
+    background-position: bottom left;
 }
 ```
 
 ### Output
 
 ```css
 div {
-    background-position: 100% 100%
+    background-position:0 100%;
 }
 ``` 
 

diff --git a/packages/postcss-normalize-positions/src/__tests__/index.js b/packages/postcss-normalize-positions/src/__tests__/index.js
@@ -150,6 +150,49 @@ test(
     'background:url(cat.jpg)'
 );
 
+test(
+    'should normalize when property in uppercase',
+    processCSS,
+    'BACKGROUND-POSITION: center',
+    'BACKGROUND-POSITION: 50%'
+);
+
+test(
+    'should normalize when value in uppercase',
+    processCSS,
+    'BACKGROUND-POSITION: CENTER',
+    'BACKGROUND-POSITION: 50%'
+);
+
+test(
+    'should normalize when value in uppercase (2)',
+    processCSS,
+    'BACKGROUND-POSITION: CENTER, CENTER',
+    'BACKGROUND-POSITION: 50%, 50%'
+);
+
+test(
+    'should normalize when value in uppercase (3)',
+    processCSS,
+    'BACKGROUND-POSITION: LEFT BOTTOM, LEFT BOTTOM',
+    'BACKGROUND-POSITION: 0 100%, 0 100%'
+);
+
+
+test(
+    'should normalize when value in uppercase (4)',
+    processCSS,
+    'BACKGROUND-POSITION: BOTTOM LEFT, BOTTOM LEFT',
+    'BACKGROUND-POSITION: 0 100%, 0 100%'
+);
+
+test(
+    'should normalize when value in uppercase (5)',
+    processCSS,
+    'BACKGROUND-POSITION: CENTER LEFT, CENTER LEFT',
+    'BACKGROUND-POSITION: 0, 0'
+);
+
 test(
     'should use the postcss plugin api',
     usePostCSSPlugin,

diff --git a/packages/postcss-normalize-positions/src/index.js b/packages/postcss-normalize-positions/src/index.js
@@ -27,7 +27,7 @@ function transform (decl) {
             end: null,
         });
         arg.forEach((part, index) => {
-            const isPosition = ~directions.indexOf(part.value) || unit(part.value);
+            const isPosition = ~directions.indexOf(part.value.toLowerCase()) || unit(part.value);
             const len = relevant.length - 1;
             if (relevant[len].start === null && isPosition) {
                 relevant[len].start = index;
@@ -53,35 +53,36 @@ function transform (decl) {
         if (position.length > 3) {
             return;
         }
-        if (position.length === 1 || position[2].value === 'center') {
-            if (position[2]) {
+        const firstValue = position[0].value.toLowerCase();
+        const secondValue = position[2] && position[2].value
+            ? position[2].value.toLowerCase()
+            : null;
+        if (position.length === 1 || secondValue === 'center') {
+            if (secondValue) {
                 position[2].value = position[1].value = '';
             }
-            const {value} = position[0];
             const map = Object.assign({}, horizontal, {
                 center,
             });
-            if (has(map, value)) {
-                position[0].value = map[value];
+            if (has(map, firstValue)) {
+                position[0].value = map[firstValue];
             }
             return;
         }
-        if (position[0].value === 'center' && ~directions.indexOf(position[2].value)) {
+        if (firstValue === 'center' && ~directions.indexOf(secondValue)) {
             position[0].value = position[1].value = '';
-            const {value} = position[2];
-            if (has(horizontal, value)) {
-                position[2].value = horizontal[value];
+            if (has(horizontal, secondValue)) {
+                position[2].value = horizontal[secondValue];
             }
             return;
         }
-        if (has(horizontal, position[0].value) && has(vertical, position[2].value)) {
-            position[0].value = horizontal[position[0].value];
-            position[2].value = vertical[position[2].value];
+        if (has(horizontal, firstValue) && has(vertical, secondValue)) {
+            position[0].value = horizontal[firstValue];
+            position[2].value = vertical[secondValue];
             return;
-        } else if (has(vertical, position[0].value) && has(horizontal, position[2].value)) {
-            let first = position[0].value;
-            position[0].value = horizontal[position[2].value];
-            position[2].value = vertical[first];
+        } else if (has(vertical, firstValue) && has(horizontal, secondValue)) {
+            position[0].value = horizontal[secondValue];
+            position[2].value = vertical[firstValue];
             return;
         }
     });