How to use css-in-js-utils - 10 common examples

function prefixValue(value: string, propertyPrefixMap: Object): string {
  if (isPrefixedValue(value)) {
    return value
  }

  // only split multi values, not cubic beziers
  const multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g)

  for (let i = 0, len = multipleValues.length; i < len; ++i) {
    const singleValue = multipleValues[i]
    const values = [singleValue]
    for (const property in propertyPrefixMap) {
      const dashCaseProperty = hyphenateProperty(property)

      if (
        singleValue.indexOf(dashCaseProperty) > -1 &&
        dashCaseProperty !== 'order'
      ) {

function prefixValue(value: string, propertyPrefixMap: Object): string {
  if (isPrefixedValue(value)) {
    return value
  }

  // only split multi values, not cubic beziers
  const multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g)

  for (let i = 0, len = multipleValues.length; i < len; ++i) {
    const singleValue = multipleValues[i]
    const values = [singleValue]
    for (const property in propertyPrefixMap) {
      const dashCaseProperty = hyphenateProperty(property)

      if (
        singleValue.indexOf(dashCaseProperty) > -1 &&
        dashCaseProperty !== 'order'
      ) {
        const prefixes = propertyPrefixMap[property]
        for (let j = 0, pLen = prefixes.length; j < pLen; ++j) {
          // join all prefixes and create a new value
          values.unshift(
            singleValue.replace(
              dashCaseProperty,
              prefixMapping[prefixes[j]] + dashCaseProperty
            )
          )
        }
      }

export default function isValidProperty(
  property: string,
  ast: any,
  isList?: boolean = false
): boolean {
  // if we do not know a property, we just skip it
  // and pretend its valid anyways
  // TODO: add valid property list
  if (!properties.hasOwnProperty(property)) {
    const unprefixedProperty = unprefixProperty(property)

    // we also check for prefixed properties that are
    // actually standard CSS properties
    if (properties.hasOwnProperty(unprefixedProperty)) {
      return isValidProperty(unprefixedProperty, ast, isList)
    }

    // TODO: remove as soon as 100% props are covered
    if (_missingProps.indexOf(property) !== -1) {
      return true
    }

    console.warn(
      `Unknown property: "${property}". If it is a valid CSS property, please file an issue.
https://github.com/rofrischmann/bredon/issues/new`
    )

function extendStyle(style: Object, extension: Object): void {
  // extend conditional style objects
  if (
    extension &&
    Object.prototype.hasOwnProperty.call(extension, 'condition')
  ) {
    if (extension.condition) {
      // eslint-disable-next-line no-use-before-define
      assignStyle(style, extend(extension.style))
    }
  } else {
    // extend basic style objects
    assignStyle(style, removeUndefined(extension))
  }
}

function extendStyle(style, extension, extendPlugin) {
  // extend conditional style objects
  if (extension.hasOwnProperty('condition')) {
    if (extension.condition) {
      assignStyle(style, extendPlugin(extension.style));
    }
  } else {
    // extend basic style objects
    assignStyle(style, extension);
  }
}

function resolveNamedKeys(style: Object, keys: Object) {
  for (const property in style) {
    const value = style[property]

    if (isPlainObject(value)) {
      const resolvedValue = resolveNamedKeys(value, keys)

      if (keys.hasOwnProperty(property)) {
        const resolvedKey = keys[property]
        if (style.hasOwnProperty(resolvedKey)) {
          style[resolvedKey] = assignStyle(style[resolvedKey], resolvedValue)
        } else {
          style[resolvedKey] = resolvedValue
        }

        // We clean the old keys as they're not used anymore
        delete style[property]
      }
    }
  }

  return style
}

function extendStyle(style: Object, extension: Object): void {
  // extend conditional style objects
  if (
    extension &&
    Object.prototype.hasOwnProperty.call(extension, 'condition')
  ) {
    if (extension.condition) {
      // eslint-disable-next-line no-use-before-define
      assignStyle(style, extend(extension.style))
    }
  } else {
    // extend basic style objects
    assignStyle(style, removeUndefined(extension))
  }
}

function extendStyle(style, extension, extendPlugin) {
  // extend conditional style objects
  if (extension.hasOwnProperty('condition')) {
    if (extension.condition) {
      assignStyle(style, extendPlugin(extension.style));
    }
  } else {
    // extend basic style objects
    assignStyle(style, extension);
  }
}

combinedSupport
            )
          } 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 change = {
        type: RULE_TYPE,
        className,
        selector,
        declaration: css,
        media,
      }

      const declarationReference = selector + media + support
      renderer.cache[declarationReference] = change
      renderer._emitChange(change)
    }
  }

combinedMediaQuery
            )
          } 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,