tessl/npm-style-loader

Webpack loader that dynamically injects CSS into the DOM at runtime with multiple injection strategies and CSS modules support

—

Pending

Overview

Eval results

Files

Loader Configuration

Name: tessl/npm-style-loader
Author: tessl

Main webpack loader configuration options for controlling CSS injection behavior, DOM insertion strategies, and module output format.

Capabilities

injectType Option

Controls how styles are injected into the DOM.

/**
 * Injection type configuration
 * @default "styleTag"
 */
injectType?: "styleTag" | "singletonStyleTag" | "autoStyleTag" | 
             "lazyStyleTag" | "lazySingletonStyleTag" | "lazyAutoStyleTag" | 
             "linkTag";

Usage Example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { injectType: "singletonStyleTag" }
          },
          "css-loader"
        ],
      },
    ],
  },
};

attributes Option

Adds custom HTML attributes to generated style or link elements.

/**
 * Custom attributes to add to style/link elements
 * Automatically includes webpack nonce if available
 */
attributes?: Record<string, string>;

Usage Example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              attributes: {
                "data-theme": "dark",
                "id": "my-styles"
              }
            }
          },
          "css-loader"
        ],
      },
    ],
  },
};

insert Option

Specifies where to insert style/link elements in the DOM.

/**
 * DOM insertion target
 * Can be a CSS selector string or absolute path to insertion function
 */
insert?: string;

Usage Examples:

// CSS selector insertion
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { insert: "body" }  // Insert at end of body
          },
          "css-loader"
        ],
      },
    ],
  },
};

// Custom insertion function
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { insert: require.resolve("./custom-insert.js") }
          },
          "css-loader"
        ],
      },
    ],
  },
};

base Option

Sets module ID base for webpack DLLPlugin support.

/**
 * Module ID base for DLLPlugin
 * Used when building libraries with webpack DLL
 */
base?: number;

Usage Example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { base: 1000 }
          },
          "css-loader"
        ],
      },
    ],
  },
};

esModule Option

Controls whether to use ES modules syntax in generated code.

/**
 * Use ES modules syntax for exports
 * @default true
 */
esModule?: boolean;

Usage Example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { esModule: false }  // Use CommonJS exports
          },
          "css-loader"
        ],
      },
    ],
  },
};

styleTagTransform Option

Custom function to transform CSS content before insertion into style elements.

/**
 * Path to custom style tag transform function
 * Function signature: (css: string, styleElement: HTMLStyleElement) => void
 */
styleTagTransform?: string;

Usage Example:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: { 
              styleTagTransform: require.resolve("./custom-transform.js")
            }
          },
          "css-loader"
        ],
      },
    ],
  },
};

// custom-transform.js
module.exports = function(css, styleElement) {
  // Custom transformation logic
  const transformedCSS = css.replace(/\/\*.*?\*\//g, ''); // Remove comments
  
  // Insert transformed CSS
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = transformedCSS; // IE
  } else {
    styleElement.innerHTML = transformedCSS;
  }
};

Complete Configuration Example

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "styleTag",
              attributes: {
                "data-environment": "development",
                "nonce": "random-value"
              },
              insert: "head",
              base: 1000,
              esModule: true,
              styleTagTransform: require.resolve("./transforms/css-transform.js")
            }
          },
          {
            loader: "css-loader",
            options: { modules: true }
          }
        ],
      },
    ],
  },
};

Install with Tessl CLI