All files / packages/design-system-2/.storybook/decorators apply-main-stylesheet.js

100% Statements 15/15
100% Branches 6/6
100% Functions 2/2
100% Lines 15/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 371x                                     8x 8x 8x 8x 5x 5x 5x 5x   8x 1x   7x 7x 7x 7x    
export const MAIN_STYLESHEET = {
  ID: 'slds-main-stylesheet',
  DEFAULT_HREF: '/css/slds2.base.css',
  THEME_LAYER_HREF: '/theme-layer/slds2.theme-layer.base.css',
};
 
/**
 * Ensures a <link> element for the main stylesheet exists in <head>.
 * Swaps the href when toggling between default and theme-layer mode.
 * Returns a promise that resolves once the stylesheet has loaded.
 *
 * @param {boolean} useThemeLayer Whether to load the theme-layer base stylesheet.
 * @returns {Promise<void>}
 */
export function applyMainStylesheet(useThemeLayer) {
  const { ID, DEFAULT_HREF, THEME_LAYER_HREF } = MAIN_STYLESHEET;
  const href = useThemeLayer ? THEME_LAYER_HREF : DEFAULT_HREF;
  let link = document.getElementById(ID);
 
  if (!link) {
    link = document.createElement('link');
    link.id = ID;
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }
 
  if (link.getAttribute('href') === href) {
    return Promise.resolve();
  }
 
  return new Promise((resolve) => {
    link.onload = resolve;
    link.onerror = resolve;
    link.setAttribute('href', href);
  });
}