Test 3rd Party CSS Modules (#9924)

test/integration/css-fixtures/3rd-party-module/pages/index.js

@@ -0,0 +1,5 @@
+import { foo } from './index.module.css'
+
+export default function Home() {
+  return <div id="verify-div" className={foo} />
+}

test/integration/css-fixtures/3rd-party-module/pages/index.module.css

@@ -0,0 +1,17 @@
+.foo {
+  position: relative;
+}
+
+.foo :global(.bar),
+.foo :global(.baz) {
+  height: 100%;
+  overflow: hidden;
+}
+
+.foo :global(.lol) {
+  width: 80%;
+}
+
+.foo > :global(.lel) {
+  width: 80%;
+}

test/integration/css-modules/test/index.test.js

@@ -65,6 +65,53 @@ describe('Basic CSS Module Support', () => {
   })
 })
 
+describe('3rd Party CSS Module Support', () => {
+  const appDir = join(fixturesDir, '3rd-party-module')
+
+  let appPort
+  let app
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(async () => {
+    await killApp(app)
+  })
+
+  it(`should've emitted a single CSS file`, async () => {
+    const cssFolder = join(appDir, '.next/static/css')
+
+    const files = await readdir(cssFolder)
+    const cssFiles = files.filter(f => /\.css$/.test(f))
+
+    expect(cssFiles.length).toBe(1)
+    const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+    expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
+      `".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"`
+    )
+  })
+
+  it(`should've injected the CSS on server render`, async () => {
+    const content = await renderViaHTTP(appPort, '/')
+    const $ = cheerio.load(content)
+
+    const cssPreload = $('link[rel="preload"][as="style"]')
+    expect(cssPreload.length).toBe(1)
+    expect(cssPreload.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+    const cssSheet = $('link[rel="stylesheet"]')
+    expect(cssSheet.length).toBe(1)
+    expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+    expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
+      `"index_foo__29BAH"`
+    )
+  })
+})
+
 describe('Has CSS Module in computed styles in Development', () => {
   const appDir = join(fixturesDir, 'dev-module')