JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16808183
  • Score
    100M100P100Q220546F
  • License MIT

PostCSS plugin to import CSS files

Package Exports

  • postcss-import

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-import) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-import Build Status

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

If your stylsheets 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("stylesheets/input.css", "utf8")

// process css
var output = postcss({
  // `from` option is required so relative import can work from input dirname
  from: "stylesheets/input.css"
})
  .use(atImport())
  .process(css)
  .css

Using this input.css:

/* can consume npm package */
@import "my-css-on-npm"; /* == @import "./node_modules/my-css-on-npm/index.css"; */

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

@import "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.

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: ["src/css"]
    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