Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
PostCSS plugin to inline @import rules content
JavaScript CSS


latest commit 090967fb15
@MoOx MoOx authored

postcss-import Travis Build Status AppVeyor Build status

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.

Example with some options

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



Something went wrong with that request. Please try again.