Bug-Report: CSS Minification & @container queries with named containers

  • Breeze v2.0.22, WordPress v6.1.2

    Breeze strips out the white-space between the container name and the opening parenthesis. This causes @container queries to stop working.

    Example:

    .container {
	container-type: inline-size;
	container-name: contain;
}

@container contain (min-width: 200px) {
	h1 {
		background: red;
	}
}

    With CSS Minification turned on the container query becomes:

    @container contain(min-width:200px) {
...
}

    The missing white-space causes the container query to fail. I’ve verified this by going into DevTools and restoring the space; the CSS works again.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author adeelkhan

    (@adeelkhan)

    Could you please share the complete and broken CSS file?

    Thread Starter lim2me

    (@lim2me)

    I’ve created a demo of the issue here. Go to DevTools and look for the minified CSS file created by Breeze. Search this file for breeze-container. The offending line is this:

    @container breeze-container(min-width:400px)

    Notice how there is no space between the word “breeze-container” and the opening bracket because Breeze removed it. This prevents the container query from working. Now add a space between them in DevTools and the container query should work.

    Resize your browser width to test. The background should be red in narrow screens and blue in screens at least 400px wide.

    Plugin Author adeelkhan

    (@adeelkhan)

    Thanks for your details response.

    We will definitely look into it.

    Plugin Author adeelkhan

    (@adeelkhan)

    Please update the latest version of Breeze.

    Thread Starter lim2me

    (@lim2me)

    Hello. The bug is still there. I updated to Breeze v2.0.28 and cleared all the caches. You can check the demo page in the earlier post.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Bug-Report: CSS Minification & @container queries with named containers’ is closed to new replies.