@fullhuman/postcss-purgecss
Advanced tools
@fullhuman/postcss-purgecss is a PostCSS plugin that removes unused CSS. It helps to reduce the size of your CSS files by only including the styles that are actually used in your HTML files.
Basic Usage
This code demonstrates the basic usage of @fullhuman/postcss-purgecss. It configures the plugin to scan HTML files in the './src' directory and remove any unused CSS from the CSS files in the same directory.
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html'],
css: ['./src/**/*.css']
});
module.exports = {
plugins: [
purgecss
]
};Whitelist Specific Classes
This code demonstrates how to whitelist specific CSS classes that should not be removed, even if they are not found in the HTML files. The 'safelist' option is used to specify these classes.
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html'],
css: ['./src/**/*.css'],
safelist: ['whitelisted-class']
});
module.exports = {
plugins: [
purgecss
]
};Extracting Dynamic Classes
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html'],
css: ['./src/**/*.css'],
defaultExtractor: content => content.match(/[\purgecss is a standalone tool that can be used to remove unused CSS. It is similar to @fullhuman/postcss-purgecss but can be used outside of a PostCSS environment. It offers similar functionality but requires separate configuration.
uncss is another tool for removing unused CSS. It works by loading your HTML files and stylesheets, and then removing any CSS rules that are not used. It is similar to @fullhuman/postcss-purgecss but has a different approach to identifying unused CSS.
purify-css is a tool that removes unused CSS by analyzing your HTML and JavaScript files. It is similar to @fullhuman/postcss-purgecss but also considers JavaScript files when determining which CSS rules are used.
PostCSS plugin for PurgeCSS.
npm i -D @fullhuman/postcss-purgecss postcss
const purgecss = require('@fullhuman/postcss-purgecss')
postcss([
purgecss({
content: ['./src/**/*.html']
})
])
See PostCSS docs for examples for your environment.
All of the options of purgecss are available to use with the plugins. You will find below the main options available. For the complete list, go to the purgecss documentation website.
content (required or use contentFunction instead)Type: Array<string>
You can specify content that should be analyzed by Purgecss with an array of filenames or globs. The files can be HTML, Pug, Blade, etc.
contentFunction (as alternative to content)Type: (sourceInputFile: string) => Array<string>
The function receives the current source input file. With this you may provide a specific array of globs for each input. E.g. for an angular application only scan the components template counterpart for every component scss file:
purgecss({
contentFunction: (sourceInputFileName: string) => {
if (/component\.scss$/.test(sourceInputFileName))
return [sourceInputFileName.replace(/scss$/, 'html')]
else
return ['./src/**/*.html']
},
})
extractorsType: Array<Object>
Purgecss can be adapted to suit your needs. If you notice a lot of unused CSS is not being removed, you might want to use a custom extractor. More information about extractors here.
safelistYou can indicate which selectors are safe to leave in the final CSS. This can be accomplished with the option safelist.
Two forms are available for this option.
safelist: ['random', 'yep', 'button', /^nav-/]
In this form, safelist is an array that can take a string or a regex.
The complex form is:
safelist: {
standard: ['random', 'yep', 'button', /^nav-/],
deep: [],
greedy: [],
keyframes: [],
variables: []
}
blocklistBlocklist will block the CSS selectors from appearing in the final output CSS. The selectors will be removed even when they are seen as used by PurgeCSS.
blocklist: ['usedClass', /^nav-/]
Even if nav-links and usedClass are found by an extractor, they will be removed.
rejectedType: boolean
Default value: false
If true, purged selectors will be captured and rendered as PostCSS messages.
Use with a PostCSS reporter plugin like postcss-reporter
to print the purged selectors to the console as they are processed.
keyframesType: boolean
Default value: false
If you are using a CSS animation library such as animate.css, you can remove unused keyframes by setting the keyframes option to true.
fontFaceType: boolean
Default value: false
If there are any unused @font-face rules in your css, you can remove them by setting the fontFace option to true.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
postcss-purgecss use SemVer for versioning.
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
PostCSS plugin for PurgeCSS
The npm package @fullhuman/postcss-purgecss receives a total of 221,950 weekly downloads. As such, @fullhuman/postcss-purgecss popularity was classified as popular.
We found that @fullhuman/postcss-purgecss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.