srizan/archived-next-auth
1
0
Fork 0
mirror of https://github.com/SrIzan10/next-auth.git synced 2026-05-01 10:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add JS wrapper to CSS to support Serverless target

Browse Source 
Resolves #281
This commit is contained in:
Iain Collins
2020-06-21 15:01:07 +01:00
parent 6eeed21872
commit 52f2dd5c32
4 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -1,6 +1,6 @@
{
"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>",
@@ -8,7 +8,7 @@
"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",

18
scripts/wrap-css.js Normal file
View File

@@ -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)

10
src/css/index.js Normal file
View File

@@ -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

6
src/server/pages/index.js
View File

@@ -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()
}