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.


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 { createCCSS, createOptions } from '@cryptic-css/core'
import applyPropMQ from '@cryptic-css/prop-mq'
const options = createOptions()
const ccss = createCCSS(options)