fix placeholders with css !important flag (#16)

Author: Tomekmularczyk

index.js

@@ -3,7 +3,7 @@ const path = require('path')
 
 module.exports = (css, settings) => {
   const cssWithPlaceholders = css
-    .replace(/%%styled-jsx-placeholder-(\d+)%%(\w*\s*[),;{])/g, (_, id, p1) =>
+    .replace(/%%styled-jsx-placeholder-(\d+)%%(\w*\s*[),;!{])/g, (_, id, p1) =>
       `styled-jsx-placeholder-${id}-${p1}`
     )
     .replace(/%%styled-jsx-placeholder-(\d+)%%/g, (_, id) =>
@@ -22,7 +22,7 @@ module.exports = (css, settings) => {
   }, settings.sassOptions, { includePaths })).css.toString()
 
   return preprocessed
-    .replace(/styled-jsx-placeholder-(\d+)-(\w*\s*[),;{])/g, (_, id, p1) =>
+    .replace(/styled-jsx-placeholder-(\d+)-(\w*\s*[),;!{])/g, (_, id, p1) =>
       `%%styled-jsx-placeholder-${id}%%${p1}`
     )
     .replace(/\/\*%%styled-jsx-placeholder-(\d+)%%\*\//g, (_, id) =>

test.js

@@ -43,16 +43,21 @@ describe('styled-jsx-plugin-sass', () => {
   it('works with placeholders', () => {
     assert.equal(
       plugin(`
-        p { img { display: block } color: %%styled-jsx-placeholder-0%%; border-bottom: 1px solid %%styled-jsx-placeholder-0%%; }
+        p { 
+          img { display: block } color: %%styled-jsx-placeholder-0%%; border-bottom: 1px solid %%styled-jsx-placeholder-1%%; 
+          em { color: %%styled-jsx-placeholder-2%% !important; }
+        }
         %%styled-jsx-placeholder-1%%`,
         {}
       ).trim(),
       cleanup(`
         p {
           color: %%styled-jsx-placeholder-0%%;
-          border-bottom: 1px solid %%styled-jsx-placeholder-0%%; }
+          border-bottom: 1px solid %%styled-jsx-placeholder-1%%; }
           p img {
             display: block; }
+          p em {
+            color: %%styled-jsx-placeholder-2%% !important; }
 
         %%styled-jsx-placeholder-1%%
       `)