handling selectors with white space

__snapshots__/transform.test.js.snap

@@ -138,6 +138,21 @@ export default css\`
 "
 `;
 
+exports[`transform double spaced selectors 1`] = `
+"import { css } from '@emotion/core';
+import { agentBoxBackgroundColor } from '../variables';
+
+export const agentDetails = css\`
+  background-color: \${agentBoxBackgroundColor};
+\`;
+
+export const carouselFeCarouselBackwardsCarouselFeCarouselForward = css\`
+  width: 50px;
+  background: none;
+\`;
+"
+`;
+
 exports[`transform exports placeholder if its not being used in the file 1`] = `
 "import { css } from '@emotion/core';
 
@@ -377,6 +392,27 @@ export const foo = css\`
 "
 `;
 
+exports[`transform nested selector for multiple classes 1`] = `
+"import { css } from '@emotion/core';
+
+export const bar = css\`
+  color: red;
+\`;
+
+const barWhizzWhizzBar = css\`
+  color: pink;
+\`;
+
+export const barWhizz = css\`
+  \${barWhizzWhizzBar};
+\`;
+
+export const whizzBar = css\`
+  \${barWhizzWhizzBar};
+\`;
+"
+`;
+
 exports[`transform nested with state 1`] = `
 "import { css } from '@emotion/core';
 
@@ -706,6 +742,21 @@ export default css\`
 "
 `;
 
+exports[`transform spaced selectors 1`] = `
+"import { css } from '@emotion/core';
+import { agentBoxBackgroundColor } from '../variables';
+
+export const agentDetails = css\`
+  background-color: \${agentBoxBackgroundColor};
+\`;
+
+export const feCarouselForward = css\`
+  width: 50px;
+  background: none;
+\`;
+"
+`;
+
 exports[`transform top level vars 1`] = `
 "export default '42px';
 "

transform.js

@@ -122,6 +122,21 @@ const processRoot = (root, filePath) => {
   root.classes = new Map();
   root.usesFeBraryVars = false;
 
+  // maybe use /S
+  root.walkRules(/ \./, (rule) => {
+    if (rule.selector.includes(',')) return;
+
+    const rules = rule.selector.split(' ');
+    const last = rules[rules.length - 1];
+
+    const { nodes } = rule;
+
+    const newRule = postcss.rule({ selector: last });
+    newRule.append(nodes);
+    root.append(rule, newRule);
+    rule.remove();
+  });
+
   // move nested var declarations to top
   root.walkDecls(/^\$/, (decl) => {
     if (decl.parent !== root) {
@@ -135,7 +150,8 @@ const processRoot = (root, filePath) => {
     }
   });
 
-  root.walkRules(/^\..+\./, (rule) => {
+  // maybe use /S
+  root.walkRules(/^\.[a-zA-Z0-9_-]+\./, (rule) => {
     const classes = rule.selector.split('.').filter(Boolean);
 
     // need to pick a winning class, going to arbitrarily pick the last
@@ -148,7 +164,7 @@ const processRoot = (root, filePath) => {
 
     const classes = postcss.list.comma(rule.selector);
 
-    if (!classes.every(classStr => classStr.startsWith('.'))) return;
+    if (!classes.every(classStr => classStr.startsWith('.') && !classStr.includes(' '))) return;
 
     const sharedPlaceholder = classes
       .map(selectorToLiteral)
@@ -163,6 +179,10 @@ const processRoot = (root, filePath) => {
 
     rule.selector = newSelector;
 
+    rule.remove();
+
+    root.prepend(rule);
+
     classes.forEach((selector) => {
       const placeHolderAtRule = postcss.atRule({ name: 'extend', params: newSelector });
 

transform.test.js

@@ -680,6 +680,21 @@ describe('transform', () => {
     ).toMatchSnapshot();
   });
 
+  it('nested selector for multiple classes', () => {
+    expect(
+      transform(`
+        .bar {
+          color: red;
+
+          .foo__bar-whizz,
+          .foo__whizz-bar {
+            color: pink;
+          }
+        }
+      `),
+    ).toMatchSnapshot();
+  });
+
   it('selector for multiple classes with existing at top level', () => {
     expect(
       transform(`
@@ -746,4 +761,82 @@ describe('transform', () => {
         `),
     ).toMatchSnapshot();
   });
+
+  it.skip('no overrides and absence of decls', () => {
+    expect(
+      transform(`
+        .foo {
+          color: pink;
+
+          .listing-details__agent-details-agent-avatar {
+            &.experiment-enabled {
+              border-color: $agent-avatar-border-experiment-color;
+              width: 72px;
+              height: 72px;
+            }
+          }
+        }
+
+        .listing-details__agent-details-agent-avatar {
+          color: black;
+        }
+      `),
+    ).toMatchSnapshot();
+  });
+
+  it('spaced selectors', () => {
+    expect(
+      transform(`
+        .listing-details__agent-details {
+          background-color: $agent-box-background-color;
+
+          .carousel .fe-carousel_forward {
+            width: 50px;
+            background: none;
+          }
+        }
+      `),
+    ).toMatchSnapshot();
+  });
+
+  it('double spaced selectors', () => {
+    expect(
+      transform(`
+        .listing-details__agent-details {
+          background-color: $agent-box-background-color;
+
+          .carousel .fe-carousel_backwards,
+          .carousel .fe-carousel_forward {
+            width: 50px;
+            background: none;
+          }
+        }
+      `),
+    ).toMatchSnapshot();
+  });
+
+  it.skip('foo', () => {
+    expect(
+      transform(`
+        @mixin platinum-button($colour) {
+          .listing-details__agent-details-platinum-button {
+            color: $colour;
+            border: 1px solid $colour;
+
+            .listing-details__cta-icon {
+              color: $colour;
+            }
+
+            &:hover {
+              background-color: rgba($agent-box-contact-button-background-color, 0.1);
+            }
+          }
+        }
+
+        .listing-details__agent-details {
+          @include platinum-button($agent-box-contact-button-background-color);
+        }
+      `),
+    ).toMatchSnapshot();
+  });
 });