How to use css-vars-ponyfill - 9 common examples

private updateCSS(variables: CSSVariables = {}) {
    // Use css-vars-ponyfill to polyfill css-variables for legacy browser
    cssVars({
      include: 'style',
      onlyLegacy: true,
      watch: true,
      variables,
      onComplete(cssText, styleNode, cssVariables) {
        console.log(cssText, styleNode, cssVariables);
      },
    });
    // If you decide to drop ie11, edge < 14 support in future, use this as implementation to set variables
    // Object.keys(variables).forEach(variableName => {
    //   document.documentElement.style.setProperty('--' + variableName, variables[variableName]);
    // });
  }
}

export function applyTheme() {
  if (
    !objectQuery(window, 'CDAP_UI_THEME', 'styles') ||
    !isTheme10Spec() ||
    isNilOrEmpty(window.CDAP_UI_THEME.styles)
  ) {
    // need to run this at least once even if there's no theme customization
    // so that css variables are parsed correctly even in older browsers
    cssVars();
    return;
  }

  // this is what's going on under the hood for modern browsers:
  // document.documentElement.style.setProperty(`--${cssVar}`, cssValue);
  cssVars({
    variables: window.CDAP_UI_THEME.styles
  });
}

if ('font-family' in stylesJSON && typeof stylesJSON['font-family'] === 'string') {
      stylesToApply['font-family'] = stylesJSON['font-family'];
    }
    if ('page-name-color' in stylesJSON && isColor(stylesJSON['page-name-color'])) {
      stylesToApply['page-name-color'] = stylesJSON['page-name-color'];
    }
    if (
      'plugin-reference-heading-bg-color' in stylesJSON &&
      isColor(stylesJSON['plugin-reference-heading-bg-color'])
    ) {
      stylesToApply['plugin-reference-heading-bg-color'] =
        stylesJSON['plugin-reference-heading-bg-color'];
    }
    // this is what's going on under the hood for modern browsers:
    // document.documentElement.style.setProperty(`--${cssVar}`, cssValue);
    cssVars({
      variables: stylesToApply,
    });
  }

it('calls cssVars() with custom config if given one', () => {
      const customConfig = {
        testsAreGood: true,
      };

      spyOn(cssVars, 'default');
      runCssVarsPolyfill(customConfig);
      expect(cssVars.default).toHaveBeenCalledWith(customConfig);
    });

it('calls cssVars() with default config', () => {
      spyOn(cssVars, 'default');
      runCssVarsPolyfill();
      expect(cssVars.default).toHaveBeenCalledWith(cssVarsDefaultConfig);
    });

}
    }
    if ('product-logo-about' in contentJson) {
      const productLogoAbout = window.CDAP_UI_THEME.content['product-logo-about'];
      if (productLogoAbout.type) {
        const productLogoAboutType = productLogoAbout.type;
        if (productLogoAboutType === 'inline') {
          content.productLogoAbout = objectQuery(productLogoAbout, 'arguments', 'data');
        } else if (productLogoAboutType === 'link') {
          content.productLogoAbout = objectQuery(productLogoAbout, 'arguments', 'url');
        }
      }
    }
    if ('welcome-banner-image' in contentJson) {
      const welcomeBannerImage = window.CDAP_UI_THEME.content['welcome-banner-image'];
      cssVars({
        variables: {
          'welcome-banner-image': `url('${welcomeBannerImage}')`,
        },
      });
    }
    if ('feature-names' in contentJson) {
      const featureNames = { ...content.featureNames };

      if ('analytics' in contentJson['feature-names']) {
        featureNames.analytics = objectQuery(contentJson, 'feature-names', 'analytics');
      }
      if ('control-center' in contentJson['feature-names']) {
        featureNames.controlCenter = objectQuery(contentJson, 'feature-names', 'control-center');
      }
      if ('dashboard' in contentJson['feature-names']) {
        featureNames.dashboard = objectQuery(contentJson, 'feature-names', 'dashboard');

static __addCssVariables() {
        cssVars({
            onlyLegacy: true
        });
    }

export function runCssVarsPolyfill(config: {} = cssVarsDefaultConfig): void {
  cssVars(config);
}

if (theme.mentionHighlightBg) {
        changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg);
        changeCss('.app__body .post.post--comment .post__body.mention-comment', 'border-color:' + theme.mentionHighlightBg);
        changeCss('.app__body .post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5));
    }

    if (theme.mentionHighlightLink) {
        changeCss('.app__body .mention--highlight .mention-link, .app__body .mention--highlight, .app__body .search-highlight', 'color:' + theme.mentionHighlightLink);
    }

    if (!theme.codeTheme) {
        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
    }
    updateCodeTheme(theme.codeTheme);
    cssVars({
        variables: {
            'sidebar-bg': theme.sidebarBg,
            'sidebar-text': theme.sidebarText,
            'sidebar-text-60': changeOpacity(theme.sidebarText, 0.6),
            'sidebar-unread-text': theme.sidebarUnreadText,
            'sidebar-text-hover-bg': theme.sidebarTextHoverBg,
            'sidebar-text-active-border': theme.sidebarTextActiveBorder,
            'sidebar-text-active-color': theme.sidebarTextActiveColor,
            'sidebar-header-bg': theme.sidebarHeaderBg,
            'sidebar-header-text-color': theme.sidebarHeaderTextColor,
            'online-indicator': theme.onlineIndicator,
            'away-indicator': theme.awayIndicator,
            'dnd-indicator': theme.dndIndicator,
            'mention-bg': theme.mentionBg,
            'mention-color': theme.mentionColor,
            'center-channel-bg': theme.centerChannelBg,