Menü
PostCSS plugins reference - essential plugins, configuration, and optimization strategies
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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.
| 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.