feat($cssChunksMap): add support for sending map of css chunk names t…

…o files
faceyspacey · Jul 4, 2017 · 2c86d12 · 2c86d12
1 parent 5a36b1e
commit 2c86d12
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 4 deletions.
diff --git a/__tests__/__snapshots__/flushChunks.test.js.snap b/__tests__/__snapshots__/flushChunks.test.js.snap
@@ -3,11 +3,20 @@
 exports[`flushChunks() called as pure function babel - chunkNames 1`] = `
 Object {
   "Css": [Function],
+  "CssChunks": [Function],
   "Js": [Function],
   "Styles": [Function],
   "css": Object {
     "toString": [Function],
   },
+  "cssChunks": Object {
+    "toString": [Function],
+  },
+  "cssChunksHash": Object {
+    "chunk1": "/static/0.css",
+    "chunk2": "/static/1.css",
+    "main": "/static/main.css",
+  },
   "js": Object {
     "toString": [Function],
   },
@@ -34,11 +43,20 @@ Object {
 exports[`flushChunks() called as pure function babel: uses default entries when no named chunks provided via opts.before/after 1`] = `
 Object {
   "Css": [Function],
+  "CssChunks": [Function],
   "Js": [Function],
   "Styles": [Function],
   "css": Object {
     "toString": [Function],
   },
+  "cssChunks": Object {
+    "toString": [Function],
+  },
+  "cssChunksHash": Object {
+    "chunk1": "/static/0.css",
+    "chunk2": "/static/1.css",
+    "main": "/static/main.css",
+  },
   "js": Object {
     "toString": [Function],
   },
@@ -67,11 +85,20 @@ Object {
 exports[`flushChunks() called as pure function babel: uses entries provided by opts.before/after 1`] = `
 Object {
   "Css": [Function],
+  "CssChunks": [Function],
   "Js": [Function],
   "Styles": [Function],
   "css": Object {
     "toString": [Function],
   },
+  "cssChunks": Object {
+    "toString": [Function],
+  },
+  "cssChunksHash": Object {
+    "chunk1": "/static/0.css",
+    "chunk2": "/static/1.css",
+    "main": "/static/main.css",
+  },
   "js": Object {
     "toString": [Function],
   },
@@ -99,11 +126,20 @@ Object {
 exports[`flushChunks() called as pure function webpack - chunkNames 1`] = `
 Object {
   "Css": [Function],
+  "CssChunks": [Function],
   "Js": [Function],
   "Styles": [Function],
   "css": Object {
     "toString": [Function],
   },
+  "cssChunks": Object {
+    "toString": [Function],
+  },
+  "cssChunksHash": Object {
+    "chunk1": "/static/0.css",
+    "chunk2": "/static/1.css",
+    "main": "/static/main.css",
+  },
   "js": Object {
     "toString": [Function],
   },
@@ -130,11 +166,20 @@ Object {
 exports[`flushChunks() called as pure function webpack: uses default entries when no named chunks provided via opts.before/after 1`] = `
 Object {
   "Css": [Function],
+  "CssChunks": [Function],
   "Js": [Function],
   "Styles": [Function],
   "css": Object {
     "toString": [Function],
   },
+  "cssChunks": Object {
+    "toString": [Function],
+  },
+  "cssChunksHash": Object {
+    "chunk1": "/static/0.css",
+    "chunk2": "/static/1.css",
+    "main": "/static/main.css",
+  },
   "js": Object {
     "toString": [Function],
   },
@@ -163,11 +208,20 @@ Object {
 exports[`flushChunks() called as pure function webpack: uses entries provided by opts.before/after 1`] = `
 Object {
   "Css": [Function],
+  "CssChunks": [Function],
   "Js": [Function],
   "Styles": [Function],
   "css": Object {
     "toString": [Function],
   },
+  "cssChunks": Object {
+    "toString": [Function],
+  },
+  "cssChunksHash": Object {
+    "chunk1": "/static/0.css",
+    "chunk2": "/static/1.css",
+    "main": "/static/main.css",
+  },
   "js": Object {
     "toString": [Function],
   },

diff --git a/src/createApiWithCss.js b/src/createApiWithCss.js
@@ -6,6 +6,10 @@ type StatelessComponent = () => React.Element<*>
 type ObjectString = {
   toString: () => string
 }
+export type CssChunksHash = {
+  [key: string]: string
+}
+
 export type Api = {
   Js: StatelessComponent,
   Styles: StatelessComponent,
@@ -30,7 +34,8 @@ export default (
   files: Array<string>,
   filesOrderedForCss: Array<string>,
   publicPath: string,
-  outputPath: ?string
+  outputPath: ?string,
+  cssChunksHash: CssChunksHash
 ): Api => {
   const regex = getJsFileRegex(files)
   const scripts = files.filter(file => isJs(regex, file))
@@ -101,7 +106,20 @@ export default (
 
     // 5) for completeness provide the paths even though they were inputs:
     publicPath,
-    outputPath
+    outputPath,
+
+    // 6) special goodness for dual-file import()
+    cssChunksHash,
+    CssChunks: () => (
+      <script
+        type='text/javascript'
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(cssChunksHash) }}
+      />
+    ),
+    cssChunks: {
+      toString: () =>
+        `<script type='text/javascript'>window.__CSS_CHUNKS__= ${JSON.stringify(cssChunksHash)}</script>`
+    }
   }
 
   return api

diff --git a/src/flushChunks.js b/src/flushChunks.js
@@ -1,5 +1,5 @@
 // @flow
-import type { Api } from './createApiWithCss'
+import type { Api, CssChunksHash } from './createApiWithCss'
 import createApiWithCss from './createApiWithCss'
 
 declare function __webpack_require__(id: string): any
@@ -78,7 +78,8 @@ const flushChunks = (stats: Stats, isWebpack: boolean, opts: Options = {}) => {
       ...files // correct incrementing order already
     ],
     stats.publicPath,
-    opts.outputPath
+    opts.outputPath,
+    createCssHash(stats.assetsByChunkName, stats.publicPath)
   )
 }
 
@@ -199,6 +200,16 @@ const filesFromChunks = (
   return [].concat(...chunkNames.filter(hasChunk).map(entryToFiles))
 }
 
+const createCssHash = (
+  assetsByChunkName: FilesMap,
+  publicPath: string
+): CssChunksHash =>
+  Object.keys(assetsByChunkName).reduce((hash, name) => {
+    const file = assetsByChunkName[name].find(file => file.endsWith('.css'))
+    if (file) hash[name] = `${publicPath}${file}`
+    return hash
+  }, {})
+
 /** EXPORTS FOR TESTS */
 
 export {