[system] Add container queries utility #41674

siriwatknp · 2024-03-27T02:35:58Z

closes #36670

Context

The reasons I spend time on this:

CSS container queries browser support is very high (~91%) which is considered production-ready
The community has been waiting for a year and the requests keep coming
It's a nice addition for v6 that we can add to a blog post

✅ Need decision

I decided to make it a default theme. cc @DiegoAndai

~~Should we add container queries to the default theme or should it be opt-in?~~

I have followed (at least) the PR section of the contributing guide.

siriwatknp · 2024-03-27T02:37:06Z

packages/mui-babel-macros/MuiError.macro.d.ts

@@ -1,3 +1,3 @@
 export default class MuiError {
-  constructor(message: string);
+  constructor(message: string, ...args: string[]);


Come across this since my test is the first .ts that uses MuiError with multiple parameters.

mui-bot · 2024-03-27T02:39:03Z

Netlify deploy preview

@material-ui/core: parsed: +0.26% , gzip: +0.26%
@material-ui/lab: parsed: +0.52% , gzip: +0.57%
@material-ui/system: parsed: +1.82% , gzip: +1.64%
@mui/joy: parsed: +0.30% , gzip: +0.40%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 885caa5

DiegoAndai · 2024-03-27T12:35:33Z

Should we add container queries to the default theme or should it be opt-in?

If I understand correctly, this adds functionality but doesn't modify the existing media query one, right? I mean if you were doing

{ xs: { ... } }

You'll still be able to do it, and with this change you can add custom queries

{ xs: { ... }, '@350': {...} }

So isn't it opt-in by design? Is there something else you refer to with "should we add container queries to the default theme"?

siriwatknp · 2024-03-27T13:02:38Z

So isn't it opt-in by design? Is there something else you refer to with "should we add container queries to the default theme"?

The changes I made right now are kinda mixed between the two so let's neglect the code for now. We need to decide between

By "adding container queries to the default theme", I mean you can start using the new shorthand after upgrading to v6.
However, if we go with opt-in, developers have to wrap their theme with a new cssContainerQueries and then they can start using the new shorthand (if they don't use the fn, the new shorthand won't work).

DiegoAndai · 2024-03-27T13:48:37Z

you can start using the new shorthand after upgrading to v6

Are there any breaking changes associated with the new shorthand?

If yes, I would say we should go opt-in with the cssContainerQueries approach
If no, I would say we can add it by default in v6

Regarding browser support, it's important to consider it when users cannot opt out of features. For example, if we use the CSS property gap to implement a component, then the component cannot be used in browser versions that don't support gap. This case is different because if a user needs to support a browser version that doesn't support CSS container queries, they can still use the library and avoid the new shorthand feature, right? This is what I meant with this new shorthand feature being "opt-in by design".

elyseholladay · 2024-03-27T20:04:27Z

This case is different because if a user needs to support a browser version that doesn't support CSS container queries, they can still use the library and avoid the new shorthand feature, right? This is what I meant with this new shorthand feature being "opt-in by design".

As a user, I'd prefer it to be the default, so I don't have to wrap their theme with a new cssContainerQueries. Container queries, as @siriwatknp noted, are pretty well supported. If @DiegoAndai is correct above and you can just choose to use the additional query or not, and nothing else changes in the responsive queries, why not just make it the default?

siriwatknp · 2024-03-28T04:50:22Z

if a user needs to support a browser version that doesn't support CSS container queries, they can still use the library and avoid the new shorthand feature, right? This is what I meant with this new shorthand feature being "opt-in by design"

Yes, that's correct. It's the responsibility of developers to check browser support before using it.

why not just make it the default?

Because there will be computation overhead (the impact is based on the project size) for those who don't want to use container queries. This is the only concern I have.

Anyway, I don't mind making it as a default too.

…/container-query

siriwatknp · 2024-04-09T12:47:47Z

@DiegoAndai @mnajdova Would you mind taking a look at this PR again?

DiegoAndai

Looks good overall, just have a couple of minor questions

DiegoAndai · 2024-04-10T13:40:11Z

packages/mui-joy/src/styles/defaultTheme.test.js

@@ -9,6 +9,7 @@ describe('defaultTheme', () => {
        'colorSchemeSelector',
        'defaultColorScheme',
        'breakpoints',
+        'cq',


Could we (or should we) use containerQueries/containerQuery instead of cq?

Sure, it can be explicit on this.

Let me know if you decide to implement this change or not 😊

Done! changed to containerQueries (with ies)

DiegoAndai · 2024-04-10T13:53:54Z

packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts

+}
+
+/**
+ * For using in `sx` prop to sort the breakpoint from low to high.


Is this function only used for the xs, sm, md, lg, and xl queries?

I'm wondering as it only supports min-width declarations.

No, it supports valid CSS units like 40em or 300px but it requires all fields to use the same unit.

sx={{ flexDirection: { '@300px': 'column', '@500px': 'row', } }}

But it only supports min-width ones, right? So, for example, theme.cq.down, which outputs @container (max-width:...) won't be sorted correctly.

I want to better understand this function's use case. Is it internal or also for users?

The sorting only happens for the sx prop (happens internally, the function isn't meant for users) similar to theme breakpoints shorthand.

…/container-query

DiegoAndai

Nice work @siriwatknp 🚀

siriwatknp added 2 commits March 26, 2024 14:35

add container queries

05bc425

add containerQueries

ca0d779

siriwatknp added new feature New feature or request package: system Specific to @mui/system labels Mar 27, 2024

siriwatknp commented Mar 27, 2024

View reviewed changes

siriwatknp added 4 commits March 27, 2024 09:56

pnpm extract-error-codes

6682098

reexport cssContainerQueries

35e2a07

add demo

c66c031

remove cq prefix

235a5c3

siriwatknp mentioned this pull request Mar 27, 2024

Extend sx props to support a shorthand for container queries instead of only media queries #36670

Closed

2 tasks

siriwatknp added 3 commits April 3, 2024 12:05

make container queries as default

1ae42b4

Merge branch 'next' of https://github.com/mui/material-ui into system…

4aa9b01

…/container-query

simplify logic

2602d28

siriwatknp marked this pull request as ready for review April 3, 2024 06:19

siriwatknp added 6 commits April 3, 2024 13:24

add containerQueries to Joy theme

7a88670

add more tests

e77155d

Merge branch 'next' of https://github.com/mui/material-ui into system…

af3b7a1

…/container-query

add cq field to test

4493ee9

Merge branch 'next' of https://github.com/mui/material-ui into system…

a1aa6d6

…/container-query

pnpm extract-error-codes

07907de

siriwatknp requested review from DiegoAndai and mnajdova April 9, 2024 09:29

DiegoAndai reviewed Apr 10, 2024

View reviewed changes

siriwatknp added 2 commits April 12, 2024 09:31

change cq to containerQueries

7677ad0

Merge branch 'next' of https://github.com/mui/material-ui into system…

885caa5

…/container-query

DiegoAndai approved these changes Apr 12, 2024

View reviewed changes

siriwatknp merged commit 3b3f08c into mui:next Apr 17, 2024
22 checks passed

siriwatknp mentioned this pull request Apr 17, 2024

[release] v6.0.0-alpha.3 #41916

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[system] Add container queries utility #41674

[system] Add container queries utility #41674

siriwatknp commented Mar 27, 2024 •

edited

Loading

siriwatknp Mar 27, 2024

mui-bot commented Mar 27, 2024 •

edited

Loading

DiegoAndai commented Mar 27, 2024

siriwatknp commented Mar 27, 2024 •

edited

Loading

DiegoAndai commented Mar 27, 2024 •

edited

Loading

elyseholladay commented Mar 27, 2024

siriwatknp commented Mar 28, 2024 •

edited

Loading

siriwatknp commented Apr 9, 2024

DiegoAndai left a comment

DiegoAndai Apr 10, 2024

siriwatknp Apr 11, 2024 •

edited

Loading

DiegoAndai Apr 11, 2024

siriwatknp Apr 12, 2024 •

edited

Loading

DiegoAndai Apr 10, 2024

siriwatknp Apr 11, 2024 •

edited

Loading

DiegoAndai Apr 11, 2024

siriwatknp Apr 11, 2024

DiegoAndai left a comment

[system] Add container queries utility #41674

[system] Add container queries utility #41674

Conversation

siriwatknp commented Mar 27, 2024 • edited Loading

Context

✅ Need decision

siriwatknp Mar 27, 2024

Choose a reason for hiding this comment

mui-bot commented Mar 27, 2024 • edited Loading

Netlify deploy preview

Bundle size report

DiegoAndai commented Mar 27, 2024

siriwatknp commented Mar 27, 2024 • edited Loading

DiegoAndai commented Mar 27, 2024 • edited Loading

elyseholladay commented Mar 27, 2024

siriwatknp commented Mar 28, 2024 • edited Loading

siriwatknp commented Apr 9, 2024

DiegoAndai left a comment

Choose a reason for hiding this comment

DiegoAndai Apr 10, 2024

Choose a reason for hiding this comment

siriwatknp Apr 11, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai Apr 11, 2024

Choose a reason for hiding this comment

siriwatknp Apr 12, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai Apr 10, 2024

Choose a reason for hiding this comment

siriwatknp Apr 11, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai Apr 11, 2024

Choose a reason for hiding this comment

siriwatknp Apr 11, 2024

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

siriwatknp commented Mar 27, 2024 •

edited

Loading

mui-bot commented Mar 27, 2024 •

edited

Loading

siriwatknp commented Mar 27, 2024 •

edited

Loading

DiegoAndai commented Mar 27, 2024 •

edited

Loading

siriwatknp commented Mar 28, 2024 •

edited

Loading

siriwatknp Apr 11, 2024 •

edited

Loading

siriwatknp Apr 12, 2024 •

edited

Loading

siriwatknp Apr 11, 2024 •

edited

Loading