@kanopi/pack/src/components/loaders/devStyleLoader.js

Pre-packaged Webpack 5 configuration with extendable configuration to coordinate loaders and rules for common web stacks

/**
 * Webpack Dev Server style-loader wrapper
 *  - Adds ability to override placement of style blocks generated by Webpack Dev Server JS driven styles
 * 
 * @param {object} environment - Kanopi Pack environment (Standard Interface)
 * 
 * @returns {object} - Loader rule for `style-loader` with options if specified
 */
module.exports = (environment) => {
  const {
    styles: { devHeadSelectorInsertBefore }
  } = environment;

  let loaderOptions = {};

  /**
   * When `devHeadSelectorInsertBefore` is defined add an `insert` action to target style tag placement
   *  - This function assigned to `insert` is executed in the user browser
   *  - If the element is not found, the function falls back to the default placements, bottom of the `head` tag
   *  - In order for this to work, the selector is passed to the browser as an attribute `devTargetBefore` on the style block
   */
  if ('undefined' !== typeof devHeadSelectorInsertBefore) {
    loaderOptions = {
      insert: function (element) {
        var targetAttribute = element.getAttribute('devTargetBefore');
        var head = document.querySelector('head');
        var target = null !== head && null !== targetAttribute ? head.querySelector(targetAttribute) : null;

        null !== target ? head.insertBefore(element, target) : head.appendChild(element);
      },
      attributes: {
        devTargetBefore: devHeadSelectorInsertBefore
      }
    }
  }

  return {
    loader: 'style-loader',
    options: loaderOptions
  };
}