Fixes #953 - beautify breaks attribute selectors.

Why:

* `~` marker can be used both to denote adjacent selectors and inside
  an attribute matcher.

diff --git a/History.md b/History.md
index 1d2ba34..ee9a4c9 100644 (file)
--- a/History.md
+++ b/History.md
@@ -10,6 +10,7 @@
 ==================
 
 * Fixed issue [#887](https://github.com/jakubpawlowicz/clean-css/issues/887) - edge case in serializing comments.
+* Fixed issue [#953](https://github.com/jakubpawlowicz/clean-css/issues/953) - beautify breaks attribute selectors.
 
 [4.1.5 / 2017-06-29](https://github.com/jakubpawlowicz/clean-css/compare/v4.1.4...v4.1.5)
 ==================

diff --git a/lib/optimizer/level-1/tidy-rules.js b/lib/optimizer/level-1/tidy-rules.js
index b47ed6b..0af3b2f 100644 (file)
--- a/lib/optimizer/level-1/tidy-rules.js
+++ b/lib/optimizer/level-1/tidy-rules.js
@@ -70,7 +70,7 @@ function removeWhitespace(value, format) {
     isNewLineNix = character == Marker.NEW_LINE_NIX;
     isNewLineWin = character == Marker.NEW_LINE_NIX && value[i - 1] == Marker.NEW_LINE_WIN;
     isQuoted = isSingleQuoted || isDoubleQuoted;
-    isRelation = !isEscaped && roundBracketLevel === 0 && RELATION_PATTERN.test(character);
+    isRelation = !isAttribute && !isEscaped && roundBracketLevel === 0 && RELATION_PATTERN.test(character);
     isWhitespace = WHITESPACE_PATTERN.test(character);
 
     if (wasEscaped && isQuoted && isNewLineWin) {

diff --git a/test/integration-test.js b/test/integration-test.js
index 1c7d96d..bd7b12f 100644 (file)
--- a/test/integration-test.js
+++ b/test/integration-test.js
@@ -2573,6 +2573,10 @@ vows.describe('integration tests')
         'a{color:red}',
         'a {' + lineBreak + '  color: red' + lineBreak + '}'
       ],
+      'rule with fancy selector': [
+        '.block[data-col~="5th"]{color:red}',
+        '.block[data-col~="5th"] {' + lineBreak + '  color: red' + lineBreak + '}'
+      ],
       'rules': [
         'a{color:red}p{color:#000;width:100%}',
         'a {' + lineBreak + '  color: red' + lineBreak + '}' + lineBreak + 'p {' + lineBreak + '  color: #000;' + lineBreak + '  width: 100%' + lineBreak + '}'