resolve comments

emotion-js · Apr 22, 2021 · 124cf3f · 124cf3f
1 parent 00ce87b
commit 124cf3f
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 18 deletions.
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -35,6 +35,8 @@ You can also use the advanced integration, it requires more work but does not ha
 
 ### On server
 
+#### When using `@emotion/react`
+
 ```jsx
 import { CacheProvider } from '@emotion/react'
 import { renderToString } from 'react-dom/server'
@@ -43,7 +45,7 @@ import createCache from '@emotion/cache'
 
 const key = 'custom'
 const cache = createCache({ key })
-const { extractCriticalToChunks, constructStyleTags } = createEmotionServer(cache)
+const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)
 
 let element = (
   <CacheProvider value={cache}>
@@ -63,7 +65,7 @@ res
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>My site</title>
-    ${constructStyleTags({ html, styles })}
+    ${constructStyleTagsFromChunks({ html, styles })}
 </head>
 <body>
     <div id="root">${html}</div>
@@ -73,7 +75,7 @@ res
 </html>`);
 ```
 
-#### Deprecated
+#### When using `@emotion/css`
 
 ```jsx
 import { CacheProvider } from '@emotion/react'

diff --git a/packages/react/__tests__/compat/server.js b/packages/react/__tests__/compat/server.js
@@ -41,7 +41,7 @@ test('extracted rules have correct keys when dealing with multiple caches', () =
   )
 
   let cache2 = createCache({ key: 'ssr-second-key' })
-  let { extractCritical: extractCriticalToChunks } = createEmotionServer(cache2)
+  let { extractCritical: extractCritical2 } = createEmotionServer(cache2)
   let ele2 = (
     <CacheProvider value={cache2}>
       <div css={{ color: 'rebeccapurple' }} />
@@ -50,6 +50,6 @@ test('extracted rules have correct keys when dealing with multiple caches', () =
 
   expect([
     extractCritical1(renderToString(ele1)),
-    extractCriticalToChunks(renderToString(ele2))
+    extractCritical2(renderToString(ele2))
   ]).toMatchSnapshot()
 })
diff --git a/...c/create-instance/construct-style-tags.js → ...tance/construct-style-tags-from-chunks.js b/...c/create-instance/construct-style-tags.js → ...tance/construct-style-tags-from-chunks.js
@@ -2,7 +2,7 @@
 import type { EmotionCache } from '@emotion/utils'
 import { generateStyleTag } from './utils'
 
-const createConstructStyleTags = (
+const createConstructStyleTagsFromChunks = (
   cache: EmotionCache,
   nonceString: string
 ) => (criticalData: {
@@ -23,4 +23,4 @@ const createConstructStyleTags = (
   return styleTagsString
 }
 
-export default createConstructStyleTags
+export default createConstructStyleTagsFromChunks
diff --git a/packages/server/src/create-instance/extract-critical-to-chunks.js b/packages/server/src/create-instance/extract-critical-to-chunks.js
@@ -1,7 +1,9 @@
 // @flow
 import type { EmotionCache } from '@emotion/utils'
 
-const extractCriticalToChunks = (cache: EmotionCache) => (html: string) => {
+const createExtractCriticalToChunks = (cache: EmotionCache) => (
+  html: string
+) => {
   // parse out ids from html
   // reconstruct css/rules/cache to pass
   let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')
@@ -48,4 +50,4 @@ const extractCriticalToChunks = (cache: EmotionCache) => (html: string) => {
   return o
 }
 
-export default extractCriticalToChunks
+export default createExtractCriticalToChunks
diff --git a/packages/server/src/create-instance/index.js b/packages/server/src/create-instance/index.js
@@ -1,10 +1,10 @@
 // @flow
 import type { EmotionCache } from '@emotion/utils'
 import createExtractCritical from './extract-critical'
-import createextractCriticalToChunks from './extract-critical-to-chunks'
+import createExtractCriticalToChunks from './extract-critical-to-chunks'
 import createRenderStylesToString from './inline'
 import createRenderStylesToStream from './stream'
-import createConstructStyleTags from './construct-style-tags'
+import createConstructStyleTagsFromChunks from './construct-style-tags-from-chunks'
 export default function(cache: EmotionCache) {
   if (cache.compat !== true) {
     // is this good? should we do this automatically?
@@ -14,9 +14,12 @@ export default function(cache: EmotionCache) {
   const nonceString = cache.nonce !== undefined ? ` nonce="${cache.nonce}"` : ''
   return {
     extractCritical: createExtractCritical(cache),
-    extractCriticalToChunks: createextractCriticalToChunks(cache),
+    extractCriticalToChunks: createExtractCriticalToChunks(cache),
     renderStylesToString: createRenderStylesToString(cache, nonceString),
     renderStylesToNodeStream: createRenderStylesToStream(cache, nonceString),
-    constructStyleTags: createConstructStyleTags(cache, nonceString)
+    constructStyleTagsFromChunks: createConstructStyleTagsFromChunks(
+      cache,
+      nonceString
+    )
   }
 }
diff --git a/packages/server/test/extract-critical-to-chunks.test.js b/packages/server/test/extract-critical-to-chunks.test.js
@@ -6,7 +6,7 @@
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import type { Emotion } from '@emotion/css/create-instance'
-import { prettifyCritical2 } from './util'
+import { prettifyCriticalChunks } from './util'
 
 let emotion = require('@emotion/css')
 let reactEmotion = require('@emotion/styled')
@@ -67,8 +67,8 @@ describe('extractCriticalToChunks', () => {
   )
 
   test('returns static css', () => {
-    expect(prettifyCritical2(page1Critical)).toMatchSnapshot()
-    expect(prettifyCritical2(page2Critical)).toMatchSnapshot()
+    expect(prettifyCriticalChunks(page1Critical)).toMatchSnapshot()
+    expect(prettifyCriticalChunks(page2Critical)).toMatchSnapshot()
   })
 
   test('generates correct style tags using constructStyleTags', () => {

diff --git a/packages/server/test/util.js b/packages/server/test/util.js
@@ -170,7 +170,7 @@ export const prettifyCritical = ({
   }
 }
 
-export const prettifyCritical2 = ({
+export const prettifyCriticalChunks = ({
   html,
   styles
 }: {

diff --git a/packages/server/types/create-instance.d.ts b/packages/server/types/create-instance.d.ts
@@ -17,9 +17,10 @@ export interface EmotionCriticalToChunks {
 
 export interface EmotionServer {
   extractCritical(html: string): EmotionCritical
+  extractCriticalToChunks(html: string): EmotionCriticalToChunks
   renderStylesToString(html: string): string
   renderStylesToNodeStream(): NodeJS.ReadWriteStream
-  constructStyleTags(html: string): EmotionCriticalToChunks
+  constructStyleTagsFromChunks(criticalData: EmotionCriticalToChunks): string
 }
 
 export default function createEmotionServer(cache: EmotionCache): EmotionServer
-Original file line number
+Diff line change
@@ Expand Up / @@ -170,7 +170,7 @@ export const prettifyCritical = ({ @@
       }
     }
-    export const prettifyCritical2 = ({
+    export const prettifyCriticalChunks = ({
       html,
       styles
     }: {
@@ Expand Down @@