babel-loader is a webpack loader that integrates Babel transpilation into the webpack build pipeline. It transpiles JavaScript files using Babel, supporting caching, custom configuration, metadata passing, and source map handling. The architecture is a single loader module that resolves Babel configuration per file, optionally caches results to the filesystem with compression and external dependency tracking, and returns transformed code and maps to webpack. It also exposes a `.custom()` builder for advanced customization of Babel's config and results. The codebase is well-structured, with clean separation of concerns (error formatting, caching, serialization, transform wrapper) and comprehensive tests against both webpack and Rspack.
sass-resources-loader is a Webpack loader that automatically injects Sass resources (variables, mixins, functions) into every Sass module processed by Webpack. It eliminates the need to manually import shared Sass utilities in each file by preprocessing Sass source files to prepend resource content. The loader supports both @import and @use Sass syntax, includes special handling for hoisting @use statements (which must precede other declarations), and correctly rewrites relative paths in imports to be relative to the webpack context. It handles glob patterns for resource files and provides detailed error reporting.
This is a mature, widely-used webpack plugin and loader for extracting CSS into separate files. It provides a custom module type (`CssModule`), dependency (`CssDependency`), and runtime code for loading CSS chunks, including support for async loading, source maps, HMR, CSS modules, and public path customization. The plugin is now deprecated in favor of webpack's native CSS support (`experiments.css`), but remains functional and receives maintenance updates. The codebase demonstrates advanced webpack plugin patterns: custom module factories, hook-based runtime generation, schema validation via `schema-utils`, and a client-side HMR runtime. The test suite is extensive, covering many edge cases with snapshot testing and integration tests across multiple Node versions and operating systems. The architecture is tightly coupled to webpack 5 internals, which limits reusability outside of webpack plugin development, but the patterns (custom modules, boolean matcher, URL normalization) are instructive for other webpack plugin authors.
This is a webpack loader that compiles Stylus (.styl) files into CSS. It acts as a bridge between the webpack build system and the Stylus CSS preprocessor, handling import resolution (including glob patterns, node_modules, webpack aliases, and tilde imports), source maps, custom Stylus options, and URL rewriting. The architecture follows the standard webpack loader pattern: it receives the source code, parses options via a JSON schema, renders Stylus using an implementation (defaulting to the `stylus` package), and outputs either the compiled CSS along with source map and dependency list. It supports dual ESM/CJS builds and is compatible with webpack 5 and optionally Rspack. The primary entry point is `src/index.js`, which exports the loader function. Core utilities live in `src/utils.js`, which includes a custom Stylus evaluator that overrides import resolution to delegate to webpack's resolver, utility functions for normalizing options and source maps, and a dependency collector that traverses the Stylus AST to report all imports to webpack's build graph. The loader integrates deeply with webpack's module resolution (aliases, `resolve.byDependency`, custom conditions) and supports advanced Stylus features like CSS module exports, `@import` and `@require`, `@block`, and the `url()` resolver. Externally, it depends on the `stylus` npm package as the core preprocessor, and on webpack's loader API. It is actively maintained, with recent major version bumps aligning with Node.js runtime requirements (v9.0.0 requires Node >=22.11.0). The codebase is well-tested with a comprehensive test suite covering numerous edge cases in import resolution, error handling, and option combinations. While the loader itself is webpack-specific, several internal patterns (custom evaluator, dependency resolution, URL handling) demonstrate non-obvious craftsmanship and could inform similar integrations for other CSS preprocessors.