fix: 🐛 replace all & operators in nesting addon

streamich · Aug 5, 2018 · 0e1eca8 · 0e1eca8
1 parent 2c897e0
commit 0e1eca8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 14 deletions.
diff --git a/.storybook/nesting.stories.js b/.storybook/nesting.stories.js
@@ -21,7 +21,20 @@ const className = rule({
     },
 }, 'nesting');
 
+const classNamePlus = rule({
+    border: '1px solid red',
+    '& + &': {
+        border: '1px solid blue',
+    },
+}, 'plus');
+
 storiesOf('Addons/Nesting', module)
     .add('Default', () =>
         h('div', {className}, 'Hover ', h('span', null, 'me!'))
     )
+    .add('& + &', () =>
+        h('div', {},
+            h('div', {className: classNamePlus}, 'a'),
+            h('div', {className: classNamePlus}, 'b'),
+        )
+    )
diff --git a/addon/__tests__/nesting.test.js b/addon/__tests__/nesting.test.js
@@ -31,17 +31,55 @@ describe('nesting', function () {
 
         expect(nano.putRaw.mock.calls[0][0].includes('.foo .one,.foo .two')).toBe(true);
     });
-/*
-    it('expands & operand after', () => {
-        expect(interpolateSelectors(['.one', '#two'], '.test &')).toBe('.test .one,.test #two');
+
+    it('expands & operand after', function () {
+        var nano = createNano();
+
+        nano.putRaw = jest.fn();
+
+        nano.put('.one, #two', {
+            '.foo &': {
+                color: 'tomato'
+            }
+        });
+
+        var result = nano.putRaw.mock.calls[0][0].replace(/ +(?= )/g,'');
+
+        expect(result.includes('.foo .one,.foo #two')).toBe(true);
     });
 
-    it('expands & operand before', () => {
-        expect(interpolateSelectors(['.test'], '&:hover')).toBe('.test:hover');
+    it('expands & operand before', function () {
+        var nano = createNano();
+
+        nano.putRaw = jest.fn();
+        nano.put('.foo', {
+            '&:hover': {
+                color: 'tomato'
+            },
+            '& .bar': {
+                color: 'tomato'
+            },
+        });
+
+        var css1 = nano.putRaw.mock.calls[0][0].replace(/ +(?= )/g,'');
+        var css2 = nano.putRaw.mock.calls[1][0].replace(/ +(?= )/g,'');
+
+        expect(css1.includes('.foo:hover')).toBe(true);
+        expect(css2.includes('.foo .bar')).toBe(true);
     });
 
-    it('expands & operand before and preserves spaces', () => {
-        expect(interpolateSelectors(['.one', '.two'], '& .test')).toBe('.one .test,.two .test');
+    it('expands multiple & operands', function () {
+        var nano = createNano();
+
+        nano.putRaw = jest.fn();
+        nano.put('.foo', {
+            '& + &': {
+                color: 'tomato'
+            },
+        });
+
+        var css1 = nano.putRaw.mock.calls[0][0].replace(/ +(?= )/g,'');
+
+        expect(css1.includes('.foo + .foo')).toBe(true);
     });
-    */
 });
diff --git a/addon/nesting.js b/addon/nesting.js
@@ -7,20 +7,16 @@ exports.addon = function (renderer) {
         var selectors = selector.split(',');
         var len1 = parents.length;
         var len2 = selectors.length;
-        var i, j, part1, part2, sel, pos, parent, replacedSelector;
+        var i, j, sel, pos, parent, replacedSelector;
 
         for (i = 0; i < len2; i++) {
             sel = selectors[i];
             pos = sel.indexOf('&');
 
             if (pos > -1) {
-                part1 = sel.substr(0, pos);
-                part2 = sel.substr(pos + 1);
-
                 for (j = 0; j < len1; j++) {
                     parent = parents[j];
-                    replacedSelector = part1 + parent + part2;
-
+                    replacedSelector = sel.replace(/&/g, parent);
                     result.push(replacedSelector);
                 }
             } else {