sfcode
An Online Competing and Development Environment
|
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:
url()
(or even inline them) after inlining imported files.skipDuplicates
optionoptions.filter
or because they are remote imports) are moved to the top of the output.@import
spec; @import
statements must precede all other statements (besides @charset
).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.
css/input.css
:
will give you:
Checkout the [tests](test) for more examples.
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.
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.
Type: String|Array
Default: []
A string or an array of paths in where to look for files.
Type: Array
Default: undefined
An array of plugins to be applied on each imported files.
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.
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.
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.
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.
postcss-import
adds a message to result.messages
for each @import
. Messages are in the following format:
This is mainly for use by postcss runners that implement file watching.
$ npm test
).