postcss-import
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
postcss-value-parser | 4.2.0 | 7.81 kB | MIT | prod | |
postcss | 8.4.38 | 193.21 kB | MIT | prod peer | |
read-cache | 1.0.0 | 1.88 kB | MIT | prod | |
resolve | 1.22.8 | 26.69 kB | MIT | prod |
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.