How to use the css-in-js-utils/lib/cssifyDeclaration function in css-in-js-utils

if (!renderer.cache.hasOwnProperty(declarationReference)) {
            // we remove undefined values to enable
            // usage of optional props without side-effects
            if (isUndefinedValue(value)) {
              renderer.cache[declarationReference] = '';
              /* eslint-disable no-continue */
              continue;
              /* eslint-enable */
            }

            var className = renderer.selectorPrefix + generateClassName(++renderer.uniqueRuleIdentifier);

            renderer.cache[declarationReference] = className;

            var cssDeclaration = cssifyDeclaration(property, value);
            var selector = getCSSSelector(className, pseudo);
            var cssRule = generateCSSRule(selector, cssDeclaration);

            if (media.length > 0) {
              if (!renderer.mediaRules.hasOwnProperty(media)) {
                renderer.mediaRules[media] = '';
              }

              renderer.mediaRules[media] += cssRule;
            } else {
              renderer.rules += cssRule;
            }

            renderer._emitChange({
              selector: selector,
              declaration: cssDeclaration,

if (!renderer.cache.hasOwnProperty(declarationReference)) {
            // we remove undefined values to enable
            // usage of optional props without side-effects
            if (isUndefinedValue(value)) {
              renderer.cache[declarationReference] = ''
              /* eslint-disable no-continue */
              continue
              /* eslint-enable */
            }

            const className = renderer.selectorPrefix +
              generateClassName(++renderer.uniqueRuleIdentifier)

            renderer.cache[declarationReference] = className

            const cssDeclaration = cssifyDeclaration(property, value)
            const selector = generateCSSSelector(className, pseudo)
            const cssRule = generateCSSRule(selector, cssDeclaration)

            if (media.length > 0) {
              if (!renderer.mediaRules.hasOwnProperty(media)) {
                renderer.mediaRules[media] = ''
              }

              renderer.mediaRules[media] += cssRule
            } else {
              renderer.rules += cssRule
            }

            renderer._emitChange({
              selector,
              declaration: cssDeclaration,

renderer.cache[declarationReference] = {
                className: '',
              }
              /* eslint-disable no-continue */
              continue
              /* eslint-enable */
            }

            const className =
              renderer.selectorPrefix +
              generateClassName(
                renderer.getNextRuleIdentifier,
                renderer.filterClassName
              )

            const declaration = cssifyDeclaration(property, value)
            const selector = generateCSSSelector(className, pseudo)

            const change = {
              type: RULE_TYPE,
              className,
              selector,
              declaration,
              pseudo,
              media,
              support,
            }

            renderer.cache[declarationReference] = change
            renderer._emitChange(change)
          }

value.forEach(function (val) {
          return decs.push(cssifyDeclaration(key, val));
        });
        return 'continue';

var _loop = function _loop(key) {
      var value = styles[key];
      var type = typeof value === 'undefined' ? 'undefined' : babelHelpers.typeof(value);

      if (isUndefinedValue(value)) {
        return 'continue';
      } else if (type === 'number' || type === 'string') {
        decs.push(cssifyDeclaration(key, value));
        return 'continue';
      } else if (Array.isArray(value)) {
        value.forEach(function (val) {
          return decs.push(cssifyDeclaration(key, val));
        });
        return 'continue';
      } else if (isNestedSelector(key)) {
        renderer._parseMonolithicRules(selector + normalizeNestedProperty(key), value, mediaSelector).rules.forEach(function (r) {
          return rules.push(r);
        });
        return 'continue';
      } else if (isMediaQuery(key)) {
        var mediaKey = generateCombinedMediaQuery(mediaSelector, key.slice(6).trim());
        var mediaRules = renderer._parseMonolithicRules(selector, value, mediaKey);
        media.push({
          rules: mediaRules.rules,

): {
    rules: Array,
    media: Array<{ rules: Array, media: string }>
  } => {
    const decs = []
    const rules = []
    const media = []

    for (const key in styles) {
      const value = styles[key]
      const type = typeof value

      if (isUndefinedValue(value)) {
        continue
      } else if (type === 'number' || type === 'string') {
        decs.push(cssifyDeclaration(key, value))
        continue
      } else if (Array.isArray(value)) {
        value.forEach(val => decs.push(cssifyDeclaration(key, val)))
        continue
      } else if (isNestedSelector(key)) {
        renderer
          ._parseMonolithicRules(
            selector + normalizeNestedProperty(key),
            value,
            mediaSelector
          )
          .rules.forEach(r => rules.push(r))
        continue
      } else if (isMediaQuery(key)) {
        const mediaKey = generateCombinedMediaQuery(
          mediaSelector,

        value.forEach(val => decs.push(cssifyDeclaration(key, val)))
        continue