How to use inline-style-prefixer - 10 common examples

root.walkDecls((decl) => {
    /* No point even checking custom props */
    if (/^--/.test(decl.prop)) return

    const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }
    const prefixed = prefixAll(objStyle)
    Object.keys(prefixed).reverse().forEach(newProp => {
      const newVals = prefixed[newProp]
      const newValArray = Array.isArray(newVals) ? newVals : [newVals]
      newValArray.forEach((newVal) => {
        decl.cloneBefore({
          prop: hyphenateStyleName(newProp),
          value: newVal
        })
      })
    })
    decl.remove()
  })
}

root.walkDecls(decl => {
    /* No point even checking custom props */
    if (/^--/.test(decl.prop)) return

    const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }
    const prefixed = prefixAll(objStyle)
    Object.keys(prefixed).forEach(newProp => {
      const newVals = prefixed[newProp]
      const newValArray = Array.isArray(newVals) ? newVals : [newVals]
      newValArray.forEach(newVal => {
        decl.cloneBefore({
          prop: hyphenateStyleName(newProp),
          value: newVal,
        })
      })
    })
    decl.remove()
  })
}

import { Component, PropTypes} from 'react';
import { connect } from 'react-redux';
// Components import
import LeftWrapper from './left/left_wrapper';
import ThreadUsers from './right/thread_users';
import FeaturedUsers from './right/featured_users';
import Layout from '../styles/layout';
import { FlatButton, LeftNav, Snackbar, Styles } from 'material-ui';
import ComponentStyle from 'forum/client/styles/main';
import Prefixer from 'inline-style-prefixer';
const prefixer = new Prefixer();
// Helpers
import moment from 'moment';
// Collections
import Categories from '../../collections/categories';
import Threads from '../../collections/threads';
// Redux actions
import {
  BrowsingActions,
  CategoriesActions,
  FeaturesActions,
  ThreadActions,
  UserActions,
  UserThreadsActions,
  BlacklistActions,
  SideNavActions,
  SnackbarActions

import { Component, PropTypes } from 'react';
import ReactMixin from 'react-mixin';
// Components
import Swipeable from 'react-swipeable';
import { GridTile, IconButton, GridList, Styles } from 'material-ui';
import { ToggleStarBorder, HardwareKeyboardArrowLeft, HardwareKeyboardArrowRight } from 'material-ui/lib/svg-icons';
import OnClickOutside from 'react-onclickoutside';
import ComponentStyle from 'forum/client/styles/center/thread/thread_carousel';
const { Colors } = Styles;
import Prefixer from 'inline-style-prefixer';
const prefixer = new Prefixer();
// Helpers
import { toolbarWidth, checkMobileDevice } from 'forum/client/utils/helpers';

/**
* ThreadCarousel component
* Use to navigate to previous thread 
* Support swipe in mobile devices
*/
@ReactMixin.decorate(OnClickOutside)
export default class ThreadCarousel extends Component {

  static propTypes = {
    viewedThreads: PropTypes.arrayOf(PropTypes.object),
    viewThread: PropTypes.func,
    onClickOutside: PropTypes.func,
    windowSize: PropTypes.string

import { createStyling } from 'react-base16-styling';
import defaultTheme from './themes/default';
import Prefixer from 'inline-style-prefixer';

let prefixerInstance;
if (typeof window !== 'undefined' && window.navigator) {
  prefixerInstance = new Prefixer(window.navigator);
} else {
  prefixerInstance = new Prefixer({
    userAgent:
      'Node.js (darwin; U; rv:v4.3.1) AppleWebKit/537.36 (KHTML, like Gecko)'
  });
}
const prefixer = prefixerInstance.prefix.bind(prefixerInstance);

const navButtonImg = type =>
  ({
    /* eslint-disable max-len */
    prev:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC',
    next:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg=='
    /* eslint-enable max-len */
  }[type]);

import { Component, PropTypes } from 'react';
// Components
import { TextField, FlatButton, Avatar, Styles } from 'material-ui';
import ComponentStyle from 'forum/client/styles/center/thread/reply';
const { Colors } = Styles;
import Prefixer from 'inline-style-prefixer';
const prefixer = new Prefixer();
// Helpers
import moment from 'moment';

/**
* Reply component
* Responsible for view and edit reply
*/
export default class Reply extends Component {
  static propTypes = {
    currentUser: PropTypes.object, // user signed in object
    reply: PropTypes.object,
    // Callbacks for server methods
    onLikeReply: PropTypes.func,
    newReplyId: PropTypes.string,
    updateReply: PropTypes.func,
    openSnackbar: PropTypes.func

export default userAgent => {
  if (!prefixer) {
    prefixer = new Prefixer({ userAgent: userAgent })
  }
  // replace userAgent if config provides alternative one
  if (prefixer._userAgent !== userAgent && userAgent !== undefined) {
    prefixer = new Prefixer({ userAgent: userAgent })
  }

  return prefixer
}

import { createStyling } from 'react-base16-styling';
import defaultTheme from './themes/default';
import Prefixer from 'inline-style-prefixer';

let prefixerInstance;
if (typeof window !== 'undefined' && window.navigator) {
  prefixerInstance = new Prefixer(window.navigator);
} else {
  prefixerInstance = new Prefixer({
    userAgent:
      'Node.js (darwin; U; rv:v4.3.1) AppleWebKit/537.36 (KHTML, like Gecko)'
  });
}
const prefixer = prefixerInstance.prefix.bind(prefixerInstance);

const navButtonImg = type =>
  ({
    /* eslint-disable max-len */
    prev:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC',
    next:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg=='
    /* eslint-enable max-len */

if (name) {
    /* eslint-disable no-param-reassign */

    /*
    *  don't apply defaults unless we have a name declaration
    *  otherwise, assume we're using this to override properties
    */

    duration = duration || '1.2s'
    iterationCount = iterationCount || 'infinite'
    timingFunction = timingFunction || 'ease-in-out'

    /* eslint-enable no-param-reassign */
  }

  return prefix(omitBy({
    animationDelay: delay,
    animationDuration: duration,
    animationFillMode: fillMode,
    animationIterationCount: iterationCount,
    animationTimingFunction: timingFunction,
    animationName: name
  }, (val) => !val))
}

validateValueType(originalVal);
      }

      const propValPair = `${hyphenate(
        originalKey,
      )}:${((originalVal: any): string)}`;
      const key = `${pseudo}${propValPair}`;
      const cachedId = cache.cache[key];
      if (cachedId !== void 0) {
        // cache hit
        classString += " " + cachedId;
        continue;
      } else {
        // cache miss
        let block = "";
        const prefixed = prefixAll({[originalKey]: originalVal});
        for (const prefixedKey in prefixed) {
          const prefixedVal = prefixed[prefixedKey];
          const prefixedValType = typeof prefixedVal;
          if (prefixedValType === "string" || prefixedValType === "number") {
            const prefixedPair = `${hyphenate(prefixedKey)}:${prefixedVal}`;
            if (prefixedPair !== propValPair) {
              block += `${prefixedPair};`;
            }
          } else if (Array.isArray(prefixedVal)) {
            const hyphenated = hyphenate(prefixedKey);
            for (let i = 0; i < prefixedVal.length; i++) {
              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
              if (prefixedPair !== propValPair) {
                block += `${prefixedPair};`;
              }
            }