Fix SSR with _ in label (#882)

* Add _ to regex * Add test for _ in label
emotion-js · Sep 30, 2018 · a2b5e5d · a2b5e5d
1 parent b4a1afe
commit a2b5e5d
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 62 deletions.
diff --git a/packages/create-emotion-server/src/extract-critical.js b/packages/create-emotion-server/src/extract-critical.js
@@ -4,7 +4,7 @@ import type { Emotion } from 'create-emotion'
 const createExtractCritical = (emotion: Emotion) => (html: string) => {
   // parse out ids from html
   // reconstruct css/rules/cache to pass
-  let RGX = new RegExp(`${emotion.caches.key}-([a-zA-Z0-9-]+)`, 'gm')
+  let RGX = new RegExp(`${emotion.caches.key}-([a-zA-Z0-9-_]+)`, 'gm')
 
   let o = { html, ids: [], css: '' }
   let match

diff --git a/packages/create-emotion-server/src/inline.js b/packages/create-emotion-server/src/inline.js
@@ -16,7 +16,7 @@ const createRenderStylesToString = (emotion: Emotion, nonceString: string) => (
   html: string
 ): string => {
   const { inserted, key: cssKey, registered } = emotion.caches
-  const regex = new RegExp(`<|${cssKey}-([a-zA-Z0-9-]+)`, 'gm')
+  const regex = new RegExp(`<|${cssKey}-([a-zA-Z0-9-_]+)`, 'gm')
 
   const seen = {}
 

diff --git a/packages/create-emotion-server/src/stream.js b/packages/create-emotion-server/src/stream.js
@@ -20,7 +20,7 @@ const createRenderStylesToNodeStream = (
 
         let match
         let fragment = data.toString()
-        let regex = new RegExp(`${emotion.caches.key}-([a-zA-Z0-9-]+)`, 'gm')
+        let regex = new RegExp(`${emotion.caches.key}-([a-zA-Z0-9-_]+)`, 'gm')
         while ((match = regex.exec(fragment)) !== null) {
           if (match !== null && insed[match[1]] === undefined) {
             ids[match[1]] = true

diff --git a/packages/create-emotion/test/__snapshots__/inline.test.js.snap b/packages/create-emotion/test/__snapshots__/inline.test.js.snap
@@ -7,12 +7,12 @@ exports[`hydration only inserts rules that are not in the critical css 1`] = `
 >
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
 </style>
-<style data-emotion-some-key="4xq7ky"
+<style data-emotion-some-key="ow9r3f-Something_Main"
        nonce="some-nonce"
 >
-  .some-key-4xq7ky{color:hotpink;display:flex;}.some-key-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .some-key-ow9r3f-Something_Main{color:hotpink;display:flex;}.some-key-ow9r3f-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="some-key-4xq7ky e126fyao0"
+<main class="some-key-ow9r3f-Something_Main e126fyao0"
       data-reactroot
 >
   <style data-emotion-some-key="z382ib"
@@ -129,12 +129,12 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   justify-content: center;
 }
 
-.some-key-4xq7ky {
+.some-key-ow9r3f-Something_Main {
   color: hotpink;
   display: flex;
 }
 
-.some-key-4xq7ky:hover {
+.some-key-ow9r3f-Something_Main:hover {
   color: white;
   background-color: lightgray;
   border-color: aqua;
@@ -2370,12 +2370,12 @@ exports[`renderStylesToString renders styles with ids 1`] = `
 >
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
 </style>
-<style data-emotion-some-key="4xq7ky"
+<style data-emotion-some-key="ow9r3f-Something_Main"
        nonce="some-nonce"
 >
-  .some-key-4xq7ky{color:hotpink;display:flex;}.some-key-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .some-key-ow9r3f-Something_Main{color:hotpink;display:flex;}.some-key-ow9r3f-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="some-key-4xq7ky e126fyao0"
+<main class="some-key-ow9r3f-Something_Main e126fyao0"
       data-reactroot
 >
   <style data-emotion-some-key="z382ib"
@@ -2401,12 +2401,12 @@ exports[`renderStylesToString renders styles with ids 2`] = `
 >
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
 </style>
-<style data-emotion-some-key="4xq7ky"
+<style data-emotion-some-key="ow9r3f-Something_Main"
        nonce="some-nonce"
 >
-  .some-key-4xq7ky{color:hotpink;display:flex;}.some-key-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .some-key-ow9r3f-Something_Main{color:hotpink;display:flex;}.some-key-ow9r3f-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="some-key-4xq7ky e126fyao0"
+<main class="some-key-ow9r3f-Something_Main e126fyao0"
       data-reactroot
 >
   <div>

diff --git a/packages/create-emotion/test/__snapshots__/ssr-multiple-create-calls.test.js.snap b/packages/create-emotion/test/__snapshots__/ssr-multiple-create-calls.test.js.snap
@@ -5,10 +5,10 @@ exports[`multiple createEmotion calls with the same context are the same 1`] = `
 <style data-emotion-css="lu7y12 16qlhaj hbhpyh">
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
 </style>
-<style data-emotion-css="4xq7ky">
-  .css-4xq7ky{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+<style data-emotion-css="ow9r3f-Something_Main">
+  .css-ow9r3f-Something_Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-ow9r3f-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="css-4xq7ky e126fyao0"
+<main class="css-ow9r3f-Something_Main e126fyao0"
       data-reactroot
 >
   <style data-emotion-css="z382ib">