How to use the @ephox/sugar.Css.setAll function in @ephox/sugar

const updateChromePosition = (toolbar: Option) => {
    // Calculate the toolbar offset when using a split toolbar drawer
    const offset = split ? toolbar.fold(() => 0, (tbar) => {
      // If we have an overflow toolbar, we need to offset the positioning by the height of the overflow toolbar
      return tbar.components().length > 1 ? Height.get(tbar.components()[1].element()) : 0;
    }) : 0;

    // The float container/editor may not have been rendered yet, which will cause it to have a non integer based positions
    // so we need to round this to account for that.
    const location = Location.absolute(targetElm);
    const top = location.top() - Height.get(floatContainer.element()) + offset;
    Css.setAll(uiComponents.outerContainer.element(), {
      position: 'absolute',
      top: Math.round(top) + 'px',
      left: Math.round(location.left()) + 'px'
    });

    // Update the max width of the inline toolbar
    const maxWidth = editorMaxWidthOpt.getOrThunk(() => {
      // No max width, so use the body width, minus the left pos as the maximum
      const bodyMargin = Utils.parseToInt(Css.get(Body.body(), 'margin-left')).getOr(0);
      return Width.get(Body.body()) - location.left() + bodyMargin;
    });
    Css.set(floatContainer.element(), 'max-width', maxWidth + 'px');
  };

identifyMenus(editor, rawUiConfig)
    );

    OuterContainer.setSidebar(
      uiComponents.outerContainer,
      rawUiConfig.sidebar
    );

    setupEvents(editor);
  });

  const socket = OuterContainer.getSocket(uiComponents.outerContainer).getOrDie('Could not find expected socket element');

  if (isTouch === true) {
    // TODO: move me, Setup mobile scrolling,
    Css.setAll(socket.element(), {
      'overflow': 'scroll',
      '-webkit-overflow-scrolling': 'touch' // required for ios < 13
    });
  }

  setupReadonlyModeSwitch(editor, uiComponents);

  editor.addCommand('ToggleSidebar', (ui: boolean, value: string) => {
    OuterContainer.toggleSidebar(uiComponents.outerContainer, value);
    editor.fire('ToggleSidebar');
  });

  editor.addQueryValueHandler('ToggleSidebar', () => {
    return OuterContainer.whichSidebar(uiComponents.outerContainer);
  });

const panelW = Width.get(panel.element());
      const panelH = Height.get(panel.element());
      const width = img.dom().naturalWidth * zoom;
      const height = img.dom().naturalHeight * zoom;
      const left = Math.max(0, panelW / 2 - width / 2);
      const top = Math.max(0, panelH / 2 - height / 2);

      const css = {
        left: left.toString() + 'px',
        top: top.toString() + 'px',
        width: width.toString() + 'px',
        height: height.toString() + 'px',
        position: 'absolute'
      };

      Css.setAll(img, css);
      memBg.getOpt(panel).each((bg) => {
        Css.setAll(bg.element(), css);
      });

      cropRect.get().each((cRect) => {
        const rect = rectState.get();
        cRect.setRect({
          x: rect.x * zoom + left,
          y: rect.y * zoom + top,
          w: rect.w * zoom,
          h: rect.h * zoom
        });
        cRect.setClampRect({
          x: left,
          y: top,
          w: width,

      editorContainer.on((container) => Css.setAll(container, {
        top: visualViewport.offsetTop + 'px',
        left: visualViewport.offsetLeft + 'px',
        height: visualViewport.height + 'px',
        width: visualViewport.width + 'px'
      }));
    });

const morphToCoord = (component: AlloyComponent, config: DockingConfig, scroll: SugarPosition, origin: SugarPosition, morph: DragCoord.CoordAdt): void => {
  const styles = DragCoord.toStyles(morph, scroll, origin);
  Css.setAll(component.element(), styles);
  const method = styles.position === 'fixed' ? config.onDocked : config.onUndocked;
  method(component);
};

memBg.getOpt(panel).each((bg) => {
        Css.setAll(bg.element(), css);
      });