From 2ace23f0dba88d790359a12cb6eafaf0540e62a0 Mon Sep 17 00:00:00 2001
From: James Talmage <james@talmage.io>
Date: Fri, 4 Jan 2019 22:05:20 -0500
Subject: [PATCH] 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.
---
 index.js | 12 ++++++++++++
 test.js  | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/index.js b/index.js
index 4a4a843..395d43f 100644
--- a/index.js
+++ b/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}%%`
     )
diff --git a/test.js b/test.js
index fc9d3dd..847a2f0 100644
--- a/test.js
+++ b/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(),