Webpack’s import() will soon fetch JS + CSS— Here’s how you do it today

James Gillmore
Jul 7, 2017 · 6 min read
the future

“The big plan

In the long term we want to make it possible to add first-class module support for CSS to webpack. This will work the following way:

  • We adjust the Chunk Templates to write two files. One for the javascript and one of the stylesheets (in a .css file).
  • We adjust the chunk loading logic to allow loading of stylesheets. We need to wait for CSS applied or at least loaded, before executing the JS.
  • When we generate a chunk load we may load the js chunk and the stylesheet chunk in parallel (combined by Promise.all).”
  • one with CSS injection via style-loader


For this all to make sense, and if this is the first time you’re hearing about any of this, you probably want to check out:

Being able to control what static CSS files you send to clients really is a nice way to handle this problem. It’s why @sokra came to this conclusion. Being able to automatically do it is even better.

Introducing Babel-Plugin-Dual-Import + Extract CSS Chunks Webpack Plugin 2.o

babel-plugin-dual-import transforms your request to a Promise.all just as Sokra talked about, and as bonus it automatically comes up with a webpackChunkName for you. “Magic comments” are so magical they’ve disappeared. Under the hood of course I use them to generate your chunk names.


Since today we are primarily introducing the babel plugin, that’s what we’ll focus on:

yarn add --dev babel-plugin-dual-import
  "presets": [whatever you usually have],
  "plugins": ["dual-import"]

      ↓ ↓ ↓ ↓ ↓ ↓

import { importCss } from 'babel-plugin-dual-import/importCss.js'

  import( /* webpackChunkName: 'Foo' */ './Foo'),
]).then(promises => promises[0]);

      ↓ ↓ ↓ ↓ ↓ ↓

import { importCss } from 'babel-plugin-dual-import/importCss.js'

  import( /* webpackChunkName: 'base/[request]' */ `./base/${page}`),
).then(promises => promises[0]);
import flushChunks from 'webpack-flush-chunks'
import * as Universal from 'react-universal-component/server'const appString = ReactDOM.renderToString(<App />)
const { js, styles, cssHash } = flushChunks(webpackStats, {
  chunkNames: Universal.flushChunkNames(),
      <div id='root'>${appString}</div>


There’s not much left to say today. So I won’t waste your time. Git clone the demo to see all 4 packages in action:


The React Stack: Idiomatic Javascript in Reactlandia

James Gillmore

Written by

http://www.faceyspacey.com + http://twitter.com/faceyspacey


The React Stack: Idiomatic Javascript in Reactlandia