How to use the stylefire function in stylefire

layoutSync.render(() => {
            // Reverse the layout delta of all newly laid-out layoutTransition components into their
            // prev visual state and then animate them into their new one using transforms.
            const prevLayout = compare.getLayout(prev)
            const nextLayout = compare.getLayout(next)
            const delta = calcDelta(prevLayout, nextLayout)
            const hasAnyChanged =
                delta.x || delta.y || delta.width || delta.height

            if (!hasAnyChanged) {
                // If layout hasn't changed, reapply the transform and get out of here.
                transform && (element.style.transform = transform)
                return
            }

            styler(element).set({
                originX: delta.originX,
                originY: delta.originY,
            })
            syncRenderSession.open()

            const target: TargetAndTransition = {}
            const transition: Transition = {}

            const transitionDefinition = isResolver(layoutTransition)
                ? layoutTransition({ delta })
                : layoutTransition

            function makeTransition(
                layoutKey: keyof Layout,
                transformKey: string,
                targetValue: number,

readValueFromSource: key =>
                    styler(ref.current as Element).get(key),
                // TODO: This is a good second source of plugins. This function contains the CSS variable

useLayoutEffect(() => {
        const target = getPosition()

        if (prev && target && hasMoved(prev, target)) {
            const delta = measureDelta(prev, target)

            const transitionDefinition = isResolver(positionTransition)
                ? positionTransition({ delta })
                : positionTransition

            const transition = createTransition(values, transitionDefinition)
            const x = transition("x", delta.x)
            const y = transition("y", delta.y)

            // Force a render now rather than waiting for the next render loop
            styler(ref.current as HTMLElement).render()

            if (transitionDefinition) {
                controls.start({ x: 0, y: 0, transition: { x, y } })
            }
        }
    })
}

const pose = (element, props = {}) => {
  const elementStyler = styler(element, { preparseOutput: false });
  const poses = createPoses(props);
  const values = createValues({ poses, styler: elementStyler, ...props });
  const activeActions = new Map();
  const children = new Set();
  const dimensions = new Dimensions(element);
  const dragProps = props.draggable ? {
    bounds: props.dragBounds,
    onDragStart: props.onDragStart,
    onDragEnd: props.onDragEnd
  } : {};

  const set = createPoseSetter({
    element,
    elementStyler,
    poses,
    values,

export const bindValuesToRef = (
    values: MotionValueMap,
    ref: RefObject<element>
) =&gt; {
    invariant(
        ref.current !== null,
        "No DOM reference found. Ensure custom components use `forwardRef` to forward the `ref` property to the host DOM component."
    )

    if (!ref.current) return

    const domStyler = styler(ref.current, { preparseOutput: false })

    values.forEach((value, key) =&gt; {
        if (!value.hasOnRender()) {
            value.setOnRender((v: any) =&gt; domStyler.set(key, v))
        }
    })
}
</element>

const createStyler = (node: HTMLElement | (SVGGraphicsElement & SVGPathElement)): Styler => styler(node);

setRef = node => {
    if (node) {
      this.nodeStyler = styler(node)
      this.nodeStyler
        .set({
          width: this.props.width,
          height: this.props.height,
        })
        .render()
    }
  }

useEffect(() => {
        invariant(
            ref.current instanceof Element,
            "No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`"
        )

        const domStyler = styler(ref.current as Element, {
            preparseOutput: false,
            enableHardwareAcceleration: !isStatic,
        })

        values.mount((key, value) => {
            domStyler.set(key, value)

            if (syncRenderSession.isOpen()) {
                syncRenderSession.push(domStyler)
            }
        })

        return () => values.unmount()
    }, [])

setRef = dom => {
    if (!dom) return;
    this.box = styler(dom);
    this.x = value(0, v => this.box.set('x', v));
  };

const svg = (element: HTMLElement, props: Object): Styler => {
  warning(false, 'svg() is deprecated, use styler instead');
  return styler(element, props);
};
export { styler, css, svg };