postcss-anywhere-import
v0.1.0
Published
PostCSS plugin to import CSS files (anywhere from top to bottom of a CSS file)
Downloads
3
Maintainers
Readme
postcss-anywhere-import
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.
- Running postcss-url after postcss-anywhere-import in your plugin chain 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 Imports, you can use postcss-import-ext-glob to extend postcss-import.
- If you want to import remote sources, you can use postcss-import-url with its
dataUrls
plugin option to extend postcss-import. - 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 -D postcss-anywhere-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
const fs = require("fs")
const postcss = require("postcss")
const atImport = require("postcss-anywhere-import")
// css to be processed
const css = fs.readFileSync("css/input.css", "utf8")
// 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)
})
css/input.css
:
/* remote urls are preserved */
@import "https://example.com/styles.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 */
body {
background: black;
}
/* all standard notations of the "url" value are supported */
@import url(foo-1.css);
@import url("foo-2.css");
@import "bar.css" (min-width: 25em);
@import 'baz.css' layer(baz-layer);
will give you:
@import "https://example.com/styles.css";
/* ... content of ../node_modules/cssrecipes-defaults/index.css */
/* ... content of ../node_modules/normalize.css/normalize.css */
/* ... content of css/foo.css */
body {
background: black;
}
/* ... content of css/foo-1.css */
/* ... content of css/foo-2.css */
@media (min-width: 25em) {
/* ... content of css/bar.css */
}
@layer baz-layer {
/* ... content of css/baz.css */
}
Checkout the tests for more examples.
Options
anywhereImport
Type: Boolean
Default: true
Allow this PostCSS plugin to consider any @import
mentions and using anywhere/anyplace
inside your .css files. If you want to regret to default version of this plugin
like postcss-import turn this anywhereImport
option to false
.
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.
nameLayer
Type: Function
Default: null
You can provide a custom naming function for anonymous layers (@import 'baz.css' layer;
).
This function gets (index, rootFilename)
arguments and should return a unique string.
This option only influences imports without a layer name. Without this option the plugin will warn on anonymous layers.
Example with some options
const postcss = require("postcss")
const atImport = require("postcss-anywhere-import")
postcss()
.use(atImport({
path: ["src/css"],
}))
.process(cssString)
.then((result) => {
const { css } = result
})
dependency
Message Support
postcss-anywhere-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
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
$ npm test
).