\href{https://travis-ci.org/postcss/postcss-import}{\texttt{ }} \href{https://ci.appveyor.com/project/MoOx/postcss-import/branch/master}{\texttt{ }} \href{https://github.com/postcss/postcss-import/blob/master/CHANGELOG.md}{\texttt{ }} \href{https://greenkeeper.io/}{\texttt{ }}

\begin{quote}
\href{https://github.com/postcss/postcss}{\texttt{ Post\+CSS}} plugin to transform {\ttfamily @import} \end{quote}
rules by inlining content.

This plugin can consume local files, node modules or web\+\_\+modules. To resolve path of an {\ttfamily @import} rule, it can look into root directory (by default {\ttfamily process.\+cwd()}), {\ttfamily web\+\_\+modules}, {\ttfamily node\+\_\+modules} or local modules. {\itshape When importing a module, it will look for {\ttfamily index.\+css} or file referenced in {\ttfamily package.\+json} in the {\ttfamily style} or {\ttfamily main} fields.} You can also provide manually multiples paths where to look at.

{\bfseries{Notes\+:}}


\begin{DoxyItemize}
\item {\bfseries{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}}.
\item This plugin works great with \href{https://github.com/postcss/postcss-url}{\texttt{ postcss-\/url}} plugin, which will allow you to adjust assets {\ttfamily url()} (or even inline them) after inlining imported files.
\item In order to optimize output, {\bfseries{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 {\ttfamily skip\+Duplicates} option
\item {\bfseries{If you are looking for glob, or sass like imports (prefixed partials)}}, please look at \href{https://github.com/trysound/postcss-easy-import}{\texttt{ postcss-\/easy-\/import}} (which use this plugin under the hood).
\item Imports which are not modified (by {\ttfamily options.\+filter} or because they are remote imports) are moved to the top of the output.
\item {\bfseries{This plugin attempts to follow the CSS {\ttfamily @import} spec}}; {\ttfamily @import} statements must precede all other statements (besides {\ttfamily @charset}).
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21109}{}\doxysection{Installation}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21109}

\begin{DoxyCode}{0}
\DoxyCodeLine{\$ npm install postcss-\/import }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21110}{}\doxysection{Usage}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21110}
Unless your stylesheet is in the same place where you run postcss ({\ttfamily process.\+cwd()}), you will need to use {\ttfamily from} option to make relative imports work.


\begin{DoxyCode}{0}
\DoxyCodeLine{// dependencies}
\DoxyCodeLine{var fs = require("{}fs"{})}
\DoxyCodeLine{var postcss = require("{}postcss"{})}
\DoxyCodeLine{var atImport = require("{}postcss-\/import"{})}
\DoxyCodeLine{}
\DoxyCodeLine{// css to be processed}
\DoxyCodeLine{var css = fs.readFileSync("{}css/input.css"{}, "{}utf8"{})}
\DoxyCodeLine{}
\DoxyCodeLine{// process css}
\DoxyCodeLine{postcss()}
\DoxyCodeLine{  .use(atImport())}
\DoxyCodeLine{  .process(css, \{}
\DoxyCodeLine{    // `from` option is needed here}
\DoxyCodeLine{    from: "{}css/input.css"{}}
\DoxyCodeLine{  \})}
\DoxyCodeLine{  .then(function (result) \{}
\DoxyCodeLine{    var output = result.css}
\DoxyCodeLine{}
\DoxyCodeLine{    console.log(output)}
\DoxyCodeLine{  \}) }

\end{DoxyCode}


{\ttfamily css/input.\+css}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* can consume `node\_modules`, `web\_modules` or local modules */}
\DoxyCodeLine{@import "{}cssrecipes-\/defaults"{}; /* == @import "{}../node\_modules/cssrecipes-\/defaults/index.css"{}; */}
\DoxyCodeLine{@import "{}normalize.css"{}; /* == @import "{}../node\_modules/normalize.css/normalize.css"{}; */}
\DoxyCodeLine{}
\DoxyCodeLine{@import "{}foo.css"{}; /* relative to css/ according to `from` option above */}
\DoxyCodeLine{}
\DoxyCodeLine{@import "{}bar.css"{} (min-\/width: 25em);}
\DoxyCodeLine{}
\DoxyCodeLine{body \{}
\DoxyCodeLine{  background: black;}
\DoxyCodeLine{\} }

\end{DoxyCode}


will give you\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* ... content of ../node\_modules/cssrecipes-\/defaults/index.css */}
\DoxyCodeLine{/* ... content of ../node\_modules/normalize.css/normalize.css */}
\DoxyCodeLine{}
\DoxyCodeLine{/* ... content of css/foo.css */}
\DoxyCodeLine{}
\DoxyCodeLine{@media (min-\/width: 25em) \{}
\DoxyCodeLine{/* ... content of css/bar.css */}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{body \{}
\DoxyCodeLine{  background: black;}
\DoxyCodeLine{\} }

\end{DoxyCode}


Checkout the \mbox{[}tests\mbox{]}(test) for more examples.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21111}{}\doxysubsection{Options}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21111}
\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21112}{}\doxysubsection{$<$tt$>$filter$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21112}
Type\+: {\ttfamily Function} ~\newline
 Default\+: {\ttfamily () =$>$ true}

Only transform imports for which the test function returns {\ttfamily true}. Imports for which the test function returns {\ttfamily false} will be left as is. The function gets the path to import as an argument and should return a boolean.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21113}{}\doxysubsubsection{$<$tt$>$root$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21113}
Type\+: {\ttfamily String} ~\newline
 Default\+: {\ttfamily process.\+cwd()} or {\itshape dirname of \href{https://github.com/postcss/postcss\#node-source}{\texttt{ the postcss {\ttfamily from}}}}

Define the root where to resolve path (eg\+: place where {\ttfamily node\+\_\+modules} are). Should not be used that much. ~\newline
 {\itshape Note\+: nested {\ttfamily @import} will additionally benefit of the relative dirname of imported files.}\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21114}{}\doxysubsubsection{$<$tt$>$path$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21114}
Type\+: {\ttfamily String$\vert$\+Array} ~\newline
 Default\+: {\ttfamily \mbox{[}\mbox{]}}

A string or an array of paths in where to look for files.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21115}{}\doxysubsubsection{$<$tt$>$plugins$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21115}
Type\+: {\ttfamily Array} ~\newline
 Default\+: {\ttfamily undefined}

An array of plugins to be applied on each imported files.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21116}{}\doxysubsubsection{$<$tt$>$resolve$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21116}
Type\+: {\ttfamily Function} ~\newline
 Default\+: {\ttfamily null}

