first commit

test/integration/css-features/fixtures/browsers-new/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "last 1 chrome version"
+  ]
+}

test/integration/css-features/fixtures/browsers-new/pages/_app.js

@@ -0,0 +1,12 @@
+import App from 'next/app'
+import React from 'react'
+import './styles.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-features/fixtures/browsers-new/pages/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <div />
+}

test/integration/css-features/fixtures/browsers-new/pages/styles.css

@@ -0,0 +1,8 @@
+a {
+  all: initial;
+}
+@media (min-resolution: 2dppx) {
+  .image {
+    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
+  }
+}

test/integration/css-features/fixtures/browsers-old/package.json

@@ -0,0 +1,7 @@
+{
+  "browserslist": [
+    "ie 11",
+    "safari 4",
+    "chrome 28"
+  ]
+}

test/integration/css-features/fixtures/browsers-old/pages/_app.js

@@ -0,0 +1,12 @@
+import App from 'next/app'
+import React from 'react'
+import './styles.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-features/fixtures/browsers-old/pages/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <div />
+}

test/integration/css-features/fixtures/browsers-old/pages/styles.css

@@ -0,0 +1,8 @@
+a {
+  all: initial;
+}
+@media (min-resolution: 2dppx) {
+  .image {
+    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
+  }
+}

test/integration/css-features/fixtures/cp-el-modules/pages/index.js

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

test/integration/css-features/fixtures/cp-el-modules/pages/styles.module.css

@@ -0,0 +1,7 @@
+h1 {
+  --color: red;
+}
+
+h1 {
+  color: var(--color);
+}

test/integration/css-features/fixtures/cp-global-modules/pages/index.js

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

test/integration/css-features/fixtures/cp-global-modules/pages/styles.module.css

@@ -0,0 +1,7 @@
+:root {
+  --color: red;
+}
+
+h1 {
+  color: var(--color);
+}

test/integration/css-features/fixtures/cp-ie-11/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "ie 11"
+  ]
+}

test/integration/css-features/fixtures/cp-ie-11/pages/_app.js

@@ -0,0 +1,12 @@
+import App from 'next/app'
+import React from 'react'
+import './styles.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-features/fixtures/cp-ie-11/pages/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <div />
+}

test/integration/css-features/fixtures/cp-ie-11/pages/styles.css

@@ -0,0 +1,7 @@
+:root {
+  --color: red;
+}
+
+h1 {
+  color: var(--color);
+}

test/integration/css-features/fixtures/cp-modern/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "chrome 78"
+  ]
+}

test/integration/css-features/fixtures/cp-modern/pages/_app.js

@@ -0,0 +1,12 @@
+import App from 'next/app'
+import React from 'react'
+import './styles.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-features/fixtures/cp-modern/pages/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <div />
+}

test/integration/css-features/fixtures/cp-modern/pages/styles.css

@@ -0,0 +1,7 @@
+:root {
+  --color: red;
+}
+
+h1 {
+  color: var(--color);
+}

test/integration/css-features/fixtures/inline-comments/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "last 1 chrome version"
+  ]
+}

test/integration/css-features/fixtures/inline-comments/pages/_app.js

@@ -0,0 +1,5 @@
+import './global.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

test/integration/css-features/fixtures/inline-comments/pages/global.css

@@ -0,0 +1,6 @@
+// Aaaand we are dead
+// These comments are invalid CSS and it crashes the build since Next.js 9.5.0
+
+* {
+  box-sizing: border-box;
+}

test/integration/css-features/fixtures/inline-comments/pages/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <div></div>
+}

test/integration/css-features/fixtures/module-import-exports/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "last 1 chrome version"
+  ]
+}

test/integration/css-features/fixtures/module-import-exports/pages/colors.module.css

@@ -0,0 +1,4 @@
+:export {
+  w1: #ffffff;
+  b1: #000000;
+}

test/integration/css-features/fixtures/module-import-exports/pages/index.js

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

test/integration/css-features/fixtures/module-import-exports/pages/styles.module.css

@@ -0,0 +1,5 @@
+@value b1 from "./colors.module.css";
+
+.blk {
+  color: b1;
+}

