match comma-separated placeholders (#14)

Author: danielgamage

index.js

@@ -2,7 +2,7 @@ const sass = require('node-sass')
 
 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) =>
@@ -14,7 +14,7 @@ module.exports = (css, settings) => {
   }, settings.sassOptions)).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

@@ -28,6 +28,16 @@ describe('styled-jsx-plugin-sass', () => {
     )
   })
 
+  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(),
+      cleanup(`
+        div {
+          grid-template-columns: repeat(%%styled-jsx-placeholder-0%%, calc(%%styled-jsx-placeholder-1%%% - %%styled-jsx-placeholder-2%%px)); }
+      `)
+    )
+  })
+
   it('works with placeholders', () => {
     assert.equal(
       plugin(`