`ts
import { toCustomPropertiesArray, toCustomPropertiesString } from 'object-to-css-variables'

const customProperties = {
success: {
400: '#BAE944',
700: '#649D06',
},
info: {
400: '#48F0FD',
700: '#067FB5',
},
warning: {
400: '#FDCC70',
700: '#B57020',
},
danger: {
400: '#FF7C65',
700: '#B71928',
},
}

toCustomPropertiesArray(customProperties)
/* log ->
[
{ key: '--success-400', value: '#BAE944' },
{ key: '--success-700', value: '#649D06' },
{ key: '--info-400', value: '#48F0FD' },
{ key: '--info-700', value: '#067FB5' },
{ key: '--warning-400', value: '#FDCC70' },
{ key: '--warning-700', value: '#B57020' },
{ key: '--danger-400', value: '#FF7C65' },
{ key: '--danger-700', value: '#B71928' }
]
*/

toCustomPropertiesString(customProperties)
/* log ->
--success-400: #BAE944; --success-700: #649D06; --info-400: #48F0FD; --info-700: #067FB5; --warning-400: #FDCC70; --warning-700: #B57020; --danger-400: #FF7C65; --danger-700: #B71928;
*/
`

`ts
import { toCustomMediaQueriesArray, toCustomMediaQueriesString } from 'object-to-css-variables'

const customMediaQueries = {
phone: '(max-width: 428px)',
tablet: '(max-width: 768px)',
laptop: '(max-width: 1024px)',
desktop: '(max-width: 1440px)',
}

toCustomMediaQueriesArray(customMediaQueries)
/* log ->
[
{ key: '--phone', value: '(max-width: 428px)' },
{ key: '--tablet', value: '(max-width: 768px)' },
{ key: '--laptop', value: '(max-width: 1024px)' },
{ key: '--desktop', value: '(max-width: 1440px)' }
]
*/

toCustomMediaQueriesString(customMediaQueries)
/* log ->
@custom-media --phone (max-width: 428px); @custom-media --tablet (max-width: 768px); @custom-media --laptop (max-width: 1024px); @custom-media --desktop (max-width: 1440px);
*/
`