aliascss
Version:
AliasCSS is a CSS post processor.
76 lines (75 loc) • 3.7 kB
JavaScript
const media = {
// test:/^(print|xs|sm|md|lg|xl|xxl|-xs|-sm|-md|-lg|-xl|-xxl|-2xl)(?=[-|_])/,
test: new RegExp("^(" + "print|xs|sm|md|lg|xl|xxl|-xs|-sm|-md|-lg|-xl|-xxl|-2xl" + ")(?=[-|_])"),
target: {
print: '@media print',
'@hover': '@media screen and (hover: hover)',
'@print': '@media print',
'@landscape': '@media (orientation: landscape)',
'@portrait': '@media (orientation: portrait)',
'@container-xs': '@container (max-width : 576px)',
'@container-sm': '@container (min-width : 576px)',
'@container-md': '@container (min-width : 768px)',
'@container-lg': '@container (min-width : 992px)',
'@container-xl': '@container (min-width : 1200px)',
'@container-2xl': '@container (min-width : 1408px)',
'@forced-color-active': '@media (forced-colors: active)',
'@fca': '@media (forced-colors: active)',
'@standalone': '@media (display-mode: standalone)',
'@browser': '@media (display-mode: browser)',
'@short-height': '@media (max-height: 600px)',
'@xsh': '@media (max-height: 600px)',
'@p3': '@media (color-gamut: p3)',
'@motion-reduce': '@media (prefers-reduced-motion: reduce)',
'@mouse': '@media (hover: hover) and (pointer: fine)',
'@touch': '@media (hover: none) and (pointer: coarse)',
'@resolution-lg': '@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
'@resolution-xl': '@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi)',
'@contrast-more': '@media (prefers-contrast: more)',
'@data-reduce': '@media (prefers-reduced-data: reduce)',
xs: '@media (max-width : 576px)',
'@xs': '@media (max-width : 576px)',
sm: '@media (min-width : 576px)',
'@sm': '@media (min-width : 576px)',
md: '@media (min-width : 768px)',
'@md': '@media (min-width : 768px)',
lg: '@media (min-width : 992px)',
'@lg': '@media (min-width : 992px)',
xl: '@media (min-width : 1200px)',
'@xl': '@media (min-width : 1200px)',
// xxl: '@media (min-width : 1408px)',
'@2xl': '@media (min-width : 1408px)',
'2xl': '@media (min-width : 1408px)',
'-xs': '@media (min-width : 576px)',
'-@xs': '@media (min-width : 576px)',
'-@sm': '@media (max-width : 576px)',
'-sm': '@media (max-width : 576px)',
'-@md': '@media (max-width : 768px)',
'-md': '@media (max-width : 768px)',
'-@lg': '@media (max-width : 992px)',
'-lg': '@media (max-width : 992px)',
'-@xl': '@media (max-width : 1200px)',
'-xl': '@media (max-width : 1200px)',
// '-@xxl': '@media (max-width : 1408px)',
// '-xxl': '@media (max-width : 1408px)',
'-@2xl': '@media (max-width : 1408px)',
'-2xl': '@media (max-width : 1408px)',
'dark': '@media (prefers-color-scheme: dark)',
'@dark': '@media (prefers-color-scheme: dark)',
'light': '@media (prefers-color-scheme: light)',
'@light': '@media (prefers-color-scheme: light)',
'@theme': '@layer theme',
'@base': '@layer base',
'@components': '@layer components',
'@comps': '@layer components',
'@utils': '@layer utilities',
'@utilities': '@layer utilities',
'@starting-style': '@starting-style',
'@ss': '@starting-style',
},
};
export function createRegexForMedia(prefix) {
const prefixAlias = Object.keys(prefix).reduce((previous, current) => previous + "|" + current);
return new RegExp("^(" + prefixAlias + ")(?=[-|_])");
}
export default media;