@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

ccss({ margin: 1, at: [ ['mobile', { margin: 2 }], ['tablet', { margin: 3 }] ] })

ccss({
    margin: 1,
    at: [
        ['mobile', { margin: 2 }],
        ['tablet', { margin: 3 }]
    ]
})

Result

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)