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/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 @@ + + + + Logotype - Black + Created with Sketch. + + + + + + + + + + + + diff --git a/test/integration/production/components/logo/index.js b/test/integration/production/components/logo/index.js new file mode 100644 index 000000000000000..41a481d105fdbc9 --- /dev/null +++ b/test/integration/production/components/logo/index.js @@ -0,0 +1,5 @@ +import styles from './logo.module.css' + +export default function Logo() { + return
+} 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 () => ( +
+ +
+) 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 => {