From e0bac9f60d5055a62e3d4ab4ae556743d106fae5 Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Tue, 17 Mar 2015 19:33:07 +0000 Subject: [PATCH] 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. --- History.md | 5 +++++ lib/properties/reorderable.js | 4 ++++ test/properties/reorderable-test.js | 26 ++++++++++++++++++++++++++ 3 files changed, 35 insertions(+) diff --git a/History.md b/History.md index c264ed8b..3b821201 100644 --- 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 0b0263d3..7b53cb9d 100644 --- 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 56dde865..6b472551 100644 --- 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); -- 2.34.1