first commit

test/integration/critical-css/components/hello.js

@@ -0,0 +1,5 @@
+import styles from './hello.module.css'
+
+export default function Hello() {
+  return <p className={styles.hello}>hello world</p>
+}

test/integration/critical-css/components/hello.module.css

@@ -0,0 +1,3 @@
+.hello {
+  color: orange;
+}

test/integration/critical-css/pages/_app.js

@@ -0,0 +1,6 @@
+import '../styles/styles.css'
+
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

test/integration/critical-css/pages/another.js

@@ -0,0 +1,21 @@
+import styles from '../styles/index.module.css'
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(() => import('../components/hello'))
+
+export default function Home() {
+  return (
+    <div className={styles.hello}>
+      <p>Hello World</p>
+      <Hello />
+    </div>
+  )
+}
+
+export const getServerSideProps = () => {
+  return {
+    props: {
+      hello: 'world',
+    },
+  }
+}

test/integration/critical-css/pages/index.js

@@ -0,0 +1,19 @@
+import styles from '../styles/index.module.css'
+import Hello from '../components/hello'
+
+export default function Home() {
+  return (
+    <div className={styles.hello}>
+      <p>Hello World</p>
+      <Hello />
+    </div>
+  )
+}
+
+export const getServerSideProps = () => {
+  return {
+    props: {
+      hello: 'world',
+    },
+  }
+}

test/integration/critical-css/styles/index.module.css

@@ -0,0 +1,18 @@
+.hello {
+  font:
+    15px Helvetica,
+    Arial,
+    sans-serif;
+  background: #eee;
+  padding: 100px;
+  text-align: center;
+  transition: 100ms ease-in background;
+}
+
+.hello:hover {
+  background: #ccc;
+}
+
+.extra-style1 {
+  background: #000;
+}

test/integration/critical-css/styles/styles.css

@@ -0,0 +1,12 @@
+body {
+  font-family:
+    'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial',
+    sans-serif;
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.extra-style {
+  font-size: 200%;
+}

test/integration/critical-css/test/index.test.ts

@@ -0,0 +1,87 @@
+/* eslint-env jest */
+import globOrigig from 'glob'
+import { promisify } from 'util'
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  nextStart,
+  nextBuild,
+  renderViaHTTP,
+} from 'next-test-utils'
+import fs from 'fs-extra'
+
+const glob = promisify(globOrigig)
+const appDir = join(__dirname, '../')
+const nextConfig = join(appDir, 'next.config.js')
+let appPort
+let app
+
+function runTests() {
+  it('should have all CSS files in manifest', async () => {
+    const cssFiles = (
+      await glob('**/*.css', {
+        cwd: join(appDir, '.next/static'),
+      })
+    ).map((file) => join('.next/static', file))
+
+    const requiredServerFiles = await fs.readJSON(
+      join(appDir, '.next/required-server-files.json')
+    )
+
+    expect(
+      requiredServerFiles.files.filter((file) => file.endsWith('.css'))
+    ).toEqual(cssFiles)
+  })
+
+  it('should inline critical CSS', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    expect(html).toMatch(
+      /<link rel="stylesheet" href="\/_next\/static\/.*\.css(\?dpl=.*)?" .*>/
+    )
+    expect(html).toMatch(/body{/)
+  })
+
+  it('should inline critical CSS (dynamic)', async () => {
+    const html = await renderViaHTTP(appPort, '/another')
+    expect(html).toMatch(
+      /<link rel="stylesheet" href="\/_next\/static\/.*\.css(\?dpl=.*)?" .*>/
+    )
+    expect(html).toMatch(/body{/)
+  })
+
+  it('should not inline non-critical css', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    expect(html).not.toMatch(/.extra-style/)
+  })
+}
+
+describe('CSS optimization for SSR apps', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      beforeAll(async () => {
+        await fs.writeFile(
+          nextConfig,
+          `module.exports = { experimental: {optimizeCss: true} }`,
+          'utf8'
+        )
+
+        if (fs.pathExistsSync(join(appDir, '.next'))) {
+          await fs.remove(join(appDir, '.next'))
+        }
+        // TODO optimizeCss is broken when ?dpl is added to CSS URLs
+        await nextBuild(appDir, undefined, { disableAutoSkewProtection: true })
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort, {
+          disableAutoSkewProtection: true,
+        })
+      })
+      afterAll(async () => {
+        await killApp(app)
+        await fs.remove(nextConfig)
+      })
+      runTests()
+    }
+  )
+})