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

Style Injection Types

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

Seven different strategies for injecting CSS into the DOM, from individual style tags to lazy-loaded styles with manual control.

Capabilities

styleTag (Default)

Automatically injects styles using multiple individual <style> elements. Each CSS file gets its own style element.

injectType: "styleTag"

Characteristics:

Multiple <style> elements in the DOM
Full source map support
Each CSS module gets individual element
Automatic injection on import

Usage Example:

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

// component.js
import "./styles.css";  // Automatically creates <style> element
import "./other.css";   // Creates another <style> element

singletonStyleTag

Injects all styles into a single shared <style> element for better performance with many CSS modules.

injectType: "singletonStyleTag"

Characteristics:

Single <style> element contains all CSS
No source map support
Better performance with many modules
Automatic injection on import

Usage Example:

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

autoStyleTag

Automatically chooses between styleTag (modern browsers) and singletonStyleTag (IE6-9) for optimal compatibility.

injectType: "autoStyleTag"

Characteristics:

Multiple <style> elements in modern browsers
Single <style> element in IE6-9
Automatic browser detection
Automatic injection on import

Usage Example:

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

lazyStyleTag

Creates multiple <style> elements with manual control via use() and unuse() methods.

injectType: "lazyStyleTag"

// Generated API for lazy styles
interface LazyStyleAPI {
  use(insertOptions?: object): LazyStyleAPI;
  unuse(): void;
  locals?: Record<string, string>;  // CSS Modules locals
}

Characteristics:

Multiple <style> elements (when activated)
Manual activation/deactivation control
Reference counting for multiple use() calls
Full source map support

Usage Example:

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

// component.js
import styles from "./component.lazy.css";

// Activate styles (creates <style> elements)
styles.use();

// Optional: pass insertion options
styles.use({ 
  insertInto: document.head,
  insertAt: "top" 
});

// Deactivate styles (removes <style> elements when ref count reaches 0)
styles.unuse();

// CSS Modules integration
import styles, { className } from "./component.lazy.css";
styles.use();
console.log(styles.locals.className); // CSS module class name

lazySingletonStyleTag

Creates a single shared <style> element with manual control via use() and unuse() methods.

injectType: "lazySingletonStyleTag"

// Same API as lazyStyleTag
interface LazyStyleAPI {
  use(insertOptions?: object): LazyStyleAPI;
  unuse(): void;
  locals?: Record<string, string>;
}

Characteristics:

Single <style> element (when activated)
Manual activation/deactivation control
Reference counting for multiple use() calls
No source map support

Usage Example:

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

// component.js
import styles from "./heavy-styles.lazy.css";

// Conditionally load styles
if (shouldLoadStyles) {
  styles.use();
}

// Cleanup when component unmounts
styles.unuse();

lazyAutoStyleTag

Automatically chooses between lazyStyleTag and lazySingletonStyleTag based on browser capabilities, with manual control.

injectType: "lazyAutoStyleTag"

// Same API as other lazy types
interface LazyStyleAPI {
  use(insertOptions?: object): LazyStyleAPI;
  unuse(): void;
  locals?: Record<string, string>;
}

Characteristics:

Multiple <style> elements in modern browsers (when activated)
Single <style> element in IE6-9 (when activated)
Manual activation/deactivation control
Automatic browser detection

Usage Example:

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

linkTag

Injects styles using <link rel="stylesheet"> elements that reference CSS files directly.

injectType: "linkTag"

Characteristics:

<link> elements instead of <style> elements
References external CSS files
Suitable for production with file extraction
Automatic injection on import

Usage Example:

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

// component.js
import "./styles.css";  // Creates <link> element

Injection Type Comparison

Type	Elements	Source Maps	Manual Control	IE6-9 Support	Best For
`styleTag`	Multiple `<style>`	✅	❌	✅	Development, debugging
`singletonStyleTag`	Single `<style>`	❌	❌	✅	Performance with many modules
`autoStyleTag`	Auto-detect	Conditional	❌	✅	Cross-browser compatibility
`lazyStyleTag`	Multiple `<style>`	✅	✅	✅	Conditional styling
`lazySingletonStyleTag`	Single `<style>`	❌	✅	✅	Performance + conditional
`lazyAutoStyleTag`	Auto-detect	Conditional	✅	✅	Conditional + compatibility
`linkTag`	`<link>` elements	N/A	❌	✅	External CSS files

Best Practices

Development: Use styleTag for full debugging capabilities
Production: Consider singletonStyleTag for better performance
Large Applications: Use lazy types for code splitting and conditional styles
Legacy Support: Use auto types for IE6-9 compatibility
External CSS: Use linkTag when working with pre-built CSS files