Fixes #498 - restructuring content with flexbox properties.

Flexbox is quite tricky as there are many different properties which
can't be reordered. Instead of implementing fine grained rules for all
of them we simply block flexbox from being restructured.

Potentially we should revisit it at some point to find out if restructuring
groups of properties would be a good idea.

diff --git a/History.md b/History.md
index c264ed8..3b82120 100644 (file)
--- a/History.md
+++ b/History.md
@@ -9,6 +9,11 @@
 * Fixed issue [#397](https://github.com/jakubpawlowicz/clean-css/issues/397) - support for source map sources.
 * Fixed issue [#480](https://github.com/jakubpawlowicz/clean-css/issues/480) - extracting uppercase property names.
 
+[3.1.8 / 2015-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/v3.1.7...3.1)
+==================
+
+* Fixes issue [#498](https://github.com/jakubpawlowicz/clean-css/issues/498) - reordering and flexbox.
+
 [3.1.7 / 2015-03-16](https://github.com/jakubpawlowicz/clean-css/compare/v3.1.6...v3.1.7)
 ==================
 

diff --git a/lib/properties/reorderable.js b/lib/properties/reorderable.js
index 0b0263d..7b53cb9 100644 (file)
--- a/lib/properties/reorderable.js
+++ b/lib/properties/reorderable.js
@@ -1,3 +1,5 @@
+var FLEX_PROPERTIES = /align\-items|box\-align|box\-pack|flex|justify/;
+
 function canReorder(left, right) {
   for (var i = right.length - 1; i >= 0; i--) {
     for (var j = left.length - 1; j >= 0; j--) {
@@ -23,6 +25,8 @@ function canReorderSingle(left, right) {
 
   if (leftName == 'font' && rightName == 'line-height' || rightName == 'font' && leftName == 'line-height')
     return false;
+  if (FLEX_PROPERTIES.test(leftName) && FLEX_PROPERTIES.test(rightName))
+    return false;
   if (leftNameRoot != rightNameRoot)
     return true;
   if (leftName == rightName && leftNameRoot == rightNameRoot && leftValue == rightValue)

diff --git a/test/properties/reorderable-test.js b/test/properties/reorderable-test.js
index 56dde86..6b47255 100644 (file)
--- a/test/properties/reorderable-test.js
+++ b/test/properties/reorderable-test.js
@@ -96,6 +96,32 @@ vows.describe(canReorderSingle)
     'different, overlapping simple selectors': {
       'topic': canReorderSingle(propertiesIn('a{border:none}')[0], propertiesIn('a{border:1px solid #f00}')[0]),
       'must be false': function (result) { assert.isFalse(result); }
+    },
+    'align-items': {
+      'topic': canReorderSingle(propertiesIn('a{border:none}')[0], propertiesIn('a{align-items:flex-start}')[0]),
+      'must be true': function (result) { assert.isTrue(result); }
+    }
+  })
+  .addBatch({
+    'flex #1': {
+      'topic': canReorderSingle(propertiesIn('a{-webkit-box-align:flex-start}')[0], propertiesIn('a{align-items:flex-start}')[0]),
+      'must be false': function (result) { assert.isFalse(result); }
+    },
+    'flex #2': {
+      'topic': canReorderSingle(propertiesIn('a{-ms-flex-align:start}')[0], propertiesIn('a{align-items:flex-start}')[0]),
+      'must be false': function (result) { assert.isFalse(result); }
+    },
+    'flex #3': {
+      'topic': canReorderSingle(propertiesIn('a{flex:none}')[0], propertiesIn('a{align-items:flex-start}')[0]),
+      'must be false': function (result) { assert.isFalse(result); }
+    },
+    'flex #4': {
+      'topic': canReorderSingle(propertiesIn('a{justify-content:center}')[0], propertiesIn('a{–ms-flex-pack:center}')[0]),
+      'must be false': function (result) { assert.isFalse(result); }
+    },
+    'flex #5': {
+      'topic': canReorderSingle(propertiesIn('a{justify-content:center}')[0], propertiesIn('a{–webkit-box-pack:center}')[0]),
+      'must be false': function (result) { assert.isFalse(result); }
     }
   })
   .export(module);