@cryptic-css/prop-mq

Adds support to use the viewport definition method behind @w11r/use-breakpoint's React hook. Prop names: mediaQuery, mq, at

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 ccss from '@cryptic-css/core'
import propMQ from '@cryptic-css/prop-mq'
ccss.use(propMQ)
Last updated on by Victor Vincent