PostCSS plugin to import CSS files


PostCSS plugin to transform @import rules by inlining content.

This plugin can consume local files or node modules. To resolve path of an @import rule, it can look into root directory (by default process.cwd()), node_modules, web_modules or local modules. You can also provide manually multiples paths where to look at.


  • This plugin works great with postcss-url plugin, which will allow you to adjust assets url() (or even inline them) after inlining imported files.
  • In order to optimize output, this plugin will only import a file once on a given scope (root, media query...). Tests are made from the path & the content of imported files (using a hash table).
$ npm install postcss-import

If your stylesheets are not in the same place where you run postcss (process.cwd()), you will need to use from option to make relative imports work from input dirname.

// dependencies 
var fs = require("fs")
var postcss = require("postcss")
var atImport = require("postcss-import")
// css to be processed 
var css = fs.readFileSync("css/input.css", "utf8")
// process css 
var output = postcss()
  .process(css, {
    // `from` option is required so relative import can work from input dirname 
    from: "css/input.css"

Using this input.css:

/* can consume `node_modules`, `web_modules` or local modules */
@import "cssrecipes-defaults"/* == @import "./node_modules/cssrecipes-defaults/index.css"; */
@import "css/foo.css"/* relative to stylesheets/ according to `from` option above */
@import "css/bar.css" (min-width: 25em);
body {
  background: black;

will give you:

/* ... content of ./node_modules/my-css-on-npm/index.css */
/* ... content of foo.css */
@media (min-width: 25em) {
/* ... content of bar.css */
body {
  background: black;

Checkout tests for more examples.

Type: String
Default: process.cwd()

Define the root where to resolve path (eg: place where node_modules is). Should not be used that much.

Type: String|Array
Default: process.cwd() or dirname of the postcss from

A string or an array of paths in where to look for files.
Note: nested @import will additionally benefit of the relative dirname of imported files.

Type: Function
Default: null

A function to transform the content of imported files. Take one argument (file content) & should return the modified content.

Type: String
Default: utf8

Use if your CSS is encoded in anything other than UTF-8.

Type: Function
Default: null

Function called after the import process. Take one argument (array of imported files).

Type: Boolean
Default: false

Set to true if you want @import rules to parse glob patterns.

var postcss = require("postcss")
var atImport = require("postcss-import")
var css = postcss()
    path: ["src/css"]
    transform: require("css-whitespace")

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone
$ git checkout -b patch-1
$ npm install
$ npm test