How to use css-vendor - 10 common examples

Object.keys(style).filter(key => key.indexOf(':') !== 0).forEach(key => {
    var value = style[key];

    // Have to go back and forth because cssVendor only accepts hyphenated
    var newKey = cssVendor.supportedProperty(hyphenateStyleName(key));
    if (newKey === false) {
      // Ignore unsupported properties
      console.warn('Unsupported CSS property ' + key);
      return;
    }
    newKey = camelizeStyleName(newKey);
    var newValue = cssVendor.supportedValue(newKey, value);
    if (newValue === false) {
      // Allow unsupported values, since css-vendor will say something like:
      // `solid 1px black` is not supported because the browser rewrites it to
      // `1px solid black`. css-vendor should be smarter about this.
      newValue = value;
    }
    newStyle[newKey] = newValue;
  });
  return newStyle;

Object.keys(style).filter(key => key.indexOf(':') !== 0).forEach(key => {
    var value = style[key];

    // Have to go back and forth because cssVendor only accepts hyphenated
    var newKey = cssVendor.supportedProperty(hyphenateStyleName(key));
    if (newKey === false) {
      // Ignore unsupported properties
      console.warn('Unsupported CSS property ' + key);
      return;
    }
    newKey = camelizeStyleName(newKey);
    var newValue = cssVendor.supportedValue(newKey, value);
    if (newValue === false) {
      // Allow unsupported values, since css-vendor will say something like:
      // `solid 1px black` is not supported because the browser rewrites it to
      // `1px solid black`. css-vendor should be smarter about this.
      newValue = value;
    }
    newStyle[newKey] = newValue;
  });
  return newStyle;

},
  };
}

//
// Animations using keyframes
//
var animationIndex = 1;
var animationStyleSheet: any = document.createElement('style');
document.head.appendChild(animationStyleSheet);

// Test if prefix needed for keyframes (copied from PrefixFree)
var keyframesPrefixed = 'keyframes';
animationStyleSheet.textContent = '@keyframes {}';
if (!animationStyleSheet.sheet.cssRules.length) {
  keyframesPrefixed = cssVendor.prefix.css + 'keyframes';
}

// Simple animation helper that injects CSS into a style object containing the
// keyframes, and returns a string with the generated animation name.
function animation(keyframes: Object): string {
  var name = 'Animation' + animationIndex;
  animationIndex += 1;

  var rule = '@' + keyframesPrefixed + ' ' + name + ' {\n' +
    Object.keys(keyframes).map((percentage) => {
      var props = keyframes[percentage];
      var serializedProps = CSSPropertyOperations.createMarkupForStyles(
        _prefix(props)
      );
      return '  ' + percentage + ' {\n  ' + serializedProps + '\n  }';
    }).join('\n') +

const generateStyleSheet = ({ imagesCount, duration, transition }) => {
  const t = imagesCount * (duration + transition);
  const p1 = Math.round(transition / t * 100);
  const p2 = Math.round((duration + transition) / t * 100);
  const p3 = Math.round(p2 * 1.4);

  const vendorBackfaceVisibility = vendor.supportedProperty('backface-visibility');
  const vendorAnimation = vendor.supportedProperty('animation');
  const vendorKeyframes = vendor.supportedKeyframes('@keyframes');

  let animation = '';
  let keyframes = '';
  if (vendorAnimation && vendorBackfaceVisibility && vendorKeyframes) {
    animation = `${vendorBackfaceVisibility}: hidden;
        ${vendorAnimation}: imageAnimation ${t}s linear infinite -0.5s;`;

    keyframes = `${vendorKeyframes} imageAnimation {
          0% {
            opacity: 0;
            animation-timing-function: ease-in;
          }
          ${p1}% {
            opacity: 1;
            animation-timing-function: ease-out;

function prefixStyle(style) {
    for (const prop in style) {
      const value = style[prop]
      if (prop === 'fallbacks' && Array.isArray(value)) {
        style[prop] = value.map(prefixStyle)
        continue
      }
      let changeProp = false
      const supportedProp = vendor.supportedProperty(prop)
      if (supportedProp && supportedProp !== prop) changeProp = true

      let changeValue = false
      const supportedValue = vendor.supportedValue(supportedProp, toCssValue(value))
      if (supportedValue && supportedValue !== value) changeValue = true

      if (changeProp || changeValue) {
        if (changeProp) delete style[prop]
        style[supportedProp || prop] = supportedValue || value
      }
    }

    return style
  }

export default function getAnimationProp() {
  const prop = "animation";
  const animation = cssVendor.supportedProperty(prop) || prop;
  const prefix = animation.replace("animation", "");

  return {
    css: animation,
    js: prefix === "" ? animation : pascalCase(animation)
  };
}

export function create(styles) {
  const ret = {};
  for (const s in styles) {
    if (styles.hasOwnProperty(s)) {
      const style = styles;
      const ret2 = {};
      for (let property in style) {
        if (style.hasOwnProperty(property)) {
          let value = style[property];
          property = supportedProperty(property) || property;
          if (typeof value === 'string') {
            value = supportedValue(property, value) || value;
          }
          ret2[property] = value;
        }
      }
      ret[s] = ret2;
    }
  }
  return ret;
}

const generateStyleSheet = ({ imagesCount, duration, transition }) => {
  const t = imagesCount * (duration + transition);
  const p1 = Math.round(transition / t * 100);
  const p2 = Math.round((duration + transition) / t * 100);
  const p3 = Math.round(p2 * 1.4);

  const vendorBackfaceVisibility = vendor.supportedProperty('backface-visibility');
  const vendorAnimation = vendor.supportedProperty('animation');
  const vendorKeyframes = vendor.supportedKeyframes('@keyframes');

  let animation = '';
  let keyframes = '';
  if (vendorAnimation && vendorBackfaceVisibility && vendorKeyframes) {
    animation = `${vendorBackfaceVisibility}: hidden;
        ${vendorAnimation}: imageAnimation ${t}s linear infinite -0.5s;`;

    keyframes = `${vendorKeyframes} imageAnimation {
          0% {
            opacity: 0;
            animation-timing-function: ease-in;
          }
          ${p1}% {
            opacity: 1;

Object.keys(styles).forEach(prop => {
      const supportedProp = vendor.supportedProperty(prop);

      const value = styles[prop].toString();
      const isImportant = value.indexOf('!important') !== -1;
      const supportedValue = vendor.supportedValue(
        supportedProp,
        isImportant
          ? styles[prop].replace('!important', '').trim()
          : styles[prop]
      );

      if (supportedValue && supportedProp) {
        if (supportedProp !== prop) {
          deletions.push(prop);
        }

        styles[supportedProp] =

const jsprefix = (x) => (
  `${cssVendor.prefix.js}${x}`
)