From postcss
PostCSS plugins reference - essential plugins, configuration, and optimization strategies
How this skill is triggered — by the user, by Claude, or both
Slash command
/postcss:postcss-plugins-referenceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Quick reference for essential PostCSS plugins, configuration patterns, and build optimization.
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.
npx claudepluginhub ehssanatassi/ui-marketplace --plugin postcssGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.