addAtom

You can create your own Atomic Props with addAtom.

Basic Usage

import { addAtom } from '@fower/core'
addAtom('textHeading', {  fontSize: 28,  fontWeight: 600,  lineHeight: 1.5,})

You register a Atomic Props call textHeading, it generates css rule:

font-size: 28px;font-weight: 600;line-height: 1.5;

now you can use it:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO

Advanced

import { addAtom } from '@fower/core'
addAtom(/heading(sm|md|lg)/i, (atom) => {  const size = atom.propKey.replace('heading', '').toLowerCase()  switch (size) {    case 'sm':      atom.style = { fontSize: 16 }      break    case 'md':      atom.style = { fontSize: 24 }      break    case 'lg':      atom.style = { fontSize: 32 }      break    default:      break  }  return atom})

You register some Atomic Props matched with /heading(sm|md|lg)/i, now you can use them:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO