PostCSSImport

PostCSS-Import, commonly referred to as postcss-import, is a PostCSS plugin that processes CSS @import rules by inlining the content from the referenced files into the current stylesheet. This enables developers to organize CSS across multiple files during development while producing a single, concatenated output for deployment.

The plugin resolves import paths, supports configurable search roots, and can prevent duplicate inlines. Typical options include path (specifying base directories to search for imports), root (restricting import locations to a specified scope), skipDuplicates (avoiding repeated inlining of the same file), and load (a custom function to load file contents). It also provides a resolve option to customize how imports are located and a plugins option to apply additional PostCSS transformations to the inlined content. These capabilities allow imported CSS to be further processed with other PostCSS plugins, enabling consistent tooling across the build.

Usage generally involves installing the package and adding it to a PostCSS configuration. For example, install with npm i -D postcss-import, then configure PostCSS to include require('postcss-import') alongside other plugins. In CSS, the typical usage is to place import statements like @import 'reset.css'; at the top of a file, which results in the contents of reset.css being inlined during the build process. This plugin is commonly used with build tools and ecosystems that integrate PostCSS, such as webpack, Rollup, Parcel, or Gulp, via their respective PostCSS integrations.

Limitations include that postcss-import handles only CSS @import semantics and does not implement a full CSS module system. Ordering and media query implications can affect how inlined styles apply, so project maintainers should consider the impact of inlining on cascade behavior and sourcemaps.