Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

postcss-import

PostCSS plugin to inline @import rules content

Subscribe to updates I use postcss-import


Statistics on postcss-import

Number of watchers on Github 642
Number of open issues 6
Average time to close an issue about 1 month
Main language JavaScript
Average time to merge a PR 1 day
Open pull requests 11+
Closed pull requests 29+
Last commit over 1 year ago
Repo Created almost 5 years ago
Repo Last Updated over 1 year ago
Size 330 KB
Organization / Authorpostcss
Latest Release11.1.0
Contributors13
Page Updated
Do you use postcss-import? Leave a review!
View open issues (6)
View postcss-import activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating postcss-import for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

postcss-import

Unix Build status Windows Build status Version Greenkeeper badge

PostCSS plugin to transform @import rules by inlining content.

This plugin can consume local files, node modules or web_modules. To resolve path of an @import rule, it can look into root directory (by default process.cwd()), web_modules, node_modules or local modules. When importing a module, it will look for index.css or file referenced in package.json in the style or main fields. You can also provide manually multiples paths where to look at.

Notes:

  • This plugin should probably be used as the first plugin of your list. This way, other plugins will work on the AST as if there were only a single file to process, and will probably work as you can expect.
  • 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). If this behavior is not what you want, look at skipDuplicates option
  • If you are looking for glob, or sass like imports (prefixed partials), please look at postcss-easy-import (which use this plugin under the hood).
  • Imports which are not modified (by options.filter or because they are remote imports) are moved to the top of the output.
  • This plugin attempts to follow the CSS @import spec; @import statements must precede all other statements (besides @charset).

Installation

$ npm install postcss-import

Usage

Unless your stylesheet is in the same place where you run postcss (process.cwd()), you will need to use from option to make relative imports work.

// 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
postcss()
  .use(atImport())
  .process(css, {
    // `from` option is needed here
    from: "css/input.css"
  })
  .then(function (result) {
    var output = result.css

    console.log(output)
  })

css/input.css:

/* can consume `node_modules`, `web_modules` or local modules */
@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */
@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */

@import "foo.css"; /* relative to css/ according to `from` option above */

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

body {
  background: black;
}

will give you:

/* ... content of ../node_modules/cssrecipes-defaults/index.css */
/* ... content of ../node_modules/normalize.css/normalize.css */

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

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

body {
  background: black;
}

Checkout the tests for more examples.

Options

filter

Type: Function
Default: () => true

Only transform imports for which the test function returns true. Imports for which the test function returns false will be left as is. The function gets the path to import as an argument and should return a boolean.

root

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

Define the root where to resolve path (eg: place where node_modules are). Should not be used that much.
Note: nested @import will additionally benefit of the relative dirname of imported files.

path

Type: String|Array
Default: []

A string or an array of paths in where to look for files.

plugins

Type: Array
Default: undefined

An array of plugins to be applied on each imported files.

resolve

Type: Function
Default: null

You can provide a custom path resolver with this option. This function gets (id, basedir, importOptions) arguments and should return a path, an array of paths or a promise resolving to the path(s). If you do not return an absolute path, your path will be resolved to an absolute path using the default resolver. You can use resolve for this.

load

Type: Function
Default: null

You can overwrite the default loading way by setting this option. This function gets (filename, importOptions) arguments and returns content or promised content.

skipDuplicates

Type: Boolean
Default: true

By default, similar files (based on the same content) are being skipped. It's to optimize output and skip similar files like normalize.css for example. If this behavior is not what you want, just set this option to false to disable it.

addModulesDirectories

Type: Array
Default: []

An array of folder names to add to Node's resolver. Values will be appended to the default resolve directories: ["node_modules", "web_modules"].

This option is only for adding additional directories to default resolver. If you provide your own resolver via the resolve configuration option above, then this value will be ignored.

Example with some options

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

postcss()
  .use(atImport({
    path: ["src/css"],
  }))
  .process(cssString)
  .then(function (result) {
    var css = result.css
  })

dependency Message Support

postcss-import adds a message to result.messages for each @import. Messages are in the following format:

{
  type: 'dependency',
  file: absoluteFilePath,
  parent: fileContainingTheImport
}

This is mainly for use by postcss runners that implement file watching.


CONTRIBUTING

  • Pull requests and Stars are always welcome.
  • For bugs and feature requests, please create an issue.
  • Pull requests must be accompanied by passing automated tests ($ npm test).

Changelog

License

postcss-import open issues Ask a question     (View All Issues)
  • over 2 years onImport argument includes top-level (importing) file
  • almost 3 years Add dependency message
  • almost 3 years postcss-import add lines between classes and comments
  • almost 3 years Importing from node_modules and web_modules does not work when used with SugarSS parser
  • almost 3 years Duplicate when importing
  • almost 3 years postcss-import 8.1.2 won't work when used with postcss 5.1
  • about 3 years Moving from 8.0.2 to 8.1.2 causes many "Cannot resolve module" errors with Webpack.
  • about 3 years Resolve function behavior
  • about 3 years Play better with postcss-modules
  • about 3 years Make JSPM related dep optional
  • about 3 years object-assign: no such file or directory
  • about 3 years Blank lines get removed
  • about 3 years Support custom moduleDirectories
  • over 3 years Failed to find should be an error, not a warning
  • over 3 years Importing remote sources
  • over 3 years All imports after some others CSS declaration should warn and be skipped.
  • almost 4 years Add option to disable the warning for empty css files
  • about 4 years Support the supports-condition
postcss-import open pull requests (View All Pulls)
  • Add test for nested import ordering
  • Importing remote sources over HTTP(S)
  • Improved tolerancy for failed imports of jspm-chain. See issue #198. Works around https://github.com/jspm/jspm-cli/pull/1779 stuntil that is fixed.
  • Fixed extension support - clean version
  • Add input sourceMap support for load hook
  • Play well with Custom Syntax
  • Remove promise-each dependency
  • Add `beforeImport` option
  • Added Filter Parameter
  • Adding filename to resolver arguments
  • Adding filter method
postcss-import list of languages used
postcss-import latest release notes
11.1.0 11.1.0
  • Added: filter option
11.0.0 11.0.0
  • Changed: A syntax error in an imported file now throws an error instead of just warning (#264)
  • Changed: Symlink handling to be consistent with Node.js require (#300)
10.0.0 10.0.0
  • Removed: Support for Node.js versions less than 4.5.x (#283)
  • Changed: Upgraded to Postcss v6 (#283)
  • Removed: jspm support (#283)
  • Removed: deprecated addDependencyTo option
  • Removed: onImport option
  • Changed: Doesn't depend on promise-each (#281)
Other projects in JavaScript