

Post\+CSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support~variables~and~mixins, transpile~future~CSS~syntax, inline~images, and~more.

Post\+CSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and Jet\+Brains. The~\href{https://github.com/postcss/autoprefixer}{\texttt{ Autoprefixer}}~Post\+CSS plugin~is~one~of~the~most popular CSS processors.

Post\+CSS takes a CSS file and provides an API to analyze and modify its rules (by~transforming~them~into~an~\href{https://en.wikipedia.org/wiki/Abstract_syntax_tree}{\texttt{ Abstract~Syntax~Tree}}). This API can then be used by \href{https://github.com/postcss/postcss\#plugins}{\texttt{ plugins}} to~do a~lot of~useful~things, e.\+g.~to~find errors automatically insert vendor prefixes.

{\bfseries{Support / Discussion\+:}} \href{https://gitter.im/postcss/postcss}{\texttt{ Gitter}}~\newline
 {\bfseries{Twitter account\+:}} \href{https://twitter.com/postcss}{\texttt{ @postcss}}~\newline
 {\bfseries{VK.\+com page\+:}} \href{https://vk.com/postcss}{\texttt{ postcss}}~\newline
 {\bfseries{中文翻译}}\+: \`{}\+README-\/cn.md\`{}

For Post\+CSS commercial support (consulting, improving the front-\/end culture of your company, Post\+CSS plugins), contact~\href{https://evilmartians.com/?utm_source=postcss}{\texttt{ Evil~Martians}} at \href{mailto:surrender@evilmartians.com}{\texttt{ surrender@evilmartians.\+com}}.

\href{https://evilmartians.com/?utm_source=postcss}{\texttt{  }}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24693}{}\doxysection{Plugins}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24693}
Currently, Post\+CSS has more than 200 plugins. You~can find all of the plugins in the \href{https://github.com/postcss/postcss/blob/master/docs/plugins.md}{\texttt{ plugins list}} or in the \href{http://postcss.parts}{\texttt{ searchable catalog}}. Below is a list of our favorite plugins — the best demonstrations of what can be built on top of Post\+CSS.

If you have any new ideas, \href{https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md}{\texttt{ Post\+CSS plugin development}} is really easy.\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24694}{}\doxysubsection{Solve Global CSS Problem}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24694}

\begin{DoxyItemize}
\item \href{https://github.com/postcss/postcss-use}{\texttt{ {\ttfamily postcss-\/use}}} allows you to explicitly set Post\+CSS plugins within CSS and execute them only for the current file.
\item \href{https://github.com/outpunk/postcss-modules}{\texttt{ {\ttfamily postcss-\/modules}}} and \href{https://github.com/gajus/react-css-modules}{\texttt{ {\ttfamily react-\/css-\/modules}}} automatically isolate selectors within components.
\item \href{https://github.com/maximkoretskiy/postcss-autoreset}{\texttt{ {\ttfamily postcss-\/autoreset}}} is an alternative to using a global reset that is better for isolatable components.
\item \href{https://github.com/maximkoretskiy/postcss-initial}{\texttt{ {\ttfamily postcss-\/initial}}} adds {\ttfamily all\+: initial} support, which resets all inherited styles.
\item \href{https://github.com/ausi/cq-prolyfill}{\texttt{ {\ttfamily cq-\/prolyfill}}} adds container query support, allowing styles that respond to the width of the parent.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24695}{}\doxysubsection{Use Future CSS, Today}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24695}

\begin{DoxyItemize}
\item \href{https://github.com/postcss/autoprefixer}{\texttt{ {\ttfamily autoprefixer}}} adds vendor prefixes, using data from Can I Use.
\item \href{https://github.com/jonathantneal/postcss-preset-env}{\texttt{ {\ttfamily postcss-\/preset-\/env}}} allows you to use future CSS features today.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24696}{}\doxysubsection{Better CSS Readability}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24696}

\begin{DoxyItemize}
\item \href{https://github.com/jonathantneal/precss}{\texttt{ {\ttfamily precss}}} contains plugins for Sass-\/like features, like variables, nesting, and mixins.
\item \href{https://github.com/hudochenkov/postcss-sorting}{\texttt{ {\ttfamily postcss-\/sorting}}} sorts the content of rules and at-\/rules.
\item \href{https://github.com/ismamz/postcss-utilities}{\texttt{ {\ttfamily postcss-\/utilities}}} includes the most commonly used shortcuts and helpers.
\item \href{https://github.com/jonathantneal/postcss-short}{\texttt{ {\ttfamily short}}} adds and extends numerous shorthand properties.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24697}{}\doxysubsection{Images and Fonts}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24697}

\begin{DoxyItemize}
\item \href{https://github.com/assetsjs/postcss-assets}{\texttt{ {\ttfamily postcss-\/assets}}} inserts image dimensions and inlines files.
\item \href{https://github.com/2createStudio/postcss-sprites}{\texttt{ {\ttfamily postcss-\/sprites}}} generates image sprites.
\item \href{https://github.com/jonathantneal/postcss-font-magician}{\texttt{ {\ttfamily font-\/magician}}} generates all the {\ttfamily @font-\/face} rules needed in CSS.
\item \href{https://github.com/TrySound/postcss-inline-svg}{\texttt{ {\ttfamily postcss-\/inline-\/svg}}} allows you to inline SVG and customize its styles.
\item \href{https://github.com/jonathantneal/postcss-write-svg}{\texttt{ {\ttfamily postcss-\/write-\/svg}}} allows you to write simple SVG directly in your CSS.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24698}{}\doxysubsection{Linters}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24698}

\begin{DoxyItemize}
\item \href{https://github.com/stylelint/stylelint}{\texttt{ {\ttfamily stylelint}}} is a modular stylesheet linter.
\item \href{https://github.com/morishitter/stylefmt}{\texttt{ {\ttfamily stylefmt}}} is a tool that automatically formats CSS according {\ttfamily stylelint} rules.
\item \href{https://github.com/anandthakker/doiuse}{\texttt{ {\ttfamily doiuse}}} lints CSS for browser support, using data from Can I Use.
\item \href{https://github.com/SlexAxton/css-colorguard}{\texttt{ {\ttfamily colorguard}}} helps you maintain a consistent color palette.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24699}{}\doxysubsection{Other}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24699}

\begin{DoxyItemize}
\item \href{https://github.com/vkalinichev/postcss-rtl}{\texttt{ {\ttfamily postcss-\/rtl}}} combines both-\/directional (left-\/to-\/right and right-\/to-\/left) styles in one CSS file.
\item \href{http://cssnano.co}{\texttt{ {\ttfamily cssnano}}} is a modular CSS minifier.
\item \href{https://github.com/peterramsing/lost}{\texttt{ {\ttfamily lost}}} is a feature-\/rich {\ttfamily calc()} grid system.
\item \href{https://github.com/MohammadYounes/rtlcss}{\texttt{ {\ttfamily rtlcss}}} mirrors styles for right-\/to-\/left locales.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24700}{}\doxysection{Syntaxes}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24700}
Post\+CSS can transform styles in any syntax, not just CSS. If there is not yet support for your favorite syntax, you~can~write~a~parser and/or stringifier to extend Post\+CSS.


\begin{DoxyItemize}
\item \href{https://github.com/postcss/sugarss}{\texttt{ {\ttfamily sugarss}}} is a indent-\/based syntax like Sass or Stylus.
\item \href{https://github.com/gucong3000/postcss-syntax}{\texttt{ {\ttfamily postcss-\/syntax}}} switch syntax automatically by file extensions.
\item \href{https://github.com/gucong3000/postcss-html}{\texttt{ {\ttfamily postcss-\/html}}} parsing styles in {\ttfamily $<$style$>$} tags of HTML-\/like files.
\item \href{https://github.com/gucong3000/postcss-markdown}{\texttt{ {\ttfamily postcss-\/markdown}}} parsing styles in code blocks of Markdown files.
\item \href{https://github.com/gucong3000/postcss-jsx}{\texttt{ {\ttfamily postcss-\/jsx}}} parsing CSS in template / object literals of source files.
\item \href{https://github.com/gucong3000/postcss-styled}{\texttt{ {\ttfamily postcss-\/styled}}} parsing CSS in template literals of source files.
\item \href{https://github.com/postcss/postcss-scss}{\texttt{ {\ttfamily postcss-\/scss}}} allows you to work with SCSS $\ast$(but does not compile SCSS to CSS)$\ast$.
\item \href{https://github.com/AleshaOleg/postcss-sass}{\texttt{ {\ttfamily postcss-\/sass}}} allows you to work with Sass $\ast$(but does not compile Sass to CSS)$\ast$.
\item \href{https://github.com/webschik/postcss-less}{\texttt{ {\ttfamily postcss-\/less}}} allows you to work with Less $\ast$(but does not compile LESS to CSS)$\ast$.
\item \href{https://github.com/Crunch/postcss-less}{\texttt{ {\ttfamily postcss-\/less-\/engine}}} allows you to work with Less $\ast$(and DOES compile LESS to CSS using true Less.\+js evaluation)$\ast$.
\item \href{https://github.com/postcss/postcss-js}{\texttt{ {\ttfamily postcss-\/js}}} allows you to write styles in JS or transform React Inline Styles, Radium or JSS.
\item \href{https://github.com/postcss/postcss-safe-parser}{\texttt{ {\ttfamily postcss-\/safe-\/parser}}} finds and fixes CSS syntax errors.
\item \href{https://github.com/ben-eb/midas}{\texttt{ {\ttfamily midas}}} converts a CSS string to highlighted HTML.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24701}{}\doxysection{Articles}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24701}

\begin{DoxyItemize}
\item \href{http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong}{\texttt{ Some things you may think about Post\+CSS… and you might be wrong}}
\item \href{http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss}{\texttt{ What Post\+CSS Really Is; What It Really Does}}
\item \href{http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889}{\texttt{ Post\+CSS Guides}}
\end{DoxyItemize}

More articles and videos you can find on \href{https://github.com/jjaderg/awesome-postcss}{\texttt{ awesome-\/postcss}} list.\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24702}{}\doxysection{Books}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24702}

\begin{DoxyItemize}
\item \href{https://www.packtpub.com/web-development/mastering-postcss-web-design}{\texttt{ Mastering Post\+CSS for Web Design}} by Alex Libby, Packt. (June 2016)
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24703}{}\doxysection{Usage}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24703}
You can start using Post\+CSS in just two steps\+:


\begin{DoxyEnumerate}
\item Find and add Post\+CSS extensions for your build tool.
\item \href{http://postcss.parts}{\texttt{ Select plugins}} and add them to your Post\+CSS process.
\end{DoxyEnumerate}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24704}{}\doxysubsection{CSS-\/in-\/\+JS}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24704}
The best way to use Post\+CSS with CSS-\/in-\/\+JS is \href{https://github.com/4Catalyzer/astroturf}{\texttt{ {\ttfamily astroturf}}}. Add its loader to your {\ttfamily webpack.\+config.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: ['style-\/loader', 'postcss-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).jsx?\$/,}
\DoxyCodeLine{        use: ['babel-\/loader', 'astroturf/loader'],}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Then create {\ttfamily postcss.\+config.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    require('autoprefixer'),}
\DoxyCodeLine{    require('postcss-\/nested')}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24705}{}\doxysubsection{Parcel}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24705}
\href{https://parceljs.org}{\texttt{ Parcel}} has built-\/in Post\+CSS support. It already uses Autoprefixer and cssnano. If you want to change plugins, create {\ttfamily postcss.\+config.\+js} in project’s root\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    require('autoprefixer'),}
\DoxyCodeLine{    require('postcss-\/nested')}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


Parcel will even automatically install these plugins for you.

\begin{quote}
Please, be aware of \href{https://github.com/parcel-bundler/parcel/labels/CSS\%20Preprocessing}{\texttt{ the several issues in Version 1}}. Notice, \href{https://github.com/parcel-bundler/parcel/projects/5}{\texttt{ Version 2}} may resolve the issues via \href{https://github.com/parcel-bundler/parcel/issues/2157}{\texttt{ issue \#2157}}. \end{quote}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24706}{}\doxysubsection{Webpack}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24706}
Use \href{https://github.com/postcss/postcss-loader}{\texttt{ {\ttfamily postcss-\/loader}}} in {\ttfamily webpack.\+config.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        exclude: /node\_modules/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              importLoaders: 1,}
\DoxyCodeLine{            \}}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'postcss-\/loader'}
\DoxyCodeLine{          \}}
\DoxyCodeLine{        ]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Then create {\ttfamily postcss.\+config.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    require('precss'),}
\DoxyCodeLine{    require('autoprefixer')}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24707}{}\doxysubsection{Gulp}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24707}
Use \href{https://github.com/postcss/gulp-postcss}{\texttt{ {\ttfamily gulp-\/postcss}}} and \href{https://github.com/floridoo/gulp-sourcemaps}{\texttt{ {\ttfamily gulp-\/sourcemaps}}}.


\begin{DoxyCode}{0}
\DoxyCodeLine{gulp.task('css', () => \{}
\DoxyCodeLine{  const postcss    = require('gulp-\/postcss')}
\DoxyCodeLine{  const sourcemaps = require('gulp-\/sourcemaps')}
\DoxyCodeLine{}
\DoxyCodeLine{  return gulp.src('src/**/*.css')}
\DoxyCodeLine{    .pipe( sourcemaps.init() )}
\DoxyCodeLine{    .pipe( postcss([ require('precss'), require('autoprefixer') ]) )}
\DoxyCodeLine{    .pipe( sourcemaps.write('.') )}
\DoxyCodeLine{    .pipe( gulp.dest('build/') )}
\DoxyCodeLine{\}) }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24708}{}\doxysubsection{npm run / CLI}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24708}
To use Post\+CSS from your command-\/line interface or with npm scripts there is \href{https://github.com/postcss/postcss-cli}{\texttt{ {\ttfamily postcss-\/cli}}}.


\begin{DoxyCode}{0}
\DoxyCodeLine{postcss -\/-\/use autoprefixer -\/c options.json -\/o main.css css/*.css }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24709}{}\doxysubsection{Browser}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24709}
If you want to compile CSS string in browser (for instance, in live edit tools like Code\+Pen), just use \href{http://browserify.org/}{\texttt{ Browserify}} or \href{https://webpack.github.io/}{\texttt{ webpack}}. They will pack Post\+CSS and plugins files into a single file.

To apply Post\+CSS plugins to React Inline Styles, JSS, Radium and other \href{https://github.com/MicheleBertoli/css-in-js}{\texttt{ CSS-\/in-\/\+JS}}, you can use \href{https://github.com/postcss/postcss-js}{\texttt{ {\ttfamily postcss-\/js}}} and~transforms style objects.


\begin{DoxyCode}{0}
\DoxyCodeLine{var postcss  = require('postcss-\/js')}
\DoxyCodeLine{var prefixer = postcss.sync([ require('autoprefixer') ])}
\DoxyCodeLine{}
\DoxyCodeLine{prefixer(\{ display: 'flex' \}) //=> \{ display: ['-\/webkit-\/box', '-\/webkit-\/flex', '-\/ms-\/flexbox', 'flex'] \} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24710}{}\doxysubsection{Runners}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24710}

\begin{DoxyItemize}
\item {\bfseries{Grunt}}\+: \href{https://github.com/nDmitry/grunt-postcss}{\texttt{ {\ttfamily grunt-\/postcss}}}
\item {\bfseries{HTML}}\+: \href{https://github.com/posthtml/posthtml-postcss}{\texttt{ {\ttfamily posthtml-\/postcss}}}
\item {\bfseries{Stylus}}\+: \href{https://github.com/seaneking/poststylus}{\texttt{ {\ttfamily poststylus}}}
\item {\bfseries{Rollup}}\+: \href{https://github.com/egoist/rollup-plugin-postcss}{\texttt{ {\ttfamily rollup-\/plugin-\/postcss}}}
\item {\bfseries{Brunch}}\+: \href{https://github.com/brunch/postcss-brunch}{\texttt{ {\ttfamily postcss-\/brunch}}}
\item {\bfseries{Broccoli}}\+: \href{https://github.com/jeffjewiss/broccoli-postcss}{\texttt{ {\ttfamily broccoli-\/postcss}}}
\item {\bfseries{Meteor}}\+: \href{https://atmospherejs.com/juliancwirko/postcss}{\texttt{ {\ttfamily postcss}}}
\item {\bfseries{ENB}}\+: \href{https://github.com/awinogradov/enb-postcss}{\texttt{ {\ttfamily enb-\/postcss}}}
\item {\bfseries{Taskr}}\+: \href{https://github.com/lukeed/taskr/tree/master/packages/postcss}{\texttt{ {\ttfamily taskr-\/postcss}}}
\item {\bfseries{Start}}\+: \href{https://github.com/start-runner/postcss}{\texttt{ {\ttfamily start-\/postcss}}}
\item {\bfseries{Connect/\+Express}}\+: \href{https://github.com/jedmao/postcss-middleware}{\texttt{ {\ttfamily postcss-\/middleware}}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24711}{}\doxysubsection{JS API}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24711}
For other environments, you can use the JS API\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const autoprefixer = require('autoprefixer')}
\DoxyCodeLine{const postcss = require('postcss')}
\DoxyCodeLine{const precss = require('precss')}
\DoxyCodeLine{const fs = require('fs')}
\DoxyCodeLine{}
\DoxyCodeLine{fs.readFile('src/app.css', (err, css) => \{}
\DoxyCodeLine{  postcss([precss, autoprefixer])}
\DoxyCodeLine{    .process(css, \{ from: 'src/app.css', to: 'dest/app.css' \})}
\DoxyCodeLine{    .then(result => \{}
\DoxyCodeLine{      fs.writeFile('dest/app.css', result.css, () => true)}
\DoxyCodeLine{      if ( result.map ) \{}
\DoxyCodeLine{        fs.writeFile('dest/app.css.map', result.map, () => true)}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    \})}
\DoxyCodeLine{\}) }

\end{DoxyCode}


Read the \href{http://api.postcss.org/postcss.html}{\texttt{ Post\+CSS API documentation}} for more details about the JS API.

All Post\+CSS runners should pass \href{https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md}{\texttt{ Post\+CSS Runner Guidelines}}.\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24712}{}\doxysubsection{Options}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24712}
Most Post\+CSS runners accept two parameters\+:


\begin{DoxyItemize}
\item An array of plugins.
\item An object of options.
\end{DoxyItemize}

Common options\+:


\begin{DoxyItemize}
\item {\ttfamily syntax}\+: an object providing a syntax parser and a stringifier.
\item {\ttfamily parser}\+: a special syntax parser (for example, \href{https://github.com/postcss/postcss-scss}{\texttt{ SCSS}}).
\item {\ttfamily stringifier}\+: a special syntax output generator (for example, \href{https://github.com/ben-eb/midas}{\texttt{ Midas}}).
\item {\ttfamily map}\+: \href{https://github.com/postcss/postcss/blob/master/docs/source-maps.md}{\texttt{ source map options}}.
\item {\ttfamily from}\+: the input file name (most runners set it automatically).
\item {\ttfamily to}\+: the output file name (most runners set it automatically).
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24713}{}\doxysubsection{Treat Warnings as Errors}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24713}
In some situations it might be helpful to fail the build on any warning from Post\+CSS or one of its plugins. This guarantees that no warnings go unnoticed, and helps to avoid bugs. While there is no option to enable treating warnings as errors, it can easily be done by adding {\ttfamily postcss-\/fail-\/on-\/warn} plugin in the end of Post\+CSS plugins\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    require('autoprefixer'),}
\DoxyCodeLine{    require('postcss-\/fail-\/on-\/warn')}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24714}{}\doxysection{Editors \& IDE Integration}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24714}
\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24715}{}\doxysubsection{VS Code}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24715}

\begin{DoxyItemize}
\item \href{https://marketplace.visualstudio.com/items?itemName=csstools.postcss}{\texttt{ {\ttfamily csstools.\+postcss}}} adds support for Post\+CSS, {\ttfamily postcss-\/preset-\/env} and CSS Modules.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24716}{}\doxysubsection{Atom}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24716}

\begin{DoxyItemize}
\item \href{https://atom.io/packages/language-postcss}{\texttt{ {\ttfamily language-\/postcss}}} adds Post\+CSS and \href{https://github.com/postcss/sugarss}{\texttt{ Sugar\+SS}} highlight.
\item \href{https://atom.io/packages/source-preview-postcss}{\texttt{ {\ttfamily source-\/preview-\/postcss}}} previews your output CSS in a separate, live pane.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24717}{}\doxysubsection{Sublime Text}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24717}

\begin{DoxyItemize}
\item \href{https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS}{\texttt{ {\ttfamily Syntax-\/highlighting-\/for-\/\+Post\+CSS}}} adds Post\+CSS highlight.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24718}{}\doxysubsection{Vim}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24718}

\begin{DoxyItemize}
\item \href{https://github.com/stephenway/postcss.vim}{\texttt{ {\ttfamily postcss.\+vim}}} adds Post\+CSS highlight.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24719}{}\doxysubsection{Web\+Storm}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24719}
Web\+Storm 2016.\+3 \href{https://blog.jetbrains.com/webstorm/2016/08/webstorm-2016-3-early-access-preview/}{\texttt{ has}} built-\/in Post\+CSS support.\hypertarget{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24720}{}\doxysection{Security Contact}\label{md_sfcode_node_modules_resolve_url_loader_node_modules_postcss_README_autotoc_md24720}
To report a security vulnerability, please use the \href{https://tidelift.com/security}{\texttt{ Tidelift security contact}}. Tidelift will coordinate the fix and disclosure. 