From 18731a8236e771257affe1f359b3f78e3ec4b6c8 Mon Sep 17 00:00:00 2001
From: SwiftWinds <12981958+SwiftWinds@users.noreply.github.com>
Date: Sat, 20 Nov 2021 23:12:23 -0800
Subject: [PATCH] fix: variable interpolation (#102)

---
 index.js |  8 +++---
 test.js  | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index 91b573f..06e1778 100644
--- a/index.js
+++ b/index.js
@@ -4,11 +4,11 @@ const stripIndent = require('strip-indent')
 module.exports = (css, settings) => {
   const cssWithPlaceholders = css
     .replace(
-      /%%styled-jsx-placeholder-(\d+)%%%(\w*\s*[),;!{])/g,
+      /%%styled-jsx-placeholder-(\d+)%%%(\w*[ ),;!{])/g,
       (_, id, p1) => `styled-jsx-percent-placeholder-${id}-${p1}`
     )
     .replace(
-      /%%styled-jsx-placeholder-(\d+)%%(\w*\s*[),;!{])/g,
+      /%%styled-jsx-placeholder-(\d+)%%(\w*[ ),;!{])/g,
       (_, id, p1) => `styled-jsx-placeholder-${id}-${p1}`
     )
     .replace(
@@ -33,11 +33,11 @@ module.exports = (css, settings) => {
 
   return preprocessed
     .replace(
-      /styled-jsx-percent-placeholder-(\d+)-(\w*\s*[),;!{])/g,
+      /styled-jsx-percent-placeholder-(\d+)-(\w*[ ),;!{])/g,
       (_, id, p1) => `%%styled-jsx-placeholder-${id}%%%${p1}`
     )
     .replace(
-      /styled-jsx-placeholder-(\d+)-(\w*\s*[),;!{])/g,
+      /styled-jsx-placeholder-(\d+)-(\w*[ ),;!{])/g,
       (_, id, p1) => `%%styled-jsx-placeholder-${id}%%${p1}`
     )
     .replace(
diff --git a/test.js b/test.js
index 804af0d..09158cf 100644
--- a/test.js
+++ b/test.js
@@ -74,6 +74,88 @@ describe('styled-jsx-plugin-sass', () => {
     )
   })
 
+  it('works with mid-statement placeholders', () => {
+    assert.strictEqual(
+      plugin(
+        `
+        div {
+          border: %%styled-jsx-placeholder-0%%px solid orangered;
+          font-size: 16px;
+        }`,
+        {}
+      ).trim(),
+      cleanup(`
+        div {
+          border: %%styled-jsx-placeholder-0%%px solid orangered;
+          font-size: 16px;
+        }
+      `)
+    )
+  })
+
+  it('works with combination of mid-statement and end-of-statement placeholders', () => {
+    assert.strictEqual(
+      plugin(
+        `
+        div {
+          border: %%styled-jsx-placeholder-0%%px solid %%styled-jsx-placeholder-1%%;
+          font-size: %%styled-jsx-placeholder-2%%px;
+        }`,
+        {}
+      ).trim(),
+      cleanup(`
+        div {
+          border: %%styled-jsx-placeholder-0%%px solid %%styled-jsx-placeholder-1%%;
+          font-size: %%styled-jsx-placeholder-2%%px;
+        }
+      `)
+    )
+  })
+
+  it('works with mid-statement percent placeholders', () => {
+    assert.strictEqual(
+      plugin(
+        `
+        div {
+          margin: %%styled-jsx-placeholder-0%%% %%styled-jsx-placeholder-1%%%;
+          border: 4px solid orangered;
+          font-size: 16px;
+        }`,
+        {}
+      ).trim(),
+      cleanup(`
+        div {
+          margin: %%styled-jsx-placeholder-0%%% %%styled-jsx-placeholder-1%%%;
+          border: 4px solid orangered;
+          font-size: 16px;
+        }
+      `)
+    )
+  })
+
+  it('works with combination of mid-statement and end-of-statement placeholders and percent placeholders', () => {
+    assert.strictEqual(
+      plugin(
+        `
+        div {
+          border: %%styled-jsx-placeholder-0%%px solid %%styled-jsx-placeholder-1%%;
+          font-size: %%styled-jsx-placeholder-2%%px;
+          margin: %%styled-jsx-placeholder-3%%% %%styled-jsx-placeholder-4%%%;
+          padding-top: %%styled-jsx-placeholder-5%%%;
+        }`,
+        {}
+      ).trim(),
+      cleanup(`
+        div {
+          border: %%styled-jsx-placeholder-0%%px solid %%styled-jsx-placeholder-1%%;
+          font-size: %%styled-jsx-placeholder-2%%px;
+          margin: %%styled-jsx-placeholder-3%%% %%styled-jsx-placeholder-4%%%;
+          padding-top: %%styled-jsx-placeholder-5%%%;
+        }
+      `)
+    )
+  })
+
   it('works with media queries placeholders', () => {
     assert.strictEqual(
       plugin(