Fix: node-sass 4.11 doesn't like percent placeholders.

The current replacement strategy is broken in  node-sass v4.11
for placeholders which are immediately followed by a percent (%) character.

The fix is to simply incorporate the percent char into a new, specifically named, replacement tag.

Author: jamestalmage

index.js

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

test.js

@@ -30,6 +30,16 @@ describe('styled-jsx-plugin-sass', () => {
     )
   })
 
+  it("works with percent placeholders", () => {
+    assert.equal(
+      plugin('p { width: %%styled-jsx-placeholder-0%%%; }', {}).trim(),
+      cleanup(`
+        p {
+          width: %%styled-jsx-placeholder-0%%%; }
+      `)
+    )
+  })
+
   it("works with placeholders in css functions", () => {
     assert.equal(
       plugin('div { grid-template-columns: repeat(%%styled-jsx-placeholder-0%%, calc(%%styled-jsx-placeholder-1%%% - %%styled-jsx-placeholder-2%%px)); }', {}).trim(),