Repository: tkh44/emotion
Pull request #177 (2017-07-25 10:48:01)

fresh regex every time extractCritical is called
<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**: Use a fresh regex every time `extractCritical` is called

<!-- Why are these changes necessary? -->
**Why**: regexes are stateful, and the current method would break critical css extraction unexpectedly because of previous runs

<!-- How were these changes implemented? -->
**How**: the regex declaration was brought inside the function

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation
- [ ] Tests
- [ ] Code complete

<!-- feel free to add additional comments -->


codecov-io: # [Codecov](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=h1) Report
> Merging [#177](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=desc) into [master](https://codecov.io/gh/tkh44/emotion/commit/060953e53b8961cadb6eee145c9e8481b2c1da99?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/tkh44/emotion/pull/177/graphs/tree.svg?width=650&token=B1bWuYNE2t&height=150&src=pr)](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##           master     #177   +/-   ##
=======================================
  Coverage   89.08%   89.08%           
=======================================
  Files          22       22           
  Lines         843      843           
  Branches      219      219           
=======================================
  Hits          751      751           
  Misses         70       70           
  Partials       22       22
```


| [Impacted Files](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/server.js](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=tree#diff-c3JjL3NlcnZlci5qcw==) | `100% <100%> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=footer). Last update [060953e...737e2b3](https://codecov.io/gh/tkh44/emotion/pull/177?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/src/server.js b/src/server.js
index 0a7cce7d..8d653b12 100644
--- a/src/server.js
+++ b/src/server.js
@@ -1,8 +1,6 @@
 import { sheet, inserted } from './index'
 import { keys, forEach } from './utils'
 
-const RGX = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm
-
 export {
   flush,
   css,
@@ -16,6 +14,8 @@ export {
 export function extractCritical (html) {
   // parse out ids from html
   // reconstruct css/rules/cache to pass
+  const RGX = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm
+
   let o = { html, ids: [], css: '', rules: [] }
   let match
   let ids = {}
@@ -27,7 +27,9 @@ export function extractCritical (html) {
 
   o.rules = sheet.sheet.cssRules.slice().filter(x => {
     let match = RGX.exec(x.cssText)
-    return match == null || ids[match[1]] || false
+    const ret = match == null || ids[match[1]] || false
+    RGX.lastIndex = 0
+    return ret
   })
 
   o.ids = keys(inserted).filter(id => !!ids[id])


Test patch:
diff --git a/test/__snapshots__/server.test.js.snap b/test/__snapshots__/server.test.js.snap
index 4f5c996b..41058727 100644
--- a/test/__snapshots__/server.test.js.snap
+++ b/test/__snapshots__/server.test.js.snap
@@ -21,3 +21,21 @@ Object {
   ],
 }
 `;
+
+exports[`extractCritical returns static css 2`] = `
+Object {
+  "css": ".no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-71uu79{display:-webkit-box; display: -ms-flexbox; display: flex;}",
+  "html": "<main class=\\"css-71uu79\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1826086624\\"><div data-reactid=\\"2\\">Hello</div></main>",
+  "ids": Array [
+    "71uu79",
+  ],
+  "rules": Array [
+    Object {
+      "cssText": ".no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}",
+    },
+    Object {
+      "cssText": ".css-71uu79{display:-webkit-box; display: -ms-flexbox; display: flex;}",
+    },
+  ],
+}
+`;
diff --git a/test/server.test.js b/test/server.test.js
index 44f7ea37..7b193996 100644
--- a/test/server.test.js
+++ b/test/server.test.js
@@ -16,7 +16,7 @@ const Image = styled.img`
   border-radius: 50%;
   height: 50px;
   width: 50px;
-  background-color: ${color}
+  background-color: ${color};
 `
 
 // this will not be included since it's not used
@@ -34,15 +34,21 @@ injectGlobal`
   }
 `
 
-const Page = () =>
+const Page1 = () =>
   <Main>
     <Image size={30} />
     <Image size={100} />
     <Image />
   </Main>
 
+const Page2 = () =>
+  <Main>
+    <div>Hello</div>
+  </Main>
+
 describe('extractCritical', () => {
   test('returns static css', () => {
-    expect(extractCritical(renderToString(<Page />))).toMatchSnapshot()
+    expect(extractCritical(renderToString(<Page1 />))).toMatchSnapshot()
+    expect(extractCritical(renderToString(<Page2 />))).toMatchSnapshot()
   })
 })