Merge pull request #279 from hannu/fix-not-selector

Fix #266: Do not replace pseudo selectors when they appear inside :not clause
SC5 · Nov 27, 2014 · 5508e63 · 5508e63
2 parents fba1217 + 9a997e2
commit 5508e63
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/lib/modules/pseudo-selectors.js b/lib/modules/pseudo-selectors.js
@@ -9,12 +9,10 @@ module.exports.stylesFromString = function(cssString) {
       'hover', 'enabled', 'disabled', 'active', 'visited',
       'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type',
       'first-child', 'last-child'
-    ];
-    return new RegExp('(\\:' + (pseudoSelectors.join('|\\:')) + ')', 'g');
-  }
-
-  function replacePseudoRule(matched) {
-    return matched.replace(/\:/g, '.pseudo-class-');
+    ],
+      notInsideParentheses = '(?![^(]*\\))';
+    // Match all pseudo selectors that are not inside parentheses
+    return new RegExp('(\\:' + (pseudoSelectors.join(notInsideParentheses + '|\\:')) + notInsideParentheses + ')', 'g');
   }
 
   var ast = css.parse(cssString),

diff --git a/test/unit/modules/pseudo-selectors.test.js b/test/unit/modules/pseudo-selectors.test.js
@@ -50,6 +50,24 @@ describe('Pseudo selector parsing', function() {
     expect(pseudoSelectors.stylesFromString(str)).to.eql(result);
   });
 
+  it('should replace multiple pseudo selectors on same style', function() {
+    var str = multiline(function() {
+      /*
+.style1:first-child:hover {
+  background: green;
+}
+      */
+    }),
+    result = multiline(function() {
+      /*
+.style1.pseudo-class-first-child.pseudo-class-hover {
+  background: green;
+}
+      */
+    });
+    expect(pseudoSelectors.stylesFromString(str)).to.eql(result);
+  });
+
   it('should ignore unknown pseudo selectors', function() {
     var str = multiline(function() {
       /*
@@ -60,4 +78,33 @@ describe('Pseudo selector parsing', function() {
     });
     expect(pseudoSelectors.stylesFromString(str)).to.be.empty;
   });
+
+  it('should not replace pseudo selectors when they appear inside :not clause', function() {
+    var str = multiline(function() {
+      /*
+.style:not(:first-child) {
+  background: red;
+}
+      */
+    });
+    expect(pseudoSelectors.stylesFromString(str)).to.be.empty;
+  });
+
+  it('should replace pseudo selectors that are outside the :not clause', function() {
+    var str = multiline(function() {
+      /*
+.style:not(:first-child):hover {
+  background: red;
+}
+      */
+    }),
+    result = multiline(function() {
+      /*
+.style:not(:first-child).pseudo-class-hover {
+  background: red;
+}
+      */
+    });
+    expect(pseudoSelectors.stylesFromString(str)).to.eql(result);
+  });
 });