CSS Media Query Compilation Issue

Why this is a good first issue

CSS media query compilation issue involving a specific PostCSS plugin bug.

AI Summary

The issue involves a bug in the CSS media query compilation process where parentheses are incorrectly dropped in `not` expressions. This requires understanding PostCSS and CSS Media Queries Level 4 syntax. The fix likely involves updating or patching the PostCSS plugin, but the exact scope depends on Next.js's internal PostCSS configuration.

Issue Description

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/fragrant-sky-dkr6k9

To Reproduce

Prerequisites

Node.js 18+ and yarn installed
Spirit Design System package (@alma-oss/spirit-web) that uses modern CSS media query range syntax

Steps to reproduce

Create a new Next.js 16.1.5 project

npx [email protected] nextjs-media-query-bug
cd nextjs-media-query-bug

Install Spirit Design System

yarn add @alma-oss/[email protected]

Create a minimal PostCSS config:

// postcss.config.mjs

export default {
  plugins: {
    autoprefixer: {
      flexbox: 'no-2009',
    },
  },
};

Import Spirit CSS utilities:

// app/globals.css

@import '@alma-oss/spirit-web/css/utilities.css';

Create a test page at:

// app/page.tsx

export default function Home() {
  return (
    <div className="d-only-tablet-none">
      This should be hidden on tablet (768px-1279px)
    </div>
  );
}

Build the application

yarn build

Current vs. Expected behavior

IMO, Next.js 16.1.5 bundles postcss-preset-env v7.4.3 internally, which uses @csstools/postcss-media-minmax to transpile CSS Media Queries Level 4 range syntax. The bundled version has a bug where it drops the outer parentheses around not expressions when combined with and operators, violating the CSS Media Queries Level 4 specification.

The CSS code before postprocessing:

@media (width >= 768px) and (width < 1280px) { … }

Current behavior after postprocessing.

 @media (min-width: 768px) and not (min-width: 1280px) { ... }

Expected behavior after postprocessing.

 @media (min-width: 768px) and (not (min-width: 1280px)) { ... }

Alternative solutions

Media Qu

GitHub Labels

CSS