@media query interpolation broken in 12.0.4

[Eyas]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

v16.11.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

PR #31407 fixed #30480 but introduced a new issue where interpolated strings in media queries are sometimes unnecessarily parenthesized.

Consider this, which used to work in 12.0.3 and before:

/// theme.ts

// Media Queries
export const Target: { [size in ScreenSizeQuery]: string } &
  { [prop in OtherQueries]: string } = {
  smallOnly: "screen and (max-width: 580px)",
  smallPlus: "screen and (min-width: 580px)",
  mediumPlus: "screen and (min-width: 700px)",
  largePlus: "screen and (min-width: 900px)",
  xlPlus: "screen and (min-width: 1200px)",
  touchScreen: "(hover: none), (pointer: coarse)",
};

And elsewhere in JSX:

/// _app.tsx

// ...
      <style jsx global>{`
        html {
          font-size: ${Typography.base.size.default};
          line-height: ${Typography.base.lineHeight};
        }
        @media ${Target.mediumPlus} {
          html {
            font-size: ${Typography.base.size.mediumPlus};
          }
        }
        @media ${Target.largePlus} {
          html {
            font-size: ${Typography.base.size.largePlus};
          }
        }
      `}</style>
// ...

Expected Behavior

This should compile into:

            html {
                font-size: 16px;
                line-height: 1.75;
            }

            @media screen and (min-width: 700px) {
                html {
                    font-size:18px;
                }
            }

            @media screen and (min-width: 900px) {
                html {
                    font-size:21px;
                }
            }

To Reproduce

Instead, in 12.0.4, it compiles into:

html {font-size:16px; line-height:1.75}
@media (screen and (min-width: 700px)) {html {font-size:18px}}
@media (screen and (min-width: 900px)) {html {font-size:21px}}

Notably, this should be @media screen and (min-width: 700px) {} rather than @media (screen and (min-width: 700px)) {}.

[Eyas]

cc @kdy1 who probably has the most context.

[Eyas]

Specifically, the ({}) formatting here should not be happening unconditionally:

next.js/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs

Lines 136 to 151 in 0f96308

	impl VisitMut for CssPlaceholderFixer {
	fn visit_mut_media_query(&mut self, q: &mut MediaQuery) {
	q.visit_mut_children_with(self);
	match q {
	MediaQuery::Ident(q) => {
	if q.raw.starts_with("__styled-jsx-placeholder-") {
	// TODO(kdy1): Remove this once we have CST for media query.
	// We need good error recovery for media queries to handle this.
	q.raw = format!("({})", &q.value).into();
	}
	}
	_ => {}
	}
	}
	}

[Eyas]

Hey all -- just checking if there's any update on this. I've seen improvements around styled_jsx swc transforms but none seem to address this issue. It's blocking a few folks from upgrading to 12.0.4 ¹.

Footnotes

1. (or 12.* at all, since each of the previous patch versions before this logic was introduced had their own upgrade blocking issues..) ↩

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.