Move scss tests into individual directories

test/integration/scss/scss-fixtures/3rd-party-module/3rd-party-module.test.js

@@ -0,0 +1,72 @@
+/* eslint-env jest */
+
+import cheerio from 'cheerio'
+import { readdir, readFile, remove } from 'fs-extra'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+import { join } from 'path'
+
+describe('3rd Party CSS Module Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    let appPort
+    let app
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    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__72b4D{position:relative}.index_foo__72b4D .bar,.index_foo__72b4D .baz{height:100%;overflow:hidden}.index_foo__72b4D .lol,.index_foo__72b4D>.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__72b4D"`
+      )
+    })
+  })
+})

test/integration/scss/scss-fixtures/basic-module-include-paths/basic-module-include-paths.test.js

@@ -0,0 +1,35 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('Basic Module Include Paths Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    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)
+      expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
+        'color:red'
+      )
+    })
+  })
+})

test/integration/scss/scss-fixtures/basic-module-prepend-data/basic-module-prepend-data.test.js

@@ -0,0 +1,35 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('Basic Module Prepend Data Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    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)
+      expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
+        'color:red'
+      )
+    })
+  })
+})

test/integration/scss/scss-fixtures/basic-module/basic-module.test.js

@@ -0,0 +1,70 @@
+/* eslint-env jest */
+
+import cheerio from 'cheerio'
+import { readdir, readFile, remove } from 'fs-extra'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+import { join } from 'path'
+
+describe('Basic SCSS Module Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    let appPort
+    let app
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    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_redText__zXafh{color:red}"`)
+    })
+
+    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-red').attr('class')).toMatchInlineSnapshot(
+        `"index_redText__zXafh"`
+      )
+    })
+  })
+})

test/integration/scss/test/scss-modules-dynamic-route.test.js → test/integration/scss/scss-fixtures/catch-all-module/catch-all-module.test.js

@@ -5,61 +5,9 @@ import { findPort, killApp, nextBuild, nextStart } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
 
-const fixturesDir = join(__dirname, '..', 'scss-fixtures')
-
-describe('Dynamic Route CSS Module Usage', () => {
-  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
-    const appDir = join(fixturesDir, 'dynamic-route-module')
-
-    let stdout
-    let code
-    let app
-    let appPort
-
-    beforeAll(async () => {
-      await remove(join(appDir, '.next'))
-      ;({ code, stdout } = await nextBuild(appDir, [], {
-        stdout: true,
-      }))
-      appPort = await findPort()
-      app = await nextStart(appDir, appPort)
-    })
-    afterAll(() => killApp(app))
-
-    it('should have compiled successfully', () => {
-      expect(code).toBe(0)
-      expect(stdout).toMatch(/Compiled successfully/)
-    })
-
-    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(`"._post__home__ZI5mq{background:red}"`)
-    })
-
-    it('should apply styles correctly', async () => {
-      const browser = await webdriver(appPort, '/post-1')
-
-      const background = await browser
-        .elementByCss('#my-div')
-        .getComputedCss('background-color')
-
-      expect(background).toMatch(/rgb(a|)\(255, 0, 0/)
-    })
-  })
-})
-
 describe('Catch-all Route CSS Module Usage', () => {
   ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
-    const appDir = join(fixturesDir, 'catch-all-module')
+    const appDir = __dirname
 
     let stdout
     let code

test/integration/scss/scss-fixtures/compilation-and-prefixing/compilation-and-prefixing.test.js

@@ -0,0 +1,76 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('SCSS Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    describe('CSS Compilation and Prefixing', () => {
+      const appDir = __dirname
+
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+      })
+
+      it('should compile successfully', async () => {
+        const { code, stdout } = await nextBuild(appDir, [], {
+          stdout: true,
+        })
+        expect(code).toBe(0)
+        expect(stdout).toMatch(/Compiled successfully/)
+      })
+
+      it(`should've compiled and prefixed`, 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(
+          `".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
+        )
+
+        // Contains a source map
+        expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//)
+      })
+
+      it(`should've emitted a source map`, async () => {
+        const cssFolder = join(appDir, '.next/static/css')
+
+        const files = await readdir(cssFolder)
+        const cssMapFiles = files.filter((f) => /\.css\.map$/.test(f))
+
+        expect(cssMapFiles.length).toBe(1)
+        const cssMapContent = (
+          await readFile(join(cssFolder, cssMapFiles[0]), 'utf8')
+        ).trim()
+
+        const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
+        expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
+{
+  "mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
+  "sourcesContent": [
+    "$var: red;
+.redText {
+  ::placeholder {
+    color: $var;
+  }
+}
+
+.flex-parsing {
+  flex: 0 0 calc(50% - var(--vertical-gutter));
+}
+",
+  ],
+  "version": 3,
+}
+`)
+      })
+    })
+  })
+})

test/integration/scss/scss-fixtures/composes-basic/composes-basic.test.js

@@ -0,0 +1,41 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('CSS Module Composes Usage (Basic)', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    // This is a very bad feature. Do not use it.
+    const appDir = __dirname
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    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__OLWEh{background:red;color:#ff0}.index_subClass__Z_IFg{background:blue}"`
+      )
+    })
+  })
+})