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.


Live Editor
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;


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'
Last updated on by Victor Vincent