Test CSS/Media Caching in Production Suite (#10184)

* Test CSS Modules in Production Suite

* fix build

* test css and media assets

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)

test/integration/production/components/logo/dark.svg

+<?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>

test/integration/production/components/logo/index.js

+import styles from './logo.module.css'
+
+export default function Logo() {
+  return <div className={styles.logo}></div>
+}

test/integration/production/components/logo/logo.module.css

+.logo {
+  background-image: url(dark.svg);
+}

test/integration/production/pages/css-modules.js

+import Logo from '../components/logo'
+
+export default () => (
+  <div>
+    <Logo />
+  </div>
+)

test/integration/production/test/index.test.js

 /* 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 => {