test/integration/css-features/fixtures/module-import-global-invalid/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "last 1 chrome version"
+  ]
+}

test/integration/css-features/fixtures/module-import-global-invalid/pages/index.js

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

test/integration/css-features/fixtures/module-import-global-invalid/pages/styles.css

@@ -0,0 +1,3 @@
+a {
+  all: initial;
+}

test/integration/css-features/fixtures/module-import-global-invalid/pages/styles.module.css

@@ -0,0 +1 @@
+@import './styles.css';

test/integration/css-features/fixtures/module-import-global/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "last 1 chrome version"
+  ]
+}

test/integration/css-features/fixtures/module-import-global/pages/index.js

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

test/integration/css-features/fixtures/module-import-global/pages/styles.css

@@ -0,0 +1,3 @@
+a .foo {
+  all: initial;
+}

test/integration/css-features/fixtures/module-import-global/pages/styles.module.css

@@ -0,0 +1 @@
+@import './styles.css';

test/integration/css-features/test/browserslist.test.ts

@@ -0,0 +1,123 @@
+/* eslint-env jest */
+
+import { remove } from 'fs-extra'
+import {
+  nextBuild,
+  fetchViaHTTP,
+  renderViaHTTP,
+  findPort,
+  nextStart,
+  killApp,
+} from 'next-test-utils'
+import { join } from 'path'
+import cheerio from 'cheerio'
+
+const fixturesDir = join(__dirname, '../fixtures')
+
+describe('Browserslist: Old', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'browsers-old')
+
+      let appPort
+      let app
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+        const { code } = await nextBuild(appDir, [], {
+          stdout: true,
+        })
+        if (code !== 0) {
+          throw new Error('Build failed')
+        }
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      it(`should've emitted a single CSS file`, async () => {
+        const content = await renderViaHTTP(appPort, '/')
+        const $ = cheerio.load(content)
+
+        const cssSheet = $('link[rel="stylesheet"]')
+        expect(cssSheet.length).toBe(1)
+
+        const stylesheetUrl = cssSheet.attr('href')
+
+        const cssContent = await fetchViaHTTP(appPort, stylesheetUrl).then(
+          (res) => res.text()
+        )
+
+        const cssContentWithoutSourceMap = cssContent
+          .replace(/\/\*.*?\*\/\n?/g, '')
+          .trim()
+
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        } else {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        }
+      })
+    }
+  )
+})
+
+describe('Browserslist: New', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'browsers-new')
+
+      let appPort
+      let app
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+        const { code } = await nextBuild(appDir, [], {
+          stdout: true,
+        })
+        if (code !== 0) {
+          throw new Error('Build failed')
+        }
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      it(`should've emitted a single CSS file`, async () => {
+        const content = await renderViaHTTP(appPort, '/')
+        const $ = cheerio.load(content)
+
+        const cssSheet = $('link[rel="stylesheet"]')
+        expect(cssSheet.length).toBe(1)
+
+        const stylesheetUrl = cssSheet.attr('href')
+
+        const cssContent = await fetchViaHTTP(appPort, stylesheetUrl).then(
+          (res) => res.text()
+        )
+
+        const cssContentWithoutSourceMap = cssContent
+          .replace(/\/\*.*?\*\/\n?/g, '')
+          .trim()
+
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{all:initial}@media (min-resolution:2x){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        } else {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        }
+      })
+    }
+  )
+})

test/integration/css-features/test/css-modules.test.ts

