From 03856a16bc1336323ce5bd7735b0de0ef9c02570 Mon Sep 17 00:00:00 2001
From: Luan Raithz Machado <luanraithz@gmail.com>
Date: Thu, 29 Oct 2020 16:29:53 -0300
Subject: [PATCH] Added validation for expressions ending with nothing instead
 of a ';'

---
 .../__snapshots__/cssNamespace.test.js.snap   | 28 +++++++++++++++++++
 src/tests/cssNamespace.test.js                | 10 +++++++
 .../simple_composed_styled_component.js       |  9 ++++++
 src/visitors/cssNamespace.js                  |  4 ++-
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/fixtures/simple_composed_styled_component.js

diff --git a/src/tests/__snapshots__/cssNamespace.test.js.snap b/src/tests/__snapshots__/cssNamespace.test.js.snap
index 7f718a6..5c0bd46 100644
--- a/src/tests/__snapshots__/cssNamespace.test.js.snap
+++ b/src/tests/__snapshots__/cssNamespace.test.js.snap
@@ -99,6 +99,34 @@ export default MyStyledComponent;
 "
 `;
 
+exports[`styled-components-css-namespace adds workspace to simple component with nested css: adds workspace to simple component with nested css 1`] = `
+"
+const styled = { div() {} };
+
+const padding = 'padding: 2px 2px 2px 2px;';
+
+const MyStyledComponent = styled.div\`
+  \${padding}
+\`;
+
+export default MyStyledComponent;
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const styled = {
+  div() {}
+
+};
+const padding = 'padding: 2px 2px 2px 2px;';
+const MyStyledComponent = styled.div\`
+.class-wrapper .other-wrapper & {
+  \${padding}
+}
+\`;
+export default MyStyledComponent;
+"
+`;
+
 exports[`styled-components-css-namespace does not add extra selectors to child helper styles: does not add extra selectors to child helper styles 1`] = `
 "
 const styled = { div() {} };
diff --git a/src/tests/cssNamespace.test.js b/src/tests/cssNamespace.test.js
index 7c79ca1..764ffcb 100644
--- a/src/tests/cssNamespace.test.js
+++ b/src/tests/cssNamespace.test.js
@@ -156,6 +156,16 @@ pluginTester({
         __dirname,
         './fixtures/reordered-template-expressions.js'
       )
+    },
+    {
+      title: 'adds workspace to simple component with nested css',
+      pluginOptions: {
+        cssNamespace: '.class-wrapper .other-wrapper'
+      },
+      fixture: path.join(
+        __dirname,
+        './fixtures/simple_composed_styled_component.js'
+      )
     }
 
     /**
diff --git a/src/tests/fixtures/simple_composed_styled_component.js b/src/tests/fixtures/simple_composed_styled_component.js
new file mode 100644
index 0000000..beec7c0
--- /dev/null
+++ b/src/tests/fixtures/simple_composed_styled_component.js
@@ -0,0 +1,9 @@
+const styled = { div() {} };
+
+const padding = 'padding: 2px 2px 2px 2px;';
+
+const MyStyledComponent = styled.div`
+  ${padding}
+`;
+
+export default MyStyledComponent;
diff --git a/src/visitors/cssNamespace.js b/src/visitors/cssNamespace.js
index a309b6e..fb3fb6d 100644
--- a/src/visitors/cssNamespace.js
+++ b/src/visitors/cssNamespace.js
@@ -81,7 +81,9 @@ export default (path, state) => {
           rawValueWithoutWhiteSpace.endsWith('{') ||
           rawValueWithoutWhiteSpace.endsWith('}') ||
           rawValueWithoutWhiteSpace.endsWith(';')) &&
-        (!nextQuasi || (nextQuasi && nextQuasi.value.raw.startsWith(';')))
+        (!nextQuasi ||
+          (nextQuasi.value.raw.startsWith(';') ||
+            nextQuasi.value.raw.trim() === ''))
       ) {
         return `${rawValue}${EXPRESSION}-${i}: ${FAKE_VALUE}`;
       }