diff --git a/packages/http/build/.flecksrc.js b/packages/http/build/.flecksrc.js index 95745e8..6bc7488 100644 --- a/packages/http/build/.flecksrc.js +++ b/packages/http/build/.flecksrc.js @@ -1,4 +1,11 @@ +const {join} = require('path'); + module.exports = { + babel: { + plugins: [ + join(__dirname, '..', 'src', 'server', 'style-loader'), + ], + }, stubs: { server: [ /\.(c|s[ac])ss$/, diff --git a/packages/http/src/server/index.js b/packages/http/src/server/index.js index 1a18349..ad115ad 100644 --- a/packages/http/src/server/index.js +++ b/packages/http/src/server/index.js @@ -24,10 +24,8 @@ export default { const extract = {}; const style = {}; if ('server' === target) { - extract.enabled = true; - extract.plugin = { - filename: 'index.css', - }; + extract.enabled = false; + style.injectType = 'lazyStyleTag'; } if ('http' === target) { extract.enabled = isProduction; diff --git a/packages/http/src/server/style-loader.js b/packages/http/src/server/style-loader.js new file mode 100644 index 0000000..2de6efe --- /dev/null +++ b/packages/http/src/server/style-loader.js @@ -0,0 +1,19 @@ +const parser = require('@babel/parser'); +const types = require('@babel/types'); + +// On the server we use `lazyStyleTag` to avoid either dying over the lack of `document` or the +// inefficiency of extracting styles needlessly. When importing CSS modules, `lazyStyleTag` moves +// the default export into a named `locals` export. This babel plugin injects a small amount of +// code after the import in order to hide that from client code. +module.exports = () => ({ + visitor: { + ImportDeclaration(path) { + if (path.node.source.value.match(/\.module\.(c|s[ac])ss$/)) { + const defaultSpecifier = path.node.specifiers.find(types.isImportDefaultSpecifier); + const {name} = defaultSpecifier.local; + defaultSpecifier.local.name = `${name}__default`; + path.insertAfter(parser.parse(`const ${name} = ${name}__default?.locals || ${name}__default`)); + } + }, + }, +});