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

To help you get started, we’ve selected a few css-in-js-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github robinweser / fela / packages / fela-monolithic / src / index.js View on Github external
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)
    }
  }
github robinweser / fela / packages / fela / src / enhancers / monolithic.js View on Github external
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,
github robinweser / fela / packages / fela-font-renderer / index.es2015.js View on Github external
function cssifyStaticStyle(staticStyle, plugins) {
  if (typeof staticStyle === 'string') {
    return minifyCSSString(staticStyle);
  }

  var processedStaticStyle = processStyleWithPlugins(plugins, staticStyle, STATIC_TYPE);
  return cssifyObject(processedStaticStyle);
}
github robinweser / fela / packages / fela-plugin-prefixer / src / index.js View on Github external
if (isPlainObject(value)) {
        prefixedStyle[property] = addVendorPrefixes(value)
      } else {
        const prefixedDeclaration = prefix({
          [property]: style[property],
        })
        const styleKeys = Object.keys(prefixedDeclaration)

        const referenceProperty = styleKeys[0]
        const referenceValue = prefixedDeclaration[referenceProperty]

        if (styleKeys.length === 1) {
          prefixedStyle[referenceProperty] = referenceValue
        } else {
          delete prefixedDeclaration[referenceProperty]
          const inlinedProperties = cssifyObject(
            resolveFallbackValues(prefixedDeclaration)
          )

          prefixedStyle[
            referenceProperty
          ] = `${referenceValue};${inlinedProperties}`
        }
      }

      return prefixedStyle
    },
    {}
github ifiokjr / remirror / @remirror / react / src / components / remirror-style.component.tsx View on Github external
const wrapStyle = (uid: string, selector: string, style: CSSProperty) => {
  const styleString = cssifyObject(style);
  const space = selector && selector.startsWith(':') ? '' : ' ';
  return styleString ? `.${uid}${space}${selector}{${styleString}}` : '';
};
github robinweser / fela / packages / fela / src / cssifyKeyframe.js View on Github external
    (css, frame, percentage) => `${css}${percentage}{${cssifyObject(frame)}}`,
    ''
github robinweser / fela / packages / fela-font-renderer / index.es2015.js View on Github external
function cssifyFontFace(fontFace) {
  return '@font-face{' + cssifyObject(fontFace) + '}';
}