webpack/css-loader
Css Loader
css-loader 是一个 Webpack 模块，在打包过程中将 CSS 文件转换为 JavaScript 模块并解析其内部依赖。它充当 CSS 资产解析器，将 import 规则和 url 函数转换为模块标识符，从而将样式表集成到依赖图中。
该项目实现了 CSS Modules，通过使用唯一标识符对类和 ID 选择器进行本地作用域限制，防止全局样式冲突。它包含一个可互操作 CSS (ICSS) 系统，通过可重用的值声明实现跨不同类和模块的样式共享与组合。
该工具提供了资产路径解析和生成源映射 (source maps) 的功能，以便将打包后的样式链接回原始源文件。它还支持将样式导出为可构造样式表，并管理构建流水线中加载器的顺序。
Features
- CSS Module Integrations - Integrates CSS files as JavaScript modules to manage styles locally within individual components.
- CSS Modules - Implements a scoped CSS mechanism using unique class names to prevent global style collisions.
- Webpack Loaders - Acts as a Webpack loader that transforms CSS files into modules and resolves internal dependencies during bundling.
- Dependency Graph Bundlers - Analyzes CSS import statements to construct a dependency graph for bundling stylesheets.
- Asset Path Resolvers - Translates relative asset references in url and image-set functions into absolute paths for bundling.
- Hashed Class Names - Generates unique identifiers by hashing local class names to prevent style collisions.
- Module Path Resolution - Uses rules to locate CSS files and assets within a hierarchical module tree using relative paths.
- CSS AST Parsing - Parses CSS source code into an abstract syntax tree to enable style transformations and dependency resolution.
- Scoped CSS Modules - Localizes CSS class names to prevent style collisions between different components.
- Scoped Styles - Transforms CSS class names into unique identifiers to prevent global style collisions across components.
- CSS Asset Bundling - Resolves and optimizes style imports to bundle multiple stylesheets together with accompanying code.
- JavaScript Module Exports - Wraps CSS content into JavaScript module exports to allow styles to be imported as strings or objects.
- Static Asset Module Importers - Parses CSS import rules to treat referenced stylesheets as direct module dependencies within the Webpack build process.
- Asset URL Resolvers - Translates CSS url and import rules into module identifiers to locate assets within the dependency graph.
- CSS-to-JS Transpilation - Transforms CSS files into JavaScript modules and resolves internal dependencies for bundling.
- Source Map Generators - Generates mapping files that link compiled CSS output back to the original source files for easier debugging.
- Transformation Offsets - Tracks character offsets during transformations to create mapping files that link compiled output back to original source.
- Composable Style Classes - Links multiple local class names together so that a single exported identifier includes multiple classes.
- Interoperable Value Declarations - Implements reusable value rules to declare constants for colors and media queries that can be shared across the document.
- Class Name Compositions - Provides utilities for concatenating and managing multiple CSS class name strings through style composition.
- Constructable Stylesheets - Exports CSS as stylesheet objects for use with custom elements and shadow DOM.
- Interoperable CSS Processing - Handles Interoperable CSS (ICSS) rules to share and compose styles between different classes and modules.
- Style Transformation Debugging - Provides source maps for CSS that allow browser developer tools to link bundled styles back to their original source files.
- Constructable Stylesheets - Outputs styles as constructable stylesheet objects for direct use with browser APIs to improve rendering performance.
- ICSS Processors - Provides a mechanism for handling Interoperable CSS (ICSS) to share and compose styles across modules.
- CSS in JS - Webpack loader for processing CSS files.
- CSS in JS Libraries - Webpack loader for processing CSS files in build pipelines.
