Add a test

test/development/css-error/app/css-error/page.js

@@ -0,0 +1,9 @@
+'use client'
+
+export default function Page() {
+  return (
+    <>
+      <div></div>
+    </>
+  )
+}

test/development/css-error/app/global.css

@@ -0,0 +1,19 @@
+/* Correct syntax: input::placeholder */ 
+input:placeholder {
+  color: red;
+}
+
+.rowContainer {
+  &.header {
+    /* Correct syntax: &.darktheme */
+    &:darktheme {
+      border-bottom-color: var(--accents-2);
+    }
+  }
+
+  /* Correct syntax: &.global(.dark-theme) */
+  &:global(.dark-theme) & {
+    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+  }
+}
+

test/development/css-error/app/layout.js

@@ -0,0 +1,7 @@
+'use client'
+
+import './global.css'
+
+export default function Layout({ children }) {
+  return <>{children}</>
+}

test/development/css-error/index.test.ts

@@ -0,0 +1,32 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getRedboxSource } from 'next-test-utils'
+
+describe('app dir - css', () => {
+  const { next, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+    dependencies: {
+      sass: 'latest',
+    },
+  })
+
+  if (skipped) {
+    return
+  }
+
+  describe('css support', () => {
+    // css-loader does not report an error for this case
+    ;(process.env.TURBOPACK ? describe : describe.skip)(
+      'error handling',
+      () => {
+        it('should report human-readable error message for css', async () => {
+          const browser = await next.browser('/css-error')
+
+          const source = await getRedboxSource(browser)
+
+          expect(source).toMatchInlineSnapshot()
+        })
+      }
+    )
+  })
+})