Test CSS Behavior (#9733)

* Test CSS Behavior

* adjust files

Author: Timer

test/integration/css-fixtures/composes-basic/pages/index.js

@@ -0,0 +1,9 @@
+import { subClass } from './index.module.css'
+
+export default function Home() {
+  return (
+    <div id="verify-yellow" className={subClass}>
+      This text should be yellow on blue.
+    </div>
+  )
+}

test/integration/css-fixtures/composes-basic/pages/index.module.css

@@ -0,0 +1,9 @@
+.className {
+  background: red;
+  color: yellow;
+}
+
+.subClass {
+  composes: className;
+  background: blue;
+}

test/integration/css-fixtures/composes-external/pages/index.js

@@ -0,0 +1,9 @@
+import { subClass } from './index.module.css'
+
+export default function Home() {
+  return (
+    <div id="verify-yellow" className={subClass}>
+      This text should be yellow on blue.
+    </div>
+  )
+}

test/integration/css-fixtures/composes-external/pages/index.module.css

@@ -0,0 +1,4 @@
+.subClass {
+  composes: className from './other.css';
+  background: blue;
+}

test/integration/css-fixtures/composes-external/pages/other.css

@@ -0,0 +1,4 @@
+.className {
+  background: red;
+  color: yellow;
+}

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

@@ -223,3 +223,51 @@ describe('Valid CSS Module Usage from within node_modules', () => {
     )
   })
 })
+
+describe('CSS Module Composes Usage (Basic)', () => {
+  // This is a very bad feature. Do not use it.
+  const appDir = join(fixturesDir, 'composes-basic')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    await nextBuild(appDir)
+  })
+
+  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_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
+    )
+  })
+})
+
+describe('CSS Module Composes Usage (External)', () => {
+  // This is a very bad feature. Do not use it.
+  const appDir = join(fixturesDir, 'composes-external')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    await nextBuild(appDir)
+  })
+
+  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(
+      `".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
+    )
+  })
+})