From 3b6e64957f54dfb951102b93ead0ba890daf8311 Mon Sep 17 00:00:00 2001
From: Jamie Bowley <jpbowley@gmail.com>
Date: Thu, 15 Oct 2020 13:07:37 +0100
Subject: [PATCH 1/2] inline css files in AMP pages

---
 packages/next/pages/_document.tsx | 58 +++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 715d5b136bc40..41819e4347a65 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -17,6 +17,8 @@ import {
 } from '../next-server/server/get-page-files'
 import { cleanAmpPath } from '../next-server/server/utils'
 import { htmlEscapeJsonString } from '../server/htmlescape'
+import { readFileSync } from 'fs'
+import { join } from 'path'
 
 export { DocumentContext, DocumentInitialProps, DocumentProps }
 
@@ -157,12 +159,8 @@ export class Head extends Component<
 
   context!: React.ContextType<typeof DocumentComponentContext>
 
-  getCssLinks(files: DocumentFiles): JSX.Element[] | null {
-    const {
-      assetPrefix,
-      devOnlyCacheBusterQueryString,
-      dynamicImports,
-    } = this.context
+  getCssFiles(files: DocumentFiles): string[] {
+    const { dynamicImports } = this.context
     const cssFiles = files.allFiles.filter((f) => f.endsWith('.css'))
     const sharedFiles = new Set(files.sharedFiles)
 
@@ -177,6 +175,41 @@ export class Head extends Component<
       cssFiles.push(...dynamicCssFiles)
     }
 
+    return cssFiles
+  }
+
+  getAmpCss(
+    files: DocumentFiles,
+    curStyles: React.ReactElement[]
+  ): JSX.Element | null {
+    const cssFromFiles = this.getCssFiles(files)
+      .map((file) => readFileSync(join('.next', file), { encoding: 'utf-8' }))
+      .join('')
+    const cssFromElements = curStyles
+      .map((style) => style.props.dangerouslySetInnerHTML.__html)
+      .join('')
+      .replace(/\/\*# sourceMappingURL=.*\*\//g, '')
+      .replace(/\/\*@ sourceURL=.*?\*\//g, '')
+
+    if (cssFromFiles || cssFromElements) {
+      return (
+        <style
+          amp-custom=""
+          dangerouslySetInnerHTML={{
+            __html: `${cssFromFiles}${cssFromElements}`,
+          }}
+        />
+      )
+    }
+
+    return null
+  }
+
+  getCssLinks(files: DocumentFiles): JSX.Element[] | null {
+    const { assetPrefix, devOnlyCacheBusterQueryString } = this.context
+    const cssFiles = this.getCssFiles(files)
+    const sharedFiles = new Set(files.sharedFiles)
+
     const cssLinkElements: JSX.Element[] = []
     cssFiles.forEach((file) => {
       const isSharedFile = sharedFiles.has(file)
@@ -461,18 +494,7 @@ export class Head extends Component<
               href="https://cdn.ampproject.org/v0.js"
             />
             {/* Add custom styles before AMP styles to prevent accidental overrides */}
-            {styles && (
-              <style
-                amp-custom=""
-                dangerouslySetInnerHTML={{
-                  __html: curStyles
-                    .map((style) => style.props.dangerouslySetInnerHTML.__html)
-                    .join('')
-                    .replace(/\/\*# sourceMappingURL=.*\*\//g, '')
-                    .replace(/\/\*@ sourceURL=.*?\*\//g, ''),
-                }}
-              />
-            )}
+            {this.getAmpCss(files, curStyles)}
             <style
               amp-boilerplate=""
               dangerouslySetInnerHTML={{

From 775a1518322079e8afab830309ca154b3a4fb07b Mon Sep 17 00:00:00 2001
From: Jamie Bowley <jpbowley@gmail.com>
Date: Wed, 18 Nov 2020 09:42:10 +0000
Subject: [PATCH 2/2] replace sourcemap data

---
 packages/next/pages/_document.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 0fddc94650c19..5882642cb5260 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -188,6 +188,8 @@ export class Head extends Component<
     const cssFromFiles = this.getCssFiles(files)
       .map((file) => readFileSync(join('.next', file), { encoding: 'utf-8' }))
       .join('')
+      .replace(/\/\*# sourceMappingURL=.*\*\//g, '')
+      .replace(/\/\*@ sourceURL=.*?\*\//g, '')
     const cssFromElements = curStyles
       .map((style) => style.props.dangerouslySetInnerHTML.__html)
       .join('')
@@ -498,6 +500,12 @@ export class Head extends Component<
             />
             {/* Add custom styles before AMP styles to prevent accidental overrides */}
             {this.getAmpCss(files, curStyles)}
+            {this.context.isDevelopment && (
+              // this element is used to mount development styles so the
+              // ordering matches production
+              // (by default, style-loader injects at the bottom of <head />)
+              <style amp-custom="" id="__next_css__DO_NOT_USE__" />
+            )}
             <style
               amp-boilerplate=""
               dangerouslySetInnerHTML={{