@cryptic-css/prop-mq

Adds support to use the viewport definition method behind @w11r/use-breakpoint's React hook.

The output is plain Media Query

The basic logic:

  • Define default values.
  • Define overrides per breakpoint.

Usage

Live Editor
Result
margin: 5px;
@media screen and (min-width: 376px) and (max-width: 639px) {
margin: 10px;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
margin: 15px;
}

Configuration

The plugin included in the ccss package pre-configured. Skip this step if you don't need custom configuration and/or CCSS instance.

import { createCCSS, createOptions } from '@cryptic-css/core'
import applyPropMQ from '@cryptic-css/prop-mq'
const options = createOptions()
applyPropMQ(options)
const ccss = createCCSS(options)