@@ -0,0 +1,195 @@
+/* eslint-env jest */
+
+import { remove } from 'fs-extra'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+  fetchViaHTTP,
+} from 'next-test-utils'
+import cheerio from 'cheerio'
+import { join } from 'path'
+
+const fixturesDir = join(__dirname, '../fixtures')
+
+// Turbopack uses LightningCSS which supports scoping `:root` to the CSS module.
+;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
+  'Custom Properties: Fail for :root {} in CSS Modules',
+  () => {
+    ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+      'production mode',
+      () => {
+        const appDir = join(fixturesDir, 'cp-global-modules')
+
+        beforeAll(async () => {
+          await remove(join(appDir, '.next'))
+        })
+
+        it('should fail to build', async () => {
+          const { code, stderr } = await nextBuild(appDir, [], {
+            stderr: true,
+          })
+          expect(code).not.toBe(0)
+          expect(stderr).toContain('Failed to compile')
+          expect(stderr).toContain('pages/styles.module.css')
+          expect(stderr).toContain('Selector ":root" is not pure')
+        })
+      }
+    )
+  }
+)
+
+describe('Custom Properties: Fail for global element in CSS Modules', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'cp-el-modules')
+
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+      })
+
+      it('should fail to build', async () => {
+        const { code, stderr } = await nextBuild(appDir, [], {
+          stderr: true,
+        })
+        expect(code).not.toBe(0)
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(stderr).toContain('pages/styles.module.css')
+          expect(stderr).toContain('Selector "h1" is not pure')
+        } else {
+          expect(stderr).toContain('Failed to compile')
+          expect(stderr).toContain('pages/styles.module.css')
+          expect(stderr).toContain('Selector "h1" is not pure')
+        }
+      })
+    }
+  )
+})
+
+describe('CSS Modules: Import Global CSS', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'module-import-global')
+
+      let appPort
+      let app
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+        const { code } = await nextBuild(appDir)
+        if (code !== 0) {
+          throw new Error('failed to build')
+        }
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      it(`should've emitted a single CSS file`, async () => {
+        const content = await renderViaHTTP(appPort, '/')
+        const $ = cheerio.load(content)
+
+        const cssSheet = $('link[rel="stylesheet"]')
+        expect(cssSheet.length).toBe(1)
+
+        const stylesheet = cssSheet.attr('href')
+
+        const cssContent = (
+          await fetchViaHTTP(appPort, stylesheet).then((res) => res.text())
+        )
+          .replace(/\/\*.*?\*\//g, '')
+          .trim()
+
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`"a .foo{all:initial}"`)
+        } else {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`"a .styles_foo__G5630{all:initial}"`)
+        }
+      })
+    }
+  )
+})
+// Disabled with Turbopack because importing `.css` files in `.module.css` is handled as `.css` file not `.module.css` file
+;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
+  'CSS Modules: Importing Invalid Global CSS',
+  () => {
+    ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+      'production mode',
+      () => {
+        const appDir = join(fixturesDir, 'module-import-global-invalid')
+
+        beforeAll(async () => {
+          await remove(join(appDir, '.next'))
+        })
+
+        // eslint-disable-next-line jest/no-identical-title
+        it('should fail to build', async () => {
+          const { code, stderr } = await nextBuild(appDir, [], {
+            stderr: true,
+          })
+          expect(code).not.toBe(0)
+          expect(stderr).toContain('Failed to compile')
+          expect(stderr).toContain('pages/styles.css')
+          expect(stderr).toContain('Selector "a" is not pure')
+        })
+      }
+    )
+  }
+)
+
+// Turbopack uses LightningCSS which doesn't support `@value`.
+;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
+  'CSS Modules: Import Exports',
+  () => {
+    ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+      'production mode',
+      () => {
+        const appDir = join(fixturesDir, 'module-import-exports')
+
+        let appPort
+        let app
+        beforeAll(async () => {
+          await remove(join(appDir, '.next'))
+          const { code } = await nextBuild(appDir)
+          if (code !== 0) {
+            throw new Error('failed to build')
+          }
+          appPort = await findPort()
+          app = await nextStart(appDir, appPort)
+        })
+        afterAll(async () => {
+          await killApp(app)
+        })
+
+        it(`should've emitted a single CSS file`, async () => {
+          const content = await renderViaHTTP(appPort, '/')
+          const $ = cheerio.load(content)
+
+          const cssSheet = $('link[rel="stylesheet"]')
+          expect(cssSheet.length).toBe(1)
+
+          const stylesheet = cssSheet.attr('href')
+
+          const cssContent = (
+            await fetchViaHTTP(appPort, stylesheet).then((res) => res.text())
+          )
+            .replace(/\/\*.*?\*\//g, '')
+            .trim()
+
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`".styles_blk__480DC{color:#000000}"`)
+        })
+      }
+    )
+  }
+)

