Menu
PostCSS plugins reference - essential plugins, configuration, and optimization strategies
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Angular Material components quick reference. Use when searching for Material component APIs, theming patterns, or CDK utilities.
Comprehensive patterns for BEM, OOCSS, SMACSS, ITCSS, and CUBE CSS with selection guides and implementation strategies
Comprehensive enterprise CSS architecture patterns for large-scale applications with design systems, governance, and team workflows
Comprehensive Leaflet patterns for custom markers, styled popups, controls, GeoJSON, clustering, and dark mode. Use when searching for Leaflet styling, marker customization, popup design, or interactive map features.
Comprehensive map styling patterns for Leaflet, Mapbox, and GIS visualizations. Use when searching for map theming, marker styling, popup designs, or choropleth patterns.
Comprehensive Mapbox GL JS patterns for custom styles, 3D visualization, animations, and data-driven maps. Use when searching for Mapbox styling, 3D buildings, heat maps, or advanced map visualizations.
Based on SOC occupation classification
| name | postcss-plugins-reference |
| description | PostCSS plugins reference - essential plugins, configuration, and optimization strategies |
| searchable | true |
| tags | ["postcss","build-tools","css-processing","autoprefixer","cssnano","purgecss"] |
Quick reference for essential PostCSS plugins, configuration patterns, and build optimization.
Transform modern CSS to browser-compatible CSS.
require('postcss-preset-env')({
stage: 2, // CSS features at stage 2+
features: {
'nesting-rules': true,
'custom-properties': true,
'custom-media-queries': true,
},
browsers: 'last 2 versions',
})
Add vendor prefixes automatically.
require('autoprefixer')({
grid: 'autoplace',
flexbox: 'no-2009',
overrideBrowserslist: ['> 1%', 'last 2 versions'],
})
Minify and optimize CSS.
require('cssnano')({
preset: ['advanced', {
discardComments: { removeAll: true },
reduceIdents: true,
zindex: false,
}],
})
Resolve @import statements.
require('postcss-import')({
path: ['src/styles', 'node_modules'],
})
Remove unused CSS.
require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.{html,ts,tsx,jsx}'],
safelist: [/^mat-/, /^cdk-/],
})
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-preset-env')({
stage: 2,
features: { 'nesting-rules': true },
}),
process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.{html,ts,tsx}'],
}),
process.env.NODE_ENV === 'production' && require('cssnano')({
preset: 'advanced',
}),
].filter(Boolean),
};
// vite.config.js
import postcssPresetEnv from 'postcss-preset-env';
export default {
css: {
postcss: {
plugins: [postcssPresetEnv({ stage: 2 })],
},
},
};
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
}
{
"architect": {
"build": {
"options": {
"postcssOptions": {
"config": "./postcss.config.js"
}
}
}
}
}
✅ DO:
❌ DON'T:
Use this reference for quick PostCSS configuration lookups.