or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-modules.mdindex.mdinjection-types.mdloader-configuration.mdruntime-api.md
tile.json

tessl/npm-style-loader

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/style-loader@4.0.x

To install, run

npx @tessl/cli install tessl/npm-style-loader@4.0.0

index.mddocs/

Style Loader

Style Loader is a webpack loader that dynamically injects CSS into the DOM at runtime. It provides multiple injection strategies including individual style tags, singleton style tags, lazy loading capabilities, and link tag insertion. The loader supports various webpack and CSS loader configurations, enables CSS Modules integration with named exports, handles source maps, and offers extensive customization options for DOM insertion behavior.

Package Information

  • Package Name: style-loader
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev style-loader

Important Compatibility Warning

⚠️ CSS Experiments Compatibility: Style Loader is not compatible with webpack's experiments.css feature (enabled by default in experiments.futureDefaults). If you're using native CSS support via experiments.css, disable it or set { type: "javascript/auto" } for rules using style-loader, otherwise style-loader will emit a warning and do nothing.

Core Imports

Style Loader is used as a webpack loader in your webpack configuration, not directly imported in application code:

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

For CSS Modules, use named imports in your JavaScript:

// With CSS Modules enabled
import styles from "./component.css";
import { className } from "./component.css";

For lazy style loading:

// Lazy style imports (when using lazy injection types)
import styles from "./lazy-styles.lazy.css";

styles.use();    // Activate styles
styles.unuse();  // Deactivate styles

Basic Usage

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

// component.js - Import styles (automatic injection)
import "./styles.css";

// component.js - CSS Modules usage
import styles from "./component.module.css";
const element = document.createElement("div");
element.className = styles.header;

Architecture

Style Loader operates through several key components:

  • Main Loader: Processes CSS imports and generates runtime injection code
  • Injection Strategies: Seven different modes for inserting CSS into the DOM
  • Runtime System: Collection of modules that handle DOM manipulation
  • Options Schema: JSON schema defining all configuration options
  • HMR Support: Hot Module Replacement integration for development

Capabilities

Loader Configuration

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

// Loader options interface
interface StyleLoaderOptions {
  injectType?: "styleTag" | "singletonStyleTag" | "autoStyleTag" | 
               "lazyStyleTag" | "lazySingletonStyleTag" | "lazyAutoStyleTag" | 
               "linkTag";
  attributes?: Record<string, string>;
  insert?: string;
  base?: number;
  esModule?: boolean;
  styleTagTransform?: string;
}

Loader Configuration

Style Injection Types

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

// Injection type examples
"styleTag"              // Multiple <style> elements (default)
"singletonStyleTag"     // Single shared <style> element
"autoStyleTag"          // Auto-detect: multiple in modern browsers, singleton in IE6-9
"lazyStyleTag"          // Multiple <style> elements with use/unuse control
"lazySingletonStyleTag" // Single <style> element with use/unuse control
"lazyAutoStyleTag"      // Auto-detect with use/unuse control
"linkTag"               // <link rel="stylesheet"> elements

Style Injection Types

CSS Modules Integration

CSS Modules support with automatic export generation, named exports, and lazy loading integration.

// CSS Modules exports (generated by style-loader)
interface CSSModuleExports {
  [className: string]: string;
  default?: Record<string, string>;
}

// Lazy CSS Modules exports
interface LazyCSSModuleExports extends CSSModuleExports {
  use(insertOptions?: object): LazyCSSModuleExports;
  unuse(): void;
}

CSS Modules Integration

Runtime API

Low-level runtime functions for DOM manipulation, style injection, and element management.

// Main runtime injection functions
function injectStylesIntoStyleTag(list: CSSModule[], options: RuntimeOptions): UpdateFunction;
function injectStylesIntoLinkTag(url: string, options: RuntimeOptions): UpdateFunction;

type UpdateFunction = (newContent?: CSSModule[] | string | null) => void;

Runtime API

Types

// Core types used across the API
type CSSModule = [
  string,        // Module ID
  string,        // CSS content
  string?,       // Media query
  string?,       // Source map
  string?,       // Supports rule
  string?        // Layer name
];

interface RuntimeOptions {
  attributes?: Record<string, string>;
  insert?: (element: HTMLElement) => void;
  domAPI?: DOMAPIFunction;
  insertStyleElement?: (options: object) => HTMLStyleElement;
  setAttributes?: (element: HTMLElement, attributes?: object) => void;
  styleTagTransform?: (css: string, element: HTMLStyleElement) => void;
}

interface DOMAPIFunction {
  (options: RuntimeOptions): {
    update(obj: CSSModule): void;
    remove(): void;
  };
}