test/integration/css-features/test/index.test.ts

@@ -0,0 +1,170 @@
+/* eslint-env jest */
+
+import { remove } from 'fs-extra'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+  fetchViaHTTP,
+} from 'next-test-utils'
+import cheerio from 'cheerio'
+
+import { join } from 'path'
+
+const fixturesDir = join(__dirname, '../fixtures')
+
+describe('Custom Properties: Pass-Through IE11', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'cp-ie-11')
+
+      let appPort
+      let app
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+        const { code } = await nextBuild(appDir)
+        if (code !== 0) {
+          throw new Error('failed to build')
+        }
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      it(`should've emitted a single CSS file`, async () => {
+        const content = await renderViaHTTP(appPort, '/')
+        const $ = cheerio.load(content)
+
+        const cssSheet = $('link[rel="stylesheet"]')
+        expect(cssSheet.length).toBe(1)
+
+        const stylesheet = cssSheet.attr('href')
+
+        const cssContent = (
+          await fetchViaHTTP(appPort, stylesheet).then((res) => res.text())
+        )
+          .replace(/\/\*.*?\*\//g, '')
+          .trim()
+
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`":root{--color:red}h1{color:var(--color)}"`)
+        } else {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`":root{--color:red}h1{color:var(--color)}"`)
+        }
+      })
+    }
+  )
+})
+
+describe('Custom Properties: Pass-Through Modern', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'cp-modern')
+
+      let appPort
+      let app
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+        const { code } = await nextBuild(appDir)
+        if (code !== 0) {
+          throw new Error('failed to build')
+        }
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      it(`should've emitted a single CSS file`, async () => {
+        const content = await renderViaHTTP(appPort, '/')
+        const $ = cheerio.load(content)
+
+        const cssSheet = $('link[rel="stylesheet"]')
+        expect(cssSheet.length).toBe(1)
+
+        const stylesheet = cssSheet.attr('href')
+
+        const cssContent = (
+          await fetchViaHTTP(appPort, stylesheet).then((res) => res.text())
+        )
+          .replace(/\/\*.*?\*\//g, '')
+          .trim()
+
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`":root{--color:red}h1{color:var(--color)}"`)
+        } else {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(`":root{--color:red}h1{color:var(--color)}"`)
+        }
+      })
+    }
+  )
+})
+
+// This is checking invalid CSS that Lightning CSS in Turbopack interprets differently. Since it's invalid syntax it's documented as unsupported.
+;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)(
+  'Inline Comments: Minify',
+  () => {
+    ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+      'production mode',
+      () => {
+        const appDir = join(fixturesDir, 'inline-comments')
+
+        let appPort
+        let app
+        beforeAll(async () => {
+          await remove(join(appDir, '.next'))
+          const { code } = await nextBuild(appDir)
+          if (code !== 0) {
+            throw new Error('failed to build')
+          }
+          appPort = await findPort()
+          app = await nextStart(appDir, appPort)
+        })
+        afterAll(async () => {
+          await killApp(app)
+        })
+
+        it(`should've emitted a single CSS file`, async () => {
+          const content = await renderViaHTTP(appPort, '/')
+          const $ = cheerio.load(content)
+
+          const cssSheet = $('link[rel="stylesheet"]')
+          expect(cssSheet.length).toBe(1)
+
+          const stylesheet = cssSheet.attr('href')
+
+          const cssContent = (
+            await fetchViaHTTP(appPort, stylesheet).then((res) => res.text())
+          )
+            .replace(/\/\*.*?\*\//g, '')
+            .trim()
+
+          if (process.env.IS_TURBOPACK_TEST) {
+            expect(
+              cssContent.replace(/\/\*.*?\*\//g, '').trim()
+            ).toMatchInlineSnapshot(`""`)
+          } else {
+            expect(
+              cssContent.replace(/\/\*.*?\*\//g, '').trim()
+            ).toMatchInlineSnapshot(`"*{box-sizing:border-box}"`)
+          }
+        })
+      }
+    )
+  }
+)