Split tests

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

@@ -0,0 +1,4 @@
+/* Correct syntax: input::placeholder */
+input:placeholder {
+  color: red;
+}

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

@@ -1,5 +1,7 @@
 'use client'
 
+import './error-1.css'
+
 export default function Page() {
   return (
     <>

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

@@ -0,0 +1,8 @@
+.rowContainer {
+  &.header {
+    /* Correct syntax: &.darktheme */
+    &:darktheme {
+      border-bottom-color: var(--accents-2);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+'use client'
+
+import './error-2.css'
+
+export default function Page() {
+  return (
+    <>
+      <div></div>
+    </>
+  )
+}

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

@@ -0,0 +1,6 @@
+.rowContainer {
+  /* 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/css-error-3/page.js

@@ -0,0 +1,11 @@
+'use client'
+
+import './error-3.css'
+
+export default function Page() {
+  return (
+    <>
+      <div></div>
+    </>
+  )
+}

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

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

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

@@ -19,8 +19,24 @@ describe('app dir - css', () => {
     ;(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')
+        it('should report human-readable error message for wrong pseudo class', async () => {
+          const browser = await next.browser('/css-error-1')
+
+          const source = await getRedboxSource(browser)
+
+          expect(source).toMatchInlineSnapshot()
+        })
+
+        it('should report human-readable error message for wrong global class', async () => {
+          const browser = await next.browser('/css-error-2')
+
+          const source = await getRedboxSource(browser)
+
+          expect(source).toMatchInlineSnapshot()
+        })
+
+        it('should report human-readable error message for wrong css module', async () => {
+          const browser = await next.browser('/css-error-3')
 
           const source = await getRedboxSource(browser)