What does a postprocessor do at build time?
A postprocessor at build time takes CSS code that already exists (written by hand or generated by a preprocessor) and automatically modifies it before it ships to production. Specifically, it performs one or several tasks depending on which plugins are connected.
What exactly a postprocessor does at build time
1. Adds cross-browser prefixes
To make CSS work correctly in older browsers, it adds -webkit-, -moz-, -o- wherever caniuse data says they are needed.
2. Optimizes and cleans up CSS
- shortens property notation
- removes unused code (if PurgeCSS is connected)
- groups repeating rules
3. Minifies the final file
- removes whitespace and line breaks
- compresses the CSS
- reduces the overall size for faster loading
4. Converts modern CSS into something older browsers understand
For example, it lets you use future specifications (via postcss-preset-env), turning them into compatible code.
5. Automates routine tasks Depending on the plugins: sorting properties, merging media queries, generating fallback values and so on.
Final purpose
A postprocessor makes CSS ready for production: it makes the code cross-browser, compact, logical and fast to load.
Put in one line:
A preprocessor makes writing CSS simpler, while a postprocessor brings it to an ideal state before publishing.
Shall we continue?
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.