Replace styled-jsx-placeholder patterns (#2)

The original version mistakenly matched `%%styled-jsx-expression-XXX%%` while it should have matched `%%styled-jsx-placeholder-XXX%%`
giuseppeg · Oct 18, 2017 · 0a5dcb6 · 0a5dcb6
1 parent 1ccce13
commit 0a5dcb6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/index.js b/index.js
@@ -2,6 +2,10 @@ const loopWhile = require('deasync').loopWhile
 const processor = require('./processor')
 
 module.exports = (css, settings) => {
+  const cssWithPlaceholders = css
+    .replace(/%%styled-jsx-placeholder-(\d+)%%/g, (_, id) =>
+      `/*%%styled-jsx-placeholder-${id}%%*/`
+    )
   let processedCss
   let wait = true
 
@@ -10,7 +14,7 @@ module.exports = (css, settings) => {
     wait = false
   }
 
-  processor(css)
+  processor(cssWithPlaceholders)
     .then(resolved)
     .catch(resolved)
   loopWhile(() => wait)
@@ -20,4 +24,7 @@ module.exports = (css, settings) => {
   }
 
   return processedCss
+    .replace(/\/\*%%styled-jsx-placeholder-(\d+)%%\*\//g, (_, id) =>
+      `%%styled-jsx-placeholder-${id}%%`
+    )
 }
diff --git a/test.js b/test.js
@@ -9,10 +9,10 @@ describe('styled-jsx-plugin-postcss', () => {
     )
   })
 
-  it('works with expressions placeholders', () => {
+  it('works with placeholders', () => {
     assert.equal(
-      plugin('p { img { display: block } color: %%styled-jsx-expression-1%%; }'),
-      'p { color: %%styled-jsx-expression-1%%; } p img { display: block }'
+      plugin('p { img { display: block } color: %%styled-jsx-placeholder-0%%; } %%styled-jsx-placeholder-1%%'),
+      'p { color: %%styled-jsx-placeholder-0%%; } p img { display: block } %%styled-jsx-placeholder-1%%'
     )
   })