Add JS wrapper to CSS to support Serverless target

Resolves #281
nextauthjs · Jun 21, 2020 · 52f2dd5 · 52f2dd5 · vercel · Jun 21, 2020
1 parent 6eeed21
commit 52f2dd5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "next-auth",
-  "version": "2.0.0-beta.85",
+  "version": "2.0.0-beta.86",
   "description": "An authentication library for Next.js",
   "repository": "https://github.com/iaincollins/next-auth.git",
   "author": "Iain Collins <me@iaincollins.com>",
   "main": "index.js",
   "scripts": {
     "build": "npm run build:js && npm run build:css",
     "build:js": "babel src --out-dir dist",
-    "build:css": "postcss src/**/*.css --base src --dir dist",
+    "build:css": "postcss src/**/*.css --base src --dir dist && node scripts/wrap-css.js",
     "watch": "npm run watch:js | npm run watch:css",
     "watch:js": "babel --watch src --out-dir dist",
     "watch:css": "postcss --watch src/**/*.css --base src --dir dist",

diff --git a/scripts/wrap-css.js b/scripts/wrap-css.js
@@ -0,0 +1,18 @@
+// Serverless target in Next.js does work if you try to read in files at runtime
+// that are not JavaScript or JSON (e.g. CSS files).
+// https://github.com/iaincollins/next-auth/issues/281
+//
+// To work around this issue, this script is a manual step that wraps CSS in a
+// JavaScript file that has the compiled CSS embedded in it, and exports only
+// a function that returns the CSS as a string.
+const fs = require('fs')
+const path = require('path')
+
+const pathToCssJs = path.join(__dirname, '../dist/css/index.js')
+const pathToCss = path.join(__dirname, '../dist/css/index.css')
+
+const css = fs.readFileSync(pathToCss, 'utf8')
+const cssWithEscapedQuotes = css.replace(/"/gm, '\\"')
+const js = `module.exports = function() { return "${cssWithEscapedQuotes}" }`
+
+fs.writeFileSync(pathToCssJs, js)
diff --git a/src/css/index.js b/src/css/index.js
@@ -0,0 +1,10 @@
+// To support serverless targets (which don't work if you try to read in things
+// like CSS files at run time) this file is replaced in production builds with
+// a function that returns compiled CSS (embedded as a string in the function).
+import fs from 'fs'
+import path from 'path'
+
+const pathToCss = path.join(__dirname, '/index.css')
+const css = fs.readFileSync(pathToCss, 'utf8')
+
+export default () => css
diff --git a/src/server/pages/index.js b/src/server/pages/index.js
@@ -4,9 +4,7 @@ import signin from './signin'
 import signout from './signout'
 import verifyRequest from './verify-request'
 import error from './error'
-
-// Future releases will support customization (via inline or external CSS)
-const defaultStyles = fs.readFileSync(path.join(__dirname, '/../../css/index.css'), 'utf8')
+import css from '../../css'
 
 function render (req, res, page, props, done) {
   let html = ''
@@ -29,7 +27,7 @@ function render (req, res, page, props, done) {
   }
 
   res.setHeader('Content-Type', 'text/html')
-  res.send(`<!DOCTYPE html><head><style type="text/css">${defaultStyles}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div class="page">${html}</div></body></html>`)
+  res.send(`<!DOCTYPE html><head><style type="text/css">${css()}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div class="page">${html}</div></body></html>`)
   done()
 }