const conditions: string[] = [];
const extractCondition = (mediaQuery: string) =>
mediaQuery.replace(/^@media\s*/i, '');
if (onlyValues.includes('xs')) {
conditions.push(extractCondition(theme.breakpoints.only('xs')));
}
if (onlyValues.includes('sm')) {
conditions.push(extractCondition(theme.breakpoints.only('sm')));
}
if (onlyValues.includes('md')) {
conditions.push(extractCondition(theme.breakpoints.only('md')));
}
if (onlyValues.includes('lg')) {
conditions.push(extractCondition(theme.breakpoints.only('lg')));
}
if (onlyValues.includes('xl')) {
conditions.push(extractCondition(theme.breakpoints.only('xl')));
}
if (xsUp) {
conditions.push(extractCondition(theme.breakpoints.up('xs')));
}
if (smUp) {
conditions.push(extractCondition(theme.breakpoints.up('sm')));
}
if (mdUp) {
conditions.push(extractCondition(theme.breakpoints.up('md')));
}
if (lgUp) {
conditions.push(extractCondition(theme.breakpoints.up('lg')));
}
if (xlUp) {
conditions.push(extractCondition(theme.breakpoints.up('xl')));
}
if (xsDown) {
conditions.push(extractCondition(theme.breakpoints.down('xs')));
}
if (smDown) {
conditions.push(extractCondition(theme.breakpoints.down('sm')));
}
if (mdDown) {
conditions.push(extractCondition(theme.breakpoints.down('md')));
}
if (lgDown) {
conditions.push(extractCondition(theme.breakpoints.down('lg')));
}
if (xlDown) {
conditions.push(extractCondition(theme.breakpoints.down('xl')));
}
const mediaQuery =
conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all';
const matches = useMediaQuery(mediaQuery);
if (matches) {
Originally posted by @Copilot in #1347