How to use the postcss-js.sync function in postcss-js

import {getSupport, detectBrowser, getVersionIndex} from 'caniuse-support'
import autoprefixer from 'autoprefixer'
import data from 'autoprefixer/data/prefixes'
import postcssJs from 'postcss-js'

const currentBrowser = detectBrowser(window.navigator.userAgent)

const browserQuery = `${currentBrowser.id} ${getVersionIndex(currentBrowser)}`
const ap = autoprefixer({overrideBrowserslist: browserQuery})
const prefixer = postcssJs.sync([ap])

const skipProperties = [
  // Caniuse doesn't cover this property and spec might drop this: https://www.w3.org/TR/css-fonts-3/.
  'font-language-override',
  // Caniuse doesn't cover those properties.
  'grid-row-align',
  'grid-column-align',
  // Lack of caniuse data. See https://github.com/Fyrd/caniuse/issues/2116.
  'font-variant-ligatures'
]

const notDescribedCanIUseProps = ['css3-cursors-grab', 'css-text-spacing']

const gridProps = [
  'grid-template-columns',
  'grid-template-rows',

// @flow

import postcssJs from 'postcss-js';
import autoprefixer from 'autoprefixer';

export default postcssJs.sync([autoprefixer]);

/* global baseStyles */
import postcss from "postcss";
import postcssJS from "postcss-js";
import autoprefixer from "autoprefixer";
import cssAnnotation from "css-annotation";
import { check, Match } from "meteor/check";
import { Meteor } from "meteor/meteor";
import { Shops, Themes } from "/lib/collections";
import { Reaction } from "./core";

const prefixer = postcssJS.sync([autoprefixer]);

function annotateCSS(stylesheet) {
  check(stylesheet, String);
  return cssAnnotation.parse(stylesheet);
}

function cssToObject(styles) {
  check(styles, Match.OneOf(String, null, undefined, void 0));

  const parsedStyle = postcss.parse(styles || baseStyles);
  const styleObject = postcssJS.objectify(parsedStyle);

  return styleObject;
}

function objectToCSS(styles) {

// @flow
import Input from 'postcss/lib/input'
import Declaration from 'postcss/lib/declaration'
import Parser from 'postcss/lib/parser'
import postcssNested from 'postcss-nested'
import postcssJs from 'postcss-js'
import objParse from 'postcss-js/parser'
import autoprefixer from 'autoprefixer'
import { processStyleName } from 'emotion-utils'

export const staticProcessor = postcssJs.sync([autoprefixer, postcssNested])

export const processor = postcssJs.sync([autoprefixer])

type Decl = {
  parent: { selector: string, nodes: Array },
  prop: string,
  value: string,
  remove: () => {}
}

export function parseCSS(
  css: string,
  extractStatic: boolean,
  filename: string
): {
  staticCSSRules: Array,
  styles: { [string]: any },
  composesCount: number

// @flow
import Input from 'postcss/lib/input'
import Declaration from 'postcss/lib/declaration'
import Parser from 'postcss/lib/parser'
import postcssNested from 'postcss-nested'
import postcssJs from 'postcss-js'
import objParse from 'postcss-js/parser'
import autoprefixer from 'autoprefixer'
import { processStyleName } from 'emotion-utils'

export const staticProcessor = postcssJs.sync([autoprefixer, postcssNested])

export const processor = postcssJs.sync([autoprefixer])

type Decl = {
  parent: { selector: string, nodes: Array },
  prop: string,
  value: string,
  remove: () => {}
}

export function parseCSS(
  css: string,
  extractStatic: boolean,
  filename: string
): {
  staticCSSRules: Array,

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { values, pick, isEqual } from 'lodash';
import autoprefixer from 'autoprefixer';
import postcssJs from 'postcss-js';

import { getCubeOrigin } from '../../utils';
import DISEASES from '../../constants/diseases';
import { locationType } from '../../constants/propTypes';


const prefixer = postcssJs.sync([autoprefixer]);

export default class Cubes extends React.Component {
  static propTypes = {
    location: locationType.isRequired,
    width: PropTypes.number,
    height: PropTypes.number
  }

  shouldComponentUpdate(nextProps) {
    return !isEqual(pick(nextProps.location, DISEASES), pick(this.props.location, DISEASES))
      || nextProps.width !== this.props.width || nextProps.height !== this.props.height;
  }

  componentDidUpdate() {
    const $el = $(ReactDOM.findDOMNode(this));
    const $cubes = $el.find('.cube');

import freestyle from 'free-style';
import autoprefixer from 'autoprefixer';
import postcss from 'postcss-js';

const context = freestyle.create();
const prefixer = postcss.sync([ autoprefixer({ browsers: ['last 2 versions'] }) ]);

export function configureStyles(styles) {
  return styles
    ? context.registerStyle(prefixer(styles))
    : context.getStyles();
};

import React from 'react';
import postcssJs from 'postcss-js';
import autoprefixer from 'autoprefixer';

import { pathType } from '../../constants/propTypes';

const prefixer = postcssJs.sync([autoprefixer]);


const Path = ({ path: [[x1, y1], [x2, y2]] }) => {
  const length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  const angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
  const transform = `rotate(${angle}deg)`;
  return (
    <div transform="" style="{prefixer({">
  );
};

Path.propTypes = {
  path: pathType.isRequired</div>

borderRadius: convertToPx,
  borderTopLeftRadius: convertToPx,
  borderTopRightRadius: convertToPx,
  borderBottomLeftRadius: convertToPx,
  borderBottomRightRadius: convertToPx,

  transform: convertTransforms,
  filter: convertFilters,
  backdropFilter: convertFilters,
  boxShadow: convertShadow,
  textShadow: convertShadow,
};

const convertCSS = css => postcss([autoprefixer]).process(css, { parser: postcssJs }).css;
const convertCSSInline = postcssJs.sync([]);

export const convertToReactInlineStyle = (styles?: StylesType = {}) => {
  const convertedStyle = flow(converters)(Object.keys(styles).reduce((accumulator, style) => {
    const propertyConverter = stylePropertyToCss[style];
    const styleValue = styles[style];

    return {
      ...accumulator,
      [style]: propertyConverter ? propertyConverter(styleValue) : styleValue,
    };
  }, {}));

  return convertCSSInline(convertedStyle);
};

const parseStyles = (styles: ElementStylesType) => Object.keys(styles).reduce((