Better matchers for placeholders (#9)

Fixes #8

Author: Tomekmularczyk

index.js

@@ -2,11 +2,8 @@ const sass = require('node-sass')
 
 module.exports = (css, settings) => {
   const cssWithPlaceholders = css
-    .replace(/:\s*%%styled-jsx-placeholder-(\d+)%%/g, (_, id) =>
-      `: styled-jsx-placeholder-${id}`
-    )
-    .replace(/%%styled-jsx-placeholder-(\d+)%%\s*{/g, (_, id) =>
-      `styled-jsx-placeholder-${id} {`
+    .replace(/%%styled-jsx-placeholder-(\d+)%%(\w*\s*[);{])/g, (_, id, p1) =>
+      `styled-jsx-placeholder-${id}-${p1}`
     )
     .replace(/%%styled-jsx-placeholder-(\d+)%%/g, (_, id) =>
       `/*%%styled-jsx-placeholder-${id}%%*/`
@@ -17,11 +14,8 @@ module.exports = (css, settings) => {
   }, settings.sassOptions)).css.toString()
 
   return preprocessed
-    .replace(/:\s*styled-jsx-placeholder-(\d+)/g, (_, id) =>
-      `: %%styled-jsx-placeholder-${id}%%`
-    )
-    .replace(/styled-jsx-placeholder-(\d+)\s*{/g, (_, id) =>
-      `%%styled-jsx-placeholder-${id}%% {`
+    .replace(/styled-jsx-placeholder-(\d+)-(\w*\s*[);{])/g, (_, id, p1) =>
+      `%%styled-jsx-placeholder-${id}%%${p1}`
     )
     .replace(/\/\*%%styled-jsx-placeholder-(\d+)%%\*\//g, (_, id) =>
       `%%styled-jsx-placeholder-${id}%%`

test.js

@@ -30,13 +30,18 @@ describe('styled-jsx-plugin-sass', () => {
 
   it('works with placeholders', () => {
     assert.equal(
-      plugin('p { img { display: block } color: %%styled-jsx-placeholder-0%%; } %%styled-jsx-placeholder-1%%', {}).trim(),
+      plugin(`
+        p { img { display: block } color: %%styled-jsx-placeholder-0%%; border-bottom: 1px solid %%styled-jsx-placeholder-0%%; }
+        %%styled-jsx-placeholder-1%%`,
+        {}
+      ).trim(),
       cleanup(`
         p {
-          color: %%styled-jsx-placeholder-0%%; }
+          color: %%styled-jsx-placeholder-0%%;
+          border-bottom: 1px solid %%styled-jsx-placeholder-0%%; }
           p img {
             display: block; }
-
+        
         %%styled-jsx-placeholder-1%%
       `)
     )
@@ -50,7 +55,7 @@ describe('styled-jsx-plugin-sass', () => {
           @media %%styled-jsx-placeholder-0%% { color: red; } 
           @media (min-width: %%styled-jsx-placeholder-0%%px) { color: blue; }
           @media (min-width: %%styled-jsx-placeholder-0%%) { color: yellow; }
-        }`, 
+        }`,
         {}
       ).trim(),
       cleanup(`