fix: variable interpolation (#102)

Thream · Nov 21, 2021 · 18731a8 · 18731a8
1 parent 6d2bf1d
commit 18731a8
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 4 deletions.
diff --git 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
@@ -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(