Bugfix/media-query and selectors placeholders (#6)

Fixes #4 and #7

Author: Tomekmularczyk

index.js

@@ -2,8 +2,11 @@ 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(/:\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+)%%/g, (_, id) =>
       `/*%%styled-jsx-placeholder-${id}%%*/`
@@ -14,9 +17,12 @@ module.exports = (css, settings) => {
   }, settings.sassOptions)).css.toString()
 
   return preprocessed
-    .replace(/\:\s*styled-jsx-placeholder-(\d+)\(\)/g, (_, id) =>
+    .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+)%%\*\//g, (_, id) =>
       `%%styled-jsx-placeholder-${id}%%`
     )

test.js

@@ -18,6 +18,16 @@ describe('styled-jsx-plugin-sass', () => {
     )
   })
 
+  it("does not add space after variable placeholder", () => {
+    assert.equal(
+      plugin('p { img { color: %%styled-jsx-placeholder-0%%px; } }', {}).trim(),
+      cleanup(`
+        p img {
+          color: %%styled-jsx-placeholder-0%%px; }
+      `)
+    )
+  })
+
   it('works with placeholders', () => {
     assert.equal(
       plugin('p { img { display: block } color: %%styled-jsx-placeholder-0%%; } %%styled-jsx-placeholder-1%%', {}).trim(),
@@ -32,6 +42,45 @@ describe('styled-jsx-plugin-sass', () => {
     )
   })
 
+  it('works with media queries placeholders', () => {
+    assert.equal(
+      plugin(`
+        p { 
+          display: block; 
+          @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(`
+        p {
+          display: block; }
+          @media %%styled-jsx-placeholder-0%% {
+            p {
+              color: red; } }
+          @media (min-width: %%styled-jsx-placeholder-0%%px) {
+            p {
+              color: blue; } }
+          @media (min-width: %%styled-jsx-placeholder-0%%) {
+            p {
+              color: yellow; } }  
+      `)
+    )
+  })
+
+  it('works with selectors placeholders', () => {
+    assert.equal(
+      plugin('p { display: block; %%styled-jsx-placeholder-0%% { color: red; } }', {}).trim(),
+      cleanup(`
+        p {
+          display: block; }
+          p %%styled-jsx-placeholder-0%% {
+            color: red; }
+      `)
+    )
+  })
+
   it('works with @import', () => {
     assert.equal(
       plugin('@import "fixture"; p { color: red }', {}).trim(),
@@ -57,5 +106,5 @@ describe('styled-jsx-plugin-sass', () => {
           padding: 0.3em; }
       `)
     )
-  });
+  })
 })