tiny-vue/examples/sites/tiny-uno/variants/mediaquery.js

15 lines
405 B
JavaScript

// mediaQuery , xs:w120 sm:w60 md:w80 lg:w120 md:w240 lg:w480
export default (matcher, context) => {
const reg = '^(xs|sm|md|lg):'
const [, mediaQuery = ''] = matcher.match(new RegExp(reg)) ?? []
if (!mediaQuery) {
return matcher
}
let bp = context.theme.breakpoints
return {
matcher: matcher.replace(/^.+?:(.*)$/, '$1'),
parent: `@media (min-width: ${bp[mediaQuery]})`
}
}