You can provide a custom path resolver with this option. This function gets {\ttfamily (id, basedir, import\+Options)} 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 \href{https://github.com/substack/node-resolve}{\texttt{ resolve}} for this.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21117}{}\doxysubsubsection{$<$tt$>$load$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21117}
Type\+: {\ttfamily Function} ~\newline
 Default\+: null

You can overwrite the default loading way by setting this option. This function gets {\ttfamily (filename, import\+Options)} arguments and returns content or promised content.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21118}{}\doxysubsubsection{$<$tt$>$skip\+Duplicates$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21118}
Type\+: {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily true}

By default, similar files (based on the same content) are being skipped. It\textquotesingle{}s to optimize output and skip similar files like {\ttfamily normalize.\+css} for example. If this behavior is not what you want, just set this option to {\ttfamily false} to disable it.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21119}{}\doxysubsubsection{$<$tt$>$add\+Modules\+Directories$<$/tt$>$}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21119}
Type\+: {\ttfamily Array} ~\newline
 Default\+: {\ttfamily \mbox{[}\mbox{]}}

An array of folder names to add to \href{https://github.com/substack/node-resolve}{\texttt{ Node\textquotesingle{}s resolver}}. Values will be appended to the default resolve directories\+: {\ttfamily \mbox{[}\char`\"{}node\+\_\+modules\char`\"{}, \char`\"{}web\+\_\+modules\char`\"{}\mbox{]}}.

This option is only for adding additional directories to default resolver. If you provide your own resolver via the {\ttfamily resolve} configuration option above, then this value will be ignored.\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21120}{}\doxysubsubsection{Example with some options}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21120}

\begin{DoxyCode}{0}
\DoxyCodeLine{var postcss = require("{}postcss"{})}
\DoxyCodeLine{var atImport = require("{}postcss-\/import"{})}
\DoxyCodeLine{}
\DoxyCodeLine{postcss()}
\DoxyCodeLine{  .use(atImport(\{}
\DoxyCodeLine{    path: ["{}src/css"{}],}
\DoxyCodeLine{  \}))}
\DoxyCodeLine{  .process(cssString)}
\DoxyCodeLine{  .then(function (result) \{}
\DoxyCodeLine{    var css = result.css}
\DoxyCodeLine{  \}) }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21121}{}\doxysection{$<$tt$>$dependency$<$/tt$>$ Message Support}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21121}
{\ttfamily postcss-\/import} adds a message to {\ttfamily result.\+messages} for each {\ttfamily @import}. Messages are in the following format\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  type: 'dependency',}
\DoxyCodeLine{  file: absoluteFilePath,}
\DoxyCodeLine{  parent: fileContainingTheImport}
\DoxyCodeLine{\} }

\end{DoxyCode}


This is mainly for use by postcss runners that implement file watching.

\DoxyHorRuler{0}
\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21123}{}\doxysection{CONTRIBUTING}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21123}

\begin{DoxyItemize}
\item ⇄ Pull requests and ★ Stars are always welcome.
\item For bugs and feature requests, please create an issue.
\item Pull requests must be accompanied by passing automated tests ({\ttfamily \$ npm test}).
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21124}{}\doxysection{@ref /opt/lampp/htdocs/sfcode/node\+\_\+modules/postcss-\/import/\+CHANGELOG.\+md \char`\"{}\+Changelog\char`\"{}}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21124}
\hypertarget{md_sfcode_node_modules_postcss_import_README_autotoc_md21125}{}\doxysection{\mbox{[}\+License\mbox{]}(\+LICENSE)}\label{md_sfcode_node_modules_postcss_import_README_autotoc_md21125}
