postcss-import

What is postcss-import?

The postcss-import npm package is a plugin for PostCSS that allows you to import local files, node modules, or web_modules into your CSS files. It can be used to modularize your CSS and help manage large stylesheets by splitting them into smaller, more maintainable pieces.

What are postcss-import's main functionalities?

Importing local files

Allows you to import a local CSS file into another CSS file. This is useful for splitting your CSS into smaller, more manageable files.

@import 'local-file.css';

Importing node modules

Enables you to import CSS from a node module installed in your project's node_modules directory. This is useful for including third-party stylesheets in your project.

@import 'npm-module-name';

Importing from web_modules

Allows you to import CSS from web_modules, which can be useful if you are using a package manager that supports this feature, like Snowpack.

@import 'web-module-name';

Customizing import paths

Lets you customize the paths where postcss-import looks for CSS files to import. This is helpful when you have a specific directory structure and want to keep your imports clean and relative to those paths.

postcss([ require('postcss-import')({ path: ['src/css', 'src/styles'] }) ]);

Other packages similar to postcss-import

postcss-easy-import

A wrapper around postcss-import that adds glob pattern importing and other features. It is similar to postcss-import but with additional options for ease of use.

postcss-partial-import

Another PostCSS plugin that allows you to import partials. It is similar to postcss-import but with a focus on partials and includes features like prefixing and extension omission.

postcss-advanced-variables

While not solely focused on importing, this plugin extends CSS with variables, conditionals, and iterators that can be imported from other files. It offers a different set of features compared to postcss-import, which is focused on importing CSS files.

README

postcss-import

PostCSS plugin to transform @import rules by inlining content.

Note: This plugin works great with postcss-url plugin, which will allow you to adjust assets url() (or even inline them) after inlining imported files.

Installation

$ npm install postcss-import

Usage

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var atImport = require("postcss-import")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css
var output = postcss()
  .use(atImport())
  .process(css)
  .css

Using this input.css:

@import "foo.css";

@import "bar.css" (min-width: 25em);

body {
  background: black;
}

will give you:

/* ... content of foo.css */

@media (min-width: 25em) {
/* ... content of bar.css */
}

body {
  background: black;
}

Checkout tests for more examples.

Options

encoding

Type: String
Default: utf8

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

path

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.

transform

Type: Function
Default: null

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

Example with some options

var postcss = require("postcss")
var atImport = require("postcss-import")

var css = postcss()
  .use(atImport({
    path: [
      "node_modules",
    ]
    transform: require("css-whitespace")
  }))
  .process(cssString)
  .css

---

Contributing

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

$ git clone https://github.com/postcss/postcss-import.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License