Fix support for custom-media-queries in LightningCSS

packages/next/src/build/webpack/loaders/lightningcss-loader/src/loader.ts

@@ -369,6 +369,14 @@ export async function LightningCssLoader(
     : 0
   const includeMask = (1 | userIncludeMask) & ~userExcludeMask // 1 = Features.Nesting
 
+  // `@custom-media` is draft syntax and behind a parser flag
+  // (`drafts.customMedia`).
+  //
+  // See: https://lightningcss.dev/transpilation.html#custom-media-queries
+  const customMediaMask = featureNamesToMask(['custom-media-queries'])
+  const drafts =
+    (includeMask & customMediaMask) !== 0 ? { customMedia: true } : undefined
+
   try {
     const {
       code,
@@ -392,6 +400,7 @@ export async function LightningCssLoader(
         this.sourceMap && prevMap ? JSON.stringify(prevMap) : undefined,
       include: includeMask,
       exclude: userExcludeMask,
+      drafts,
     })
     let cssCodeAsString = code.toString()
 

test/e2e/app-dir/experimental-lightningcss-features/app/custom-media/page.module.css

@@ -0,0 +1,11 @@
+@custom-media --narrow (max-width: 960px);
+
+.box {
+  color: blue;
+}
+
+@media (--narrow) {
+  .box {
+    color: red;
+  }
+}

test/e2e/app-dir/experimental-lightningcss-features/app/custom-media/page.tsx

@@ -0,0 +1,5 @@
+import styles from './page.module.css'
+
+export default function Page() {
+  return <div className={styles.box}>Custom media</div>
+}

test/e2e/app-dir/experimental-lightningcss-features/experimental-lightningcss-features.test.ts

@@ -52,6 +52,34 @@ describe('experimental-lightningcss-features', () => {
     })
   })
 
+  describe('custom-media-queries', () => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+      dependencies: { lightningcss: '^1.23.0' },
+      packageJson: {
+        browserslist: ['chrome 123'],
+      },
+      nextConfig: {
+        experimental: {
+          useLightningcss: true,
+          lightningCssFeatures: {
+            include: ['custom-media-queries'],
+          },
+        },
+      },
+    })
+
+    it('should substitute @custom-media when custom-media-queries is included', async () => {
+      const html = await next.render('/custom-media')
+      expect(html).toContain('Custom media')
+
+      const css = await collectPageCss(next, '/custom-media')
+      expect(css).not.toContain('@custom-media')
+      expect(css).not.toContain('--narrow')
+      expect(css).toMatch(/max-width:\s*960px|width\s*<=\s*960px/)
+    })
+  })
+
   describe('exclude', () => {
     const { next } = nextTestSetup({
       files: __dirname,

turbopack/crates/turbopack-css/src/process.rs

@@ -4,7 +4,9 @@ use anyhow::{Result, bail};
 use async_trait::async_trait;
 use lightningcss::{
     css_modules::{CssModuleExport, Pattern, Segment},
-    stylesheet::{MinifyOptions, ParserOptions, PrinterOptions, StyleSheet, ToCssResult},
+    stylesheet::{
+        MinifyOptions, ParserFlags, ParserOptions, PrinterOptions, StyleSheet, ToCssResult,
+    },
     targets::{BrowserslistConfig, Features, Targets},
     traits::ToCss,
     values::url::Url,
@@ -450,7 +452,19 @@ async fn process_content(
         }
     }
 
+    // `@custom-media` is draft syntax and behind a parser flag.
+    //
+    // See: https://lightningcss.dev/transpilation.html#custom-media-queries
+    let mut flags = ParserFlags::empty();
+    let include_features = Features::from_bits_truncate(feature_flags.include)
+        & !Features::from_bits_truncate(feature_flags.exclude);
+    flags.set(
+        ParserFlags::CUSTOM_MEDIA,
+        include_features.contains(Features::CustomMediaQueries),
+    );
+
     let config = ParserOptions {
+        flags,
         css_modules: match ty {
             CssModuleType::Module => Some(lightningcss::css_modules::Config {
                 pattern: Pattern {