postcss-import 8.1.3

Postcss-import is a plugin for PostCSS that transforms @import rules by inlining content. It has the functionality to consume local files, node modules, or web modules, and offers a scope of resolution for @import rules, including the root directory, web_modules, node_modules, or local modules. When importing a module, it will look for index.css or a file referenced in the style or main fields in package.json. Additionally, this plugin optimizes output by importing a file only once within a given scope, avoiding duplicates of the same file. It should be noted that the plugin needs to be used as the first plugin, so it precedes other plugins' actions to keep the Abstract Syntax Tree (AST) as a single file.

Here is a guide for using postcss-import in JavaScript:

Step 1: Install the postcss-import using npm:

$ npm install -D postcss-import

Step 2: Import the required dependencies:

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

Step 3: Read the CSS to process:

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

Step 4: Process the CSS:

// process css
postcss()
  .use(atImport())
  .process(css, {
    // `from` option is needed here
    from: "css/input.css"
  })
  .then((result) => {
    const output = result.css

    console.log(output)
  })

In the css/input.css file, you can specify which CSS files you want to import:

/* 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);

@import 'baz.css' layer(baz-layer);

body {
  background: black;
}

The postcss-import documentation and usage examples are available on its GitHub page at https://github.com/postcss/postcss-import. The readme file there should provide you with a comprehensive guide on how to install, use, and understand the various options and configurations of postcss-import.