postcss-import
Advanced tools
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.
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'] }) ]);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.
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.
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.
PostCSS plugin to transform
@importrules by inlining content.
This plugin can consume local files, node modules or bower packages.
To resolve path of an @import rule, it can look into root directory
(by default process.cwd()), node_modules, web_modules, bower_components
or local modules.
When importing a module, it will looks for index.css or file referenced in
package.json in the style field.
You can also provide manually multiples paths where to look at.
Notes:
url() (or even inline them) after inlining imported files.skipDuplicates option$ npm install postcss-import
If your stylesheets 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("css/input.css", "utf8")
// process css
var output = postcss()
.use(atImport())
.process(css, {
// `from` option is required so relative import can work from input dirname
from: "css/input.css"
})
.css
console.log(output)
Using this input.css:
/* can consume `node_modules`, `web_modules`, `bower_components` or local modules */
@import "cssrecipes-defaults"; /* == @import "./node_modules/cssrecipes-defaults/index.css"; */
@import "normalize.css/normalize"; /* == @import "./bower_components/normalize.css/normalize.css"; */
@import "css/foo.css"; /* relative to stylesheets/ according to `from` option above */
@import "css/bar.css" (min-width: 25em);
body {
background: black;
}
will give you:
/* ... content of ./node_modules/my-css-on-npm/index.css */
/* ... content of ./bower_components/my-css-on-bower/index.css */
/* ... content of foo.css */
@media (min-width: 25em) {
/* ... content of bar.css */
}
body {
background: black;
}
Checkout tests for more examples.
rootType: String
Default: process.cwd()
Define the root where to resolve path (eg: place where node_modules and bower_components are). Should not be used that much.
pathType: 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.
asyncType: Boolean
Default: false
Allow to enable PostCSS async API usage. Before enabling this, check that your runner allow async usage. Note: this is not enabling async fs read yet.
transformType: Function
Default: null
A function to transform the content of imported files. Take one argument (file content) & should return the modified content.
pluginsType: Array
Default: undefined
An array of plugins to be applied on each imported file.
encodingType: String
Default: utf8
Use if your CSS is encoded in anything other than UTF-8.
onImportType: Function
Default: null
Function called after the import process. Take one argument (array of imported files).
globType: Boolean
Default: false
Set to true if you want @import rules to parse glob patterns.
resolveType: Function
Default: null
You can overwrite the default path resolving way by setting this option, using the resolve.sync(id, opts) signature that resolve.sync has.
skipDuplicatesType: 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.
addDependencyToType: Function
Default: null
Allow to generate and call a callback that take one argument, the object from
which you need to call addDependency from.
Called whenever a file is imported, handy in a webpack workflow.
It's equivalent to onImport with the following code:
{
onImport: function (files) {
files.forEach(this.addDependency)
}.bind(obj) // obj = the argument you should pass to `addDependencyTo()`
}
var postcss = require("postcss")
var atImport = require("postcss-import")
var css = postcss()
.use(atImport({
path: ["src/css"]
transform: require("css-whitespace")
}))
.process(cssString)
.css
$ npm test).FAQs
PostCSS plugin to import CSS files
We found that postcss-import demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.