How to use fela-tools - 10 common examples

function validateKeyframeObject(
  style: Object,
  logInvalid: boolean,
  deleteInvalid: boolean
): void {
  for (const percentage in style) {
    const value = style[percentage]
    if (!isObject(value)) {
      if (logInvalid) {
        console.error(
          `${deleteInvalid ? '[Deleted] ' : ' '}Invalid keyframe value. An object was expected.`,
          {
            percentage,
            style: value
          }
        )
      }
      if (deleteInvalid) {
        delete style[percentage]
      }
      // check for invalid percentage values, it only allows from, to or 0% - 100%
    } else if (
      percentage !== 'from' &&
      percentage !== 'to' &&

function embedKeyframeAndFont(
  style: Object,
  type: Type,
  renderer: DOMRenderer
): Object {
  for (const property in style) {
    const value = style[property]

    if (property === 'fontFace' && isObject(value)) {
      const { fontFamily, src, ...otherProps } = value
      if (typeof fontFamily === 'string' && Array.isArray(src)) {
        style[property] = renderer.renderFont(fontFamily, src, otherProps)
      } else {
        // TODO: warning - invalid font data
      }
    }

    if (property === 'animationName' && isObject(value)) {
      style[property] = renderer.renderKeyframe(value)
    }
  }

  return style
}

function embedded(style: Object, type: Type, renderer: DOMRenderer): Object {
  for (const property in style) {
    const value = style[property]

    if (property === 'fontFace' && isObject(value)) {
      const { fontFamily, src, ...otherProps } = value
      if (typeof fontFamily === 'string' && Array.isArray(src)) {
        style.fontFamily = renderer.renderFont(fontFamily, src, otherProps)
        delete style.fontFace
      } else {
        // TODO: warning - invalid font data
      }
    }

    if (property === 'animationName' && isObject(value)) {
      style[property] = renderer.renderKeyframe(() => value)
    }
  }

  return style
}

let renderer = rootRenderer
    let wrapperToSnapshot = wrapper

    if (includeStyles) {
      // use a new renderer to capture the styles just by rendering this enzyme wrapper
      renderer = createRenderer()
      wrapperToSnapshot = felaDive(wrapper, renderer)
    }

    const result = {
      component: toJson(wrapperToSnapshot),
    }

    if (includeStyles) {
      result.styles = `\n${cssbeautify(renderToString(renderer), options)}\n`
    }

    return result
  }

) {
    const div = document.createElement('div')

    // reset renderer to have a clean setup
    renderer.clear()

    render(
      createElement(
        RendererProvider,
        { renderer },
        createElement(ThemeProvider, { theme }, component)
      ),
      div
    )

    return `${formatCSS(renderToString(renderer))}\n\n${formatHTML(
      div.innerHTML
    )}`
  }
}

(ruleset, value, property) => {
        if (isObject(value)) {
          if (isNestedSelector(property)) {
            renderer._renderStyleToCache(
              className,
              value,
              pseudo + normalizeNestedProperty(property),
              media
            )
          } else if (isMediaQuery(property)) {
            const combinedMediaQuery = generateCombinedMediaQuery(
              media,
              property.slice(6).trim()
            )

            renderer._renderStyleToCache(
              className,
              value,
              pseudo,
              combinedMediaQuery
            )
          } else {
            // TODO: warning
          }
        } else if (!isUndefinedValue(value)) {
          ruleset[property] = value

RULE_TYPE
        )
        renderer.cache[reference] = StyleSheet.create({
          style: processedStyle
        })
      }

      return renderer.cache[reference].style
    }
  }

  // initial setup
  renderer.clear()

  if (config.enhancers) {
    arrayEach(config.enhancers, enhancer => {
      renderer = enhancer(renderer)
    })
  }

  return renderer
}

} else {
            // TODO: warning
          }
        } else if (!isUndefinedValue(value)) {
          ruleset[property] = value
        }

        return ruleset
      },
      {}
    )

    if (Object.keys(ruleSet).length > 0) {
      const css = cssifyObject(ruleSet)
      const selector = generateCSSSelector(className, pseudo)
      const cssRule = generateCSSRule(selector, css)

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

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

      renderer._emitChange({
        selector,
        declaration: css,
        media,

)
          } else {
            // TODO: warning
          }
        } else if (!isUndefinedValue(value)) {
          ruleset[property] = value
        }

        return ruleset
      },
      {}
    )

    if (Object.keys(ruleSet).length > 0) {
      const css = cssifyObject(ruleSet)
      const selector = generateCSSSelector(className, pseudo)
      const cssRule = generateCSSRule(selector, css)

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

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

      renderer._emitChange({
        selector,
        declaration: css,
        media,

(ruleset, value, property) => {
        if (isObject(value)) {
          if (isNestedSelector(property)) {
            renderer._renderStyleToCache(
              className,
              value,
              pseudo + normalizeNestedProperty(property),
              media
            )
          } else if (isMediaQuery(property)) {
            const combinedMediaQuery = generateCombinedMediaQuery(
              media,
              property.slice(6).trim()
            )

            renderer._renderStyleToCache(
              className,
              value,
              pseudo,
              combinedMediaQuery
            )
          } else {
            // TODO: warning
          }
        } else if (!isUndefinedValue(value)) {
          ruleset[property] = value
        }