exempt data URL CSS from Pages Router global CSS restriction

data:text/css imports are generated by tooling (e.g. next-yak) and
are inline per-component — the global CSS ordering concern doesn't
apply. The validation already had a carve-out for node_modules,
this adds the same for data URL modules.

Author: jantimon

crates/next-api/src/module_graph.rs

@@ -846,9 +846,12 @@ async fn validate_pages_css_imports_individual(
     candidates
         .into_iter()
         .map(async |issue| {
+            let path = issue.module.ident().path().await?;
             // We allow imports of global CSS files which are inside of `node_modules`.
+            // We also allow data URL CSS imports (e.g. `data:text/css,...`) since they
+            // are mostly tooling-generated and co-located with the importing components
             Ok(
-                if !issue.module.ident().path().await?.is_in_node_modules() {
+                if !path.is_in_node_modules() && !path.file_name().starts_with("data:") {
                     Some(issue)
                 } else {
                     None
@@ -868,8 +871,9 @@ async fn validate_pages_css_imports_individual(
 /// Validates that the global CSS/SCSS/SASS imports are only valid imports with the following
 /// rules:
 /// * The import is made from a `node_modules` package
+/// * The imported CSS is a `data:` URL module
 /// * The import is made from a `.module.css` file
-/// * The import is made from the `pages/_app.js`, or equivalent file.
+/// * The import is made from the `pages/_app.js`, or equivalent file
 #[turbo_tasks::function]
 pub async fn validate_pages_css_imports(
     graph: Vc<ModuleGraph>,

test/e2e/css-data-url-global-pages/css-data-url-global-pages.test.ts

@@ -0,0 +1,21 @@
+import { nextTestSetup } from 'e2e-utils'
+
+// CSS data urls are only supported in Turbopack
+;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
+  'css-data-url-global-pages',
+  () => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+    })
+
+    it('should apply styles from data url correctly', async () => {
+      const browser = await next.browser('/')
+
+      const fontWeight = await browser
+        .elementByCss('#styled')
+        .getComputedCss('font-weight')
+
+      expect(fontWeight).toBe('700')
+    })
+  }
+)

test/e2e/css-data-url-global-pages/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+}
+
+export default nextConfig

test/e2e/css-data-url-global-pages/pages/index.tsx

@@ -0,0 +1,6 @@
+// @ts-expect-error
+import 'data:text/css,#styled{font-weight:700}'
+
+export default function Home() {
+  return <div id="styled">This text should be bold</div>
+}