From e37aab2a8c918fc0b7209b42de7d8391b32b8591 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 21 Jan 2020 07:22:42 -0500
Subject: [PATCH 1/3] Test CSS Modules in Production Suite

---
 .../production/components/logo/dark.svg       | 19 +++++++++++++++++++
 .../production/components/logo/index.js       |  1 +
 .../production/components/logo/logo.js        |  5 +++++
 .../components/logo/logo.module.css           |  3 +++
 .../production/pages/css-modules.js           |  7 +++++++
 5 files changed, 35 insertions(+)
 create mode 100644 test/integration/production/components/logo/dark.svg
 create mode 100644 test/integration/production/components/logo/index.js
 create mode 100644 test/integration/production/components/logo/logo.js
 create mode 100644 test/integration/production/components/logo/logo.module.css
 create mode 100644 test/integration/production/pages/css-modules.js

diff --git a/test/integration/production/components/logo/dark.svg b/test/integration/production/components/logo/dark.svg
new file mode 100644
index 000000000000000..aaa95aa3259e90e
--- /dev/null
+++ b/test/integration/production/components/logo/dark.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="114px" height="100px" viewBox="0 0 114 100" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+  <title>Logotype - Black</title>
+  <desc>Created with Sketch.</desc>
+  <defs>
+    <linearGradient x1="100.929941%" y1="181.283245%" x2="41.7687834%" y2="100%" id="linearGradient-1">
+      <stop stop-color="#FFFFFF" offset="0%"></stop>
+      <stop stop-color="#000000" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Black-Triangle" transform="translate(-293.000000, -150.000000)" fill="url(#linearGradient-1)">
+      <polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
+    </g>
+  </g>
+</svg>
diff --git a/test/integration/production/components/logo/index.js b/test/integration/production/components/logo/index.js
new file mode 100644
index 000000000000000..e37129489e13cc4
--- /dev/null
+++ b/test/integration/production/components/logo/index.js
@@ -0,0 +1 @@
+export * from './logo'
diff --git a/test/integration/production/components/logo/logo.js b/test/integration/production/components/logo/logo.js
new file mode 100644
index 000000000000000..41a481d105fdbc9
--- /dev/null
+++ b/test/integration/production/components/logo/logo.js
@@ -0,0 +1,5 @@
+import styles from './logo.module.css'
+
+export default function Logo() {
+  return <div className={styles.logo}></div>
+}
diff --git a/test/integration/production/components/logo/logo.module.css b/test/integration/production/components/logo/logo.module.css
new file mode 100644
index 000000000000000..774d42d9ec9d41a
--- /dev/null
+++ b/test/integration/production/components/logo/logo.module.css
@@ -0,0 +1,3 @@
+.logo {
+  background-image: url(dark.svg);
+}
diff --git a/test/integration/production/pages/css-modules.js b/test/integration/production/pages/css-modules.js
new file mode 100644
index 000000000000000..86a3aa6df705384
--- /dev/null
+++ b/test/integration/production/pages/css-modules.js
@@ -0,0 +1,7 @@
+import Logo from '../components/logo'
+
+export default () => (
+  <div>
+    <Logo />
+  </div>
+)

From 343a06b218551d3118ef7c2d63e695b2db7634e0 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 21 Jan 2020 07:40:18 -0500
Subject: [PATCH 2/3] fix build

---
 test/integration/production/components/logo/index.js | 6 +++++-
 test/integration/production/components/logo/logo.js  | 5 -----
 2 files changed, 5 insertions(+), 6 deletions(-)
 delete mode 100644 test/integration/production/components/logo/logo.js

diff --git a/test/integration/production/components/logo/index.js b/test/integration/production/components/logo/index.js
index e37129489e13cc4..41a481d105fdbc9 100644
--- a/test/integration/production/components/logo/index.js
+++ b/test/integration/production/components/logo/index.js
@@ -1 +1,5 @@
-export * from './logo'
+import styles from './logo.module.css'
+
+export default function Logo() {
+  return <div className={styles.logo}></div>
+}
diff --git a/test/integration/production/components/logo/logo.js b/test/integration/production/components/logo/logo.js
deleted file mode 100644
index 41a481d105fdbc9..000000000000000
--- a/test/integration/production/components/logo/logo.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import styles from './logo.module.css'
-
-export default function Logo() {
-  return <div className={styles.logo}></div>
-}

From 522383f30a1e65d7fb539551d24c74fa345ee358 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 21 Jan 2020 07:50:54 -0500
Subject: [PATCH 3/3] test css and media assets

---
 .../next/next-server/server/next-server.ts    |  2 +
 .../integration/production/test/index.test.js | 47 +++++++++++++------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 315f88c04d839cc..a7029431e628eda 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -330,6 +330,8 @@ export default class Server {
           if (
             params.path[0] === CLIENT_STATIC_FILES_RUNTIME ||
             params.path[0] === 'chunks' ||
+            params.path[0] === 'css' ||
+            params.path[0] === 'media' ||
             params.path[0] === this.buildId
           ) {
             this.setImmutableAssetCacheControl(res)
diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
index 141f96833e5dcb0..56f48a3676f7d2c 100644
--- a/test/integration/production/test/index.test.js
+++ b/test/integration/production/test/index.test.js
@@ -1,26 +1,27 @@
 /* eslint-env jest */
 /* global jasmine, browserName */
-import webdriver from 'next-webdriver'
-import { readFileSync, existsSync } from 'fs'
-import { join } from 'path'
+import cheerio from 'cheerio'
+import { existsSync, readFileSync } from 'fs'
 import {
   nextServer,
+  renderViaHTTP,
   runNextCommand,
   startApp,
   stopApp,
-  renderViaHTTP,
   waitFor,
 } from 'next-test-utils'
-import fetch from 'node-fetch'
-import dynamicImportTests from './dynamic'
-import processEnv from './process-env'
-import security from './security'
+import webdriver from 'next-webdriver'
 import {
   BUILD_MANIFEST,
-  REACT_LOADABLE_MANIFEST,
   PAGES_MANIFEST,
+  REACT_LOADABLE_MANIFEST,
 } from 'next/constants'
-import cheerio from 'cheerio'
+import { recursiveReadDir } from 'next/dist/lib/recursive-readdir'
+import fetch from 'node-fetch'
+import { join } from 'path'
+import dynamicImportTests from './dynamic'
+import processEnv from './process-env'
+import security from './security'
 const appDir = join(__dirname, '../')
 let serverDir
 let appPort
@@ -172,23 +173,39 @@ describe('Production Usage', () => {
       ))
       const url = `http://localhost:${appPort}/_next/`
 
-      const resources = []
+      const resources = new Set()
 
       // test a regular page
-      resources.push(`${url}static/${buildId}/pages/index.js`)
+      resources.add(`${url}static/${buildId}/pages/index.js`)
 
       // test dynamic chunk
-      resources.push(
+      resources.add(
         url + reactLoadableManifest['../../components/hello1'][0].publicPath
       )
 
       // test main.js runtime etc
       for (const item of buildManifest.pages['/']) {
-        resources.push(url + item)
+        resources.add(url + item)
       }
 
+      const cssStaticAssets = await recursiveReadDir(
+        join(__dirname, '..', '.next', 'static'),
+        /\.css$/
+      )
+      expect(cssStaticAssets.length).toBeGreaterThanOrEqual(1)
+      expect(cssStaticAssets[0]).toMatch(/[\\/]css[\\/]/)
+      const mediaStaticAssets = await recursiveReadDir(
+        join(__dirname, '..', '.next', 'static'),
+        /\.svg$/
+      )
+      expect(mediaStaticAssets.length).toBeGreaterThanOrEqual(1)
+      expect(mediaStaticAssets[0]).toMatch(/[\\/]media[\\/]/)
+      ;[...cssStaticAssets, ...mediaStaticAssets].forEach(asset => {
+        resources.add(`${url}static${asset.replace(/\\+/g, '/')}`)
+      })
+
       const responses = await Promise.all(
-        resources.map(resource => fetch(resource))
+        [...resources].map(resource => fetch(resource))
       )
 
       responses.forEach(res => {