How to use free-style - 10 common examples

function createGlobal () {
  // Skip DOM lookup.
  if (!canUseDOM) return FreeStyle.create()

  let element = document.getElementById(STYLE_ID) as HTMLStyleElement
  let styleSheet: CSSStyleSheet

  if (!element) {
    element = document.createElement('style')
    element.setAttribute('id', STYLE_ID)
    element.setAttribute('type', 'text/css')
    document.head.appendChild(element)
  }

  for (let i = 0; i < document.styleSheets.length; i++) {
    const item = document.styleSheets.item(i)!

    if (item.ownerNode === element) {
      styleSheet = item as CSSStyleSheet

ReactFreeStyle.prototype.emitChange = function () {
  if (ReactCurrentOwner.current != null) {
    console.warn('Inline styles must be registered before `render`')

    return
  }

  FreeStyle.prototype.emitChange.apply(this, arguments)
}

const createFreeStyle = () => FreeStyle.create(
  /** Use the default hash function */
  undefined,
  /** Preserve $debugName values */
  true,
);

export function css(cssValue: CssValue): CachedCss {
  const Style = create();
  const className = cssValueToString(Style, cssValue);
  return new CachedCss(className, Style);
}

function createStyle(styles, name, scope = '') {
  let namespace = ''
  return {
    Style: FreeStyle.create(s => `_${namespace}__${FreeStyle.stringHash(s)}`),
    container: createModuleStylesContainer(styles, name, scope),
    setNamespace: ns => namespace = ns,
  }
}

element = document.createElement('style')
    element.setAttribute('id', STYLE_ID)
    element.setAttribute('type', 'text/css')
    document.head.appendChild(element)
  }

  for (let i = 0; i < document.styleSheets.length; i++) {
    const item = document.styleSheets.item(i)!

    if (item.ownerNode === element) {
      styleSheet = item as CSSStyleSheet
      break
    }
  }

  return FreeStyle.create(undefined, undefined, {
    add (style, index) {
      styleSheet.insertRule(style.getStyles(), index)
    },
    remove (style, index) {
      styleSheet.deleteRule(index)
    },
    change (style, oldIndex, newIndex) {
      styleSheet.deleteRule(oldIndex)
      styleSheet.insertRule(style.getStyles(), newIndex)
    }
  })
}

return <p> (
    Component: React.ComponentType</p><p>&gt;,
    withFreeStyle?: boolean
  ) =&gt; {
    const Style = FreeStyle.create(hash, debug)
    const componentName = Component.displayName || Component.name || 'anonymous'
    const styles = helpers.registerStyleSheet(Style, sheet, options, componentName)
    const displayName = `Styled(${componentName})`

    return Object.assign(
      ((props: P &amp; StyledProps) =&gt; {
        const componentProps = Object.assign({}, props, {
          styles: props.styles ? Object.assign({}, styles, props.styles) : styles
        })

        return React.createElement(
          StyleComponent,
          { Style, Component, componentName, componentProps, withFreeStyle }
        )
      }) as React.StatelessComponent</p><p>,
      { displayName, styles, Style }</p>

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();
};

element.setAttribute("id", STYLE_ID);
      element.setAttribute("type", "text/css");
      document.head.appendChild(element);
    }

    for (let i = 0; i < document.styleSheets.length; i++) {
      const item = document.styleSheets.item(i)!;

      if (item.ownerNode === element) {
        styleSheet = item as CSSStyleSheet;
        break;
      }
    }

    if (debug) {
      this.freeStyle = create({
        add: () => (element.innerHTML = this.toCss()),
        remove: () => (element.innerHTML = this.toCss()),
        change: () => (element.innerHTML = this.toCss())
      });
    } else {
      this.freeStyle = create({
        add: (style, index) => {
          styleSheet.insertRule(style.getStyles(), index);
        },
        remove: (_, index) => {
          styleSheet.deleteRule(index);
        },
        change: (style, oldIndex, newIndex) => {
          styleSheet.deleteRule(oldIndex);
          styleSheet.insertRule(style.getStyles(), newIndex);
        }

return function styleFn () {
    var args = Array.prototype.slice.call(arguments)
    var opts = args.length > arity ? args.pop() : null
    var styleId = opts && opts.styleId ? opts.styleId : DEFAULT_STYLE_ID

    var byId = styleInstancesById[styleId] = styleInstancesById[styleId] || {
      Style: FreeStyle.create(),
      changeId: null
    }
    var Style = byId.Style
    var changeId = byId.changeId

    var result = Style[methodName].apply(Style, args)
    if (Style.changeId !== changeId) {
      insertStyles(Style.getStyles(), {id: styleId})
      byId.changeId = Style.changeId
    }

    return result
  }
}