style-loader

style-loader is a webpack loader that takes the CSS output from css-loader and injects it into the document via <style> or <link> tags, letting import "./styles.css" work directly in a JavaScript bundle without a separate static-stylesheet build step. It supports seven injection strategies (injectType) — a plain per-module <style> tag, a shared singleton tag, an IE-aware auto mode, lazy on-demand variants exposing .use()/.unuse(), and a linkTag mode for external stylesheet injection — plus configurable insertion points, custom attributes (including CSP nonces), and CSS Modules class-name exports.

As of webpack 5.104+, native CSS support (experiments.css) covers much of what style-loader historically did, and the maintainers have marked the package deprecated in favor of that built-in path. The loader still works today and becomes a no-op for modules compiled through webpack’s native CSS type, so existing configurations keep functioning while teams migrate rule by rule.

What You Get

• Seven injectType strategies (styleTag, singletonStyleTag, autoStyleTag, lazyStyleTag, lazySingletonStyleTag, lazyAutoStyleTag, linkTag) covering eager, lazy, and legacy-IE injection modes
• Runtime DOM API modules (styleDomAPI, singletonStyleDomAPI, insertBySelector, insertStyleElement) that isolate style-tag creation, attribute assignment, and DOM insertion into swappable pieces
• Hot Module Replacement support that patches injected style content and CSS Modules locals in place without a full page reload
• CSS Modules support that re-exports the generated class-name locals object alongside the injected styles
• Configurable attributes, including CSP nonce handling, and a custom insertion target via a CSS selector or an absolute path to a custom insert function

Common Use Cases

• Development-mode webpack setups that want instant CSS updates via HMR without a separate extraction step
• Prototypes and small apps where a single injected style tag is simpler than configuring MiniCssExtractPlugin
• CSS Modules projects that need the generated class-name map exported alongside the injected styles
• Migrating a rule-by-rule webpack config to native CSS support while leaving not-yet-migrated rules on style-loader

Under The Hood

Architecture

style-loader’s real work happens in loader.pitch (src/index.js), which runs before the request is resolved and returns a string of generated JavaScript rather than transforming file content directly — a standard webpack loader pattern but used here as the entire mechanism. Based on the injectType option, pitch selects which small runtime modules under src/runtime/ to stitch together (styleDomAPI/singletonStyleDomAPI for tag creation, insertBySelector/insertStyleElement for DOM placement, injectStylesIntoStyleTag/injectStylesIntoLinkTag as the reference-counted update orchestrator, isEqualLocals for HMR diffing), with src/utils.js providing a consistent family of getImportXCode/getXCode functions that emit either ESM or CJS import statements depending on the esModule option. The orchestrator in injectStylesIntoStyleTag.js maintains a module-level stylesInDOM array keyed by an id+index identifier and reference-counts each style block so shared CSS across multiple importing modules is inserted once and torn down only when its last reference is removed.

Tech Stack

The loader itself is plain JavaScript compiled with Babel (@babel/core, @babel/preset-env) from src/ to dist/cjs.js and dist/esm.js, then validated with es-check to confirm the runtime bundle stays ES3-compatible for legacy-browser support (a hard requirement since these runtime files ship inside end-user application bundles, not just the build). It declares zero runtime dependencies and a single peer dependency on webpack ^5.27.0. Tooling includes ESLint 9’s flat config with a shared eslint-config-webpack preset, Prettier, cspell for documentation spell-checking, and Husky/commitlint/standard-version enforcing conventional commits for changelog-driven releases.

Code Quality

The test suite (13 files under test/, run via Jest with jest-environment-jsdom) exercises each injectType mode, option combination (attributes, insert, esModule, base, styleTagTransform), and the CJS entry point, using snapshot testing for generated loader output. CI runs the full lint suite (ESLint, Prettier, cspell) across Node LTS on every push and PR, plus a separate GitHub Actions dependency-review job on PRs. There is no static typing (no TypeScript, no JSDoc type-checking) — correctness relies on the test suite and runtime es-check validation rather than a type system.

API Design The public surface is a single loader string plus a handful of well-documented options (injectType, attributes, insert, base, esModule, styleTagTransform), so a typical webpack rule needs only use: ["style-loader", "css-loader"] to work. The seven injectType values are additive rather than requiring separate configuration files, and the lazy variants expose a small, consistent .use()/.unuse() API for on-demand injection. The README documents every option with runnable webpack-config examples, keeping the boilerplate needed to get started minimal even though the underlying code-generation mechanism is non-trivial.