+
Where does it come from?
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It
+ has roots in a piece of classical Latin literature from 45 BC, making it
+ over 2000 years old. Richard McClintock, a Latin professor at
+ Hampden-Sydney College in Virginia, looked up one of the more obscure
+ Latin words, consectetur, from a Lorem Ipsum passage, and going through
+ the cites of the word in classical literature, discovered the
+ undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+ of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+ Cicero, written in 45 BC. This book is a treatise on the theory of
+ ethics, very popular during the Renaissance. The first line of Lorem
+ Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
+ 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
+ reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
+ "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
+ exact original form, accompanied by English versions from the 1914
+ translation by H. Rackham.
+
+
+ )
+}
diff --git a/test/integration/next-dynamic-css/src/Component2.module.scss b/test/integration/next-dynamic-css/src/Component2.module.scss
new file mode 100644
index 0000000000000..c899a8eb6492e
--- /dev/null
+++ b/test/integration/next-dynamic-css/src/Component2.module.scss
@@ -0,0 +1,13 @@
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
diff --git a/test/integration/next-dynamic-css/src/Content.jsx b/test/integration/next-dynamic-css/src/Content.jsx
new file mode 100644
index 0000000000000..7b46fb3ede7be
--- /dev/null
+++ b/test/integration/next-dynamic-css/src/Content.jsx
@@ -0,0 +1,29 @@
+import styles from './Content.module.css'
+import Content2 from './Component2'
+
+export default function Content() {
+ return (
+
+
Where does it come from?
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It
+ has roots in a piece of classical Latin literature from 45 BC, making it
+ over 2000 years old. Richard McClintock, a Latin professor at
+ Hampden-Sydney College in Virginia, looked up one of the more obscure
+ Latin words, consectetur, from a Lorem Ipsum passage, and going through
+ the cites of the word in classical literature, discovered the
+ undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+ of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+ Cicero, written in 45 BC. This book is a treatise on the theory of
+ ethics, very popular during the Renaissance. The first line of Lorem
+ Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
+ 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
+ reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
+ "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
+ exact original form, accompanied by English versions from the 1914
+ translation by H. Rackham.
+
+
+
+ )
+}
diff --git a/test/integration/next-dynamic-css/src/Content.module.css b/test/integration/next-dynamic-css/src/Content.module.css
new file mode 100644
index 0000000000000..c899a8eb6492e
--- /dev/null
+++ b/test/integration/next-dynamic-css/src/Content.module.css
@@ -0,0 +1,13 @@
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
diff --git a/test/integration/next-dynamic-css/src/Content4.module.css b/test/integration/next-dynamic-css/src/Content4.module.css
new file mode 100644
index 0000000000000..c0fda1fa58a6e
--- /dev/null
+++ b/test/integration/next-dynamic-css/src/Content4.module.css
@@ -0,0 +1,1067 @@
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
+.header {
+ font-style: italic;
+}
+
+.container {
+ background-color: #dddddd;
+ padding: 1rem;
+}
+
+.textContent {
+ color: #666;
+ letter-spacing: -1px;
+}
diff --git a/test/integration/next-dynamic-css/src/inner/k.jsx b/test/integration/next-dynamic-css/src/inner/k.jsx
new file mode 100644
index 0000000000000..56b2a28adc462
--- /dev/null
+++ b/test/integration/next-dynamic-css/src/inner/k.jsx
@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic'
+
+export const Comp = dynamic(() => import('../Content'), { ssr: false })
diff --git a/test/integration/next-dynamic-css/src/pages/index.jsx b/test/integration/next-dynamic-css/src/pages/index.jsx
new file mode 100644
index 0000000000000..8e13520c289c1
--- /dev/null
+++ b/test/integration/next-dynamic-css/src/pages/index.jsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import style from '../Content4.module.css'
+import { Comp } from '../inner/k'
+
+export default function Index() {
+ const [s] = useState(true)
+
+ if (s) {
+ return (
+ <>
+