70 lines
3.0 KiB
JavaScript
70 lines
3.0 KiB
JavaScript
import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
|
|
/**
|
|
* For using in `sx` prop to sort the breakpoint from low to high.
|
|
* Note: this function does not work and will not support multiple units.
|
|
* e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
|
|
* output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
|
|
*/
|
|
export function sortContainerQueries(theme, css) {
|
|
if (!theme.containerQueries) {
|
|
return css;
|
|
}
|
|
const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
|
|
const regex = /min-width:\s*([0-9.]+)/;
|
|
return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
|
|
});
|
|
if (!sorted.length) {
|
|
return css;
|
|
}
|
|
return sorted.reduce((acc, key) => {
|
|
const value = css[key];
|
|
delete acc[key];
|
|
acc[key] = value;
|
|
return acc;
|
|
}, {
|
|
...css
|
|
});
|
|
}
|
|
export function isCqShorthand(breakpointKeys, value) {
|
|
return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
|
|
}
|
|
export function getContainerQuery(theme, shorthand) {
|
|
const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
|
|
if (!matches) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
|
|
For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(18, `(${shorthand})`));
|
|
}
|
|
return null;
|
|
}
|
|
const [, containerQuery, containerName] = matches;
|
|
const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
|
|
return theme.containerQueries(containerName).up(value);
|
|
}
|
|
export default function cssContainerQueries(themeInput) {
|
|
const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
|
|
function attachCq(node, name) {
|
|
node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
|
|
node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
|
|
node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
|
|
node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
|
|
node.not = (...args) => {
|
|
const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
|
|
if (result.includes('not all and')) {
|
|
// `@container` does not work with `not all and`, so need to invert the logic
|
|
return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
const node = {};
|
|
const containerQueries = name => {
|
|
attachCq(node, name);
|
|
return node;
|
|
};
|
|
attachCq(containerQueries);
|
|
return {
|
|
...themeInput,
|
|
containerQueries
|
|
};
|
|
} |