Test CSS/Media Caching in Production Suite

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/index.js

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

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

@@ -0,0 +1,3 @@
+.logo {
+  background-image: url(dark.svg);
+}

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

@@ -0,0 +1,7 @@
+import Logo from '../components/logo'
+
+export default () => (
+  <div>
+    <Logo />
+  </div>
+)

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