Purgecss plugin for webpack
License: MIT License
The contents of this repository were moved into the PurgeCSS repository. The source code can be found in packages/purgecss-webpack-plugin.
npm i -D purgecss-webpack-plugin
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
config
...
new PurgecssPlugin({
paths: glob.sync(`${root}/**/*`, {
nodir: true,
}),
}),index.html
...
<body>
</body>index.css
.a {
color: red;
}
.box {
background: #666;
}
build
.a{color:red}.box{background:#666}It seems a bit frustrating. What's the right thing I do? Root is located in the SRC directory.
const plugins = [
new ExtractTextPlugin({filename: '[name].[contenthash].css', allChunks: true}),
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './../app.html'),
path.join(__dirname, './../**/*.vue')
])
})
];
const rules = [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
transformToRequire: {vector: 'src', img: 'src', image: 'xlink:href'},
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
}),
i18n: '@kazupon/vue-i18n-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/assets/sass/variables"',
scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/assets/sass/variables";'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true',
exclude: /node_modules/,
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
];
...
I have single file component with this style:
<style>
.asdasdas {
color: #f0f2fa;
}
.css-pseudoselect .item-pseudoselect {
padding-right: 25px;
}
.autocomplete .options .item:hover .blue,
.css-pseudoselect .options .item:hover .blue {
color: #256799;
}
.css-pseudoselect .options .item,
.options .item,
option {
white-space: normal;
line-height: 18px;
box-sizing: border-box;
padding: 5px 6px;
}
.options .item:hover,
option:hover {
background-color: #f0f2fa;
color: #414141;
}
.pseudoselect .options {
white-space: normal;
}
.pseudoselect .options label:before {
position: absolute;
left: 0;
top: 1px;
margin: 0;
}
.pseudoselect .options label {
position: relative;
display: inline-block;
padding-left: 25px;
}
@media (min-width: 769px) {
body .app-header .container-header,
.container-body > .container,
.container-main, .app-content,
.container-header {
z-index: unset !important;
position: relative !important;
}
.fixed-branding,
.fixed-branding a {
z-index: unset !important;
}
}
</style>
But purgecss doesn't cut class .asdasdas from styles files.
It seems the @types/tapable module is causing this package to fail on install. I'm not working on a Typescript project so I have no need for @types, but it seems the module is depending on it. Any ideas?
I don't see tapable anywhere https://npm.anvaka.com/#/view/2d/purgecss-webpack-plugin
skelly MINGW64 ~/Projects/purge-test (master)
$ node -v
v9.10.0
$ npm -v
5.6.0skelly MINGW64 ~/Projects/purge-test (master)
$ npm i purgecss-webpack-plugin -D
npm WARN rollback Rolling back @types/[email protected] failed (this is probably har mless): EPERM: operation not permitted, lstat 'C:\Users\skelly\Projects\purge-te st\node_modules\@types\tapable'
npm ERR! path C:\Users\skelly\Projects\purge-test\node_modules\@types
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall mkdir
npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Users\skelly\Projects\ purge-test\node_modules\@types'
npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Users\skelly\Projec ts\purge-test\node_modules\@types'
npm ERR! cause:
npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Users\skelly\Proj ects\purge-test\node_modules\@types'
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'mkdir',
npm ERR! path: 'C:\\Users\\skelly\\Projects\\purge-test\\node_modules\\@typ es' },
npm ERR! stack: 'Error: EPERM: operation not permitted, mkdir \'C:\\Users\\ske lly\\Projects\\purge-test\\node_modules\\@types\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'mkdir',
npm ERR! path: 'C:\\Users\\skelly\\Projects\\purge-test\\node_modules\\@types' ,
npm ERR! parent: 'purge-test' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\skelly\AppData\Roaming\npm-cache\_logs\2018-11-21T20_23_37 _312Z-debug.log
| Branch | Build failing 🚨 |
|---|---|
| Dependency | prettier |
| Current Version | 1.13.7 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Can we use this plugin with mini-css-extract-plugin ? If so, how to do it ?
This is perhaps more a question than an issue, but one shouldn't really purge bootstrap stylesheets right? Because if you use it with some bootstrap.js, than some classes will be injected that will have been purged from the style sheets. E.g. I purged mine and found out the navbar dropdown wasn't working anymore.
So what should one do in this situation? Whitelist a bunch of classes or nut purge bootstrap at all?
I solved the my issue by whitelisting the show class:
whitelistPatterns: [/show/]
Maybe one day we should do a check on which classes are being injected with bootstrap.js, and add an option to whitelist them. Because for me, most of my reduction comes from purging the bootstrap style sheets and perhaps for other too.
Hello, I try to install purgecss-webpack-plugin on my stack but I get the following error :
/Volumes/APPLE SD Card/Projets/beapi/beapi-frontend-framework/themes/beapi-frontend-framework/node_modules/purgecss-webpack-plugin/node_modules/purgecss/lib/purgecss.js:674
throw _iteratorError5;
^
Error: EISDIR: illegal operation on a directory, read
at Object.fs.readSync (fs.js:690:18)
at tryReadSync (fs.js:554:20)
at Object.fs.readFileSync (fs.js:597:19)
at Purgecss.extractFileSelector
You can reproduce the issue by cloning the repo : https://github.com/BeAPI/beapi-frontend-framework/tree/experiment/purgecss
$ npm install
$ npm run build:test
Version of purgecss-webpack-plugin : 1.2.0
Hello,
I got a problem with your plugin and Bootstrap table vuejs, the css is removed.
My conf
new PurgecssPlugin({
paths: glob.sync([
'./dist/index.html',
'./src/components/.vue',
'./src/views/.vue',
'./src/.vue',
'./src/!**/!.vue'
])
}),
My vue file
[...]
<b-table striped hover
:items="items"
:fields="fields"
:striped="false"
:outlined="true"
:tbody-class="'bg-table'">
</b-table>
[...]
When i build for production the css of the generated table is removed. I think it's because <table is not really in the code but generated by the component.
Do you have an idea to resolve this?
Thanks,
Alex
1.12.2 to 1.12.3.This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
2019-05-19
The new version differs by 5 commits.
455e994 1.12.3c72da4a Update changelog9f84980 Properly deduplicate reexported default exports (#2866)0655489 Update changelog65b6aef Enable TypeScript strictNullChecks (#2755)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
| Branch | Build failing 🚨 |
|---|---|
| Dependency | rollup-plugin-commonjs |
| Current Version | 9.1.4 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
rollup-plugin-commonjs is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 8 commits.
b5c719f 9.1.581bea94 Merge branch 'mister-what-master'b1cd440 Fix linting and slightly clean up codee709667 9.1.42dcfd2b Update changelog25d6af0 Make "from" a reserved word (#320)93f4ce4 input files as object - fixing and adding testsa5e5bcd allow input files to be an object (i.e. named entrypoints)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
In Webpack >= 3 this warning is thrown:
DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
In this case search.js's files method should use the Chunk.mapModules instead of Object.keys to get the same result.
First off, let me just say you guys rule! I was struggling with Purifycss for a while. Seems like its not getting the TLC it deserves. But then I found you guys. Purgecss to the rescue! The bundles it spits out are so tiny and it works with classes that end with numbers too! Bravo. But I digress...
Purgecss strips used class names in React w/JSX using template literals. Here's a repo that reproduces the issue.
| Thing | Version |
|---|---|
| Node | 9.2.0 |
| purgecss-webpack-plugin | 0.15.0 |
| webpack | 3.10.0 |
The issue is Purgecss will not detect some class names being used. It then strips those styles out of the produced bundle.
const Test = () => {
const bg = 'bg-blue';
/*
NOTE: Remove this comment before running the code.
Purgecss will pick up the word 'purple' in this comment and not reproduce the error.
----------------------------------------------------------------------------
The 'purple' class is clearly used here but Purgecss will strip it out.
The issue seems to be the combination of {` characters.
If you put a space before 'purple', Purgecss will detect it and leave it in.
*/
return (
<h1 className={`purple ${bg}`}>Hello world!</h1>
);
}Due to this line it's currently impossible to provide .css files to extract selectors from.
purgecss-webpack-plugin/src/index.js
Line 38 in 6a98150
I want to pass my hand-written css files to an extractor so that css never gets purged, I only want to purge unused vendor/framework css.
Would it be possible to allow css files in paths?
We deprecated https://github.com/webpack-contrib/purifycss-webpack plugin in favor your solution. You plugin works very good and very stable, thanks for good plugin, happy coding!
Guys!
TL;DR - purgecss-whitelister
Because purgecss is awesome, it only makes sense to build things around the ecosystem :)
So I was rebuilding my site in React and consuming my own 3rd party libraries. Did all the webpacky stuffs and life was good. But the library I was using had its styles stripped. Ok, the whitelist option to the rescue. Since my library only had a few styles, this wasn't that big a deal. But if I had a tooon of styles that I wanted whitelisted, this would've been a pain in the donkey. purgecss-whitelister to the rescue! Give it a string or array of strings or globby strings and it will generate an array of names based off the selectors used in that CSS file.
I just had to come tell you guys to see what you thought. Anyway, feel free to close this issue since its not an issue, but I just had to let somebody know! Love the work you guys are doing. My CSS bundles are now nano-sized thanks to you. 💯
and some conditional statements to make one version of purgecss-webpack-plugin work with both webpack v3 and v4 to make it easier to use
When I run the following code I get a "Not a function" error
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/app/js/**/*.vue')
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
});The console output is;
/project/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:148
return chunk.mapModules(function (module) {
^
TypeError: chunk.mapModules is not a function
at files (/Library/WebServer/Documents/project/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:148:18)
at /Library/WebServer/Documents/project/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:199:90
at Array.forEach (native)
at /Library/WebServer/Documents/project/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:195:39
at Array.forEach (native)
at Compilation.<anonymous> (/Library/WebServer/Documents/project/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:181:40)
at next (/Library/WebServer/Documents/project/node_modules/tapable/lib/Tapable.js:204:14)
at ExtractTextPlugin.<anonymous> (/Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/index.js:345:4)
at Compilation.applyPluginsAsyncSeries (/Library/WebServer/Documents/project/node_modules/tapable/lib/Tapable.js:206:13)
at sealPart2 (/Library/WebServer/Documents/project/node_modules/webpack/lib/Compilation.js:627:9)
at next (/Library/WebServer/Documents/project/node_modules/tapable/lib/Tapable.js:202:11)
at Compilation.compilation.plugin (/Library/WebServer/Documents/project/node_modules/webpack/lib/ProgressPlugin.js:109:6)
at next (/Library/WebServer/Documents/project/node_modules/tapable/lib/Tapable.js:204:14)
at ExtractTextPlugin.<anonymous> (/Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/index.js:317:5)
at /Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/async/dist/async.js:1050:13)
at /Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/async/dist/async.js:958:16
at /Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/index.js:301:6
at /Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/async/dist/async.js:1050:13)
at /Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/async/dist/async.js:958:16
at /Library/WebServer/Documents/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/index.js:291:9
at rebuilding.forEach.cb (/Library/WebServer/Documents/project/node_modules/webpack/lib/Compilation.js:500:29)
at Array.forEach (native)
at callback (/Library/WebServer/Documents/project/node_modules/webpack/lib/Compilation.js:500:15)
at processModuleDependencies (/Library/WebServer/Documents/project/node_modules/webpack/lib/Compilation.js:519:5)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
purgecss-webpack-plugin Version: 3.0.2
Webpack version: 3.10.0
4.35.3 to 4.36.0.This version is covered by your current version range and after updating it in your project the build failed.
webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
append option now supports the default placeholders in addition to [url]"..." when overriding options.The new version differs by 42 commits.
95d21bb 4.36.0aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-mergeb3ec775 improve merging of resolve and parsing options53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-ruleab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.20bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.037d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.00beeb7e Merge pull request #9391 from vankop/create-hash-typescriptbf1a24a #9391 resolve super call discussionbd7d95b #9391 resolve discussions, AbstractMethodError4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2There are 42 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
1.4.0 to 1.4.1.This version is covered by your current version range and after updating it in your project the build failed.
purgecss is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 16 commits.
ed6049b fix: update node version circleci config35463d8 fix eslint version09ba8a5 build v1.4.0518ada0 1.4.14845d5e Update npmpublish.yml7bb9a85 Merge pull request #228 from FullHuman/greenkeeper/flow-bin-0.110.03c850de Merge pull request #229 from AlexanderOpran/windows-config-path--fix08f2199 Replaced path.resolve with path.join in config loading.8d6a028 Fix the config file path of windows while still using path.resolve.66385f3 chore(package): update flow-bin to version 0.110.0a02058d Merge pull request #221 from FullHuman/greenkeeper/flow-bin-0.107.0d08ca7e Merge pull request #210 from n1kk/master16d0730 Merge remote-tracking branch 'upstream/master'a8f95ad chore(package): update flow-bin to version 0.107.00a0b921 Update CHANGELOG.mdThere are 16 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
am not sure if this is a bug or an issue with the extractor, so here is what i currently have
{
paths: () => glob.sync([
path.join(__dirname, 'resources/views/**/*'),
path.join(__dirname, 'resources/assets/js/**/*')
], {nodir: true}),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[\w-:/]+/g) || []
}
},
extensions: ['html', 'js', 'jsx', 'ts', 'tsx', 'php', 'vue']
}
],
whitelistPatterns: [/^mce/, /^choices/],
keyframes: true,
fontFace: true,
rejected: true
}<span class="tag is-delete"></span>// extracted
.tag:not(body) .delete {
...
}
// not extracted
.tag:not(body).is-delete {
...
}I suggest replacing extract-text-webpack-plugin with mini-css-extract-plugin
Describe the bug
I believe this plugin supports webpack 3 which I am using (webpack 3.12.0)
Whenever I install a new npm module, there are two warnings:
npm WARN [email protected] requires a peer of webpack@^4.11.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack-cli@^3.0.2 but none is installed. You must install peer dependencies yourself.
To Reproduce
Steps to reproduce the behavior:
Install any other npm module.
Expected behavior
Nothing
I'd like to provide defaults for purgecss-webpack-plugin and allow the users of my plugin to provide their own whitelist configuration. The docs indicate we could add these options in the purgecss.config.js file: https://www.purgecss.com/configuration#configuration-file
But, purgecss doesn't load configuration from this file if its passed an object: https://github.com/FullHuman/purgecss/blob/master/src/index.js#L41-L42
And purgecss-webpack-plugin passes an object to purgecss: https://github.com/FullHuman/purgecss-webpack-plugin/blob/master/src/index.js#L118
So that ignores the ability to load configuration from a file.
Maybe this is an issue of wanting my cake and eating it too, but it would be nice to be able to configure these options separate from the webpack configuration.
When trying to use purgecss-webpack-plugin in my app it extracts all the css for any 3rd party plugin loaded such as jqueryui or tinyMCE. The page specific css is fine. My webpack config is :
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, 'Views/**/*.cshtml'),
path.join(__dirname, 'src/app/**/*.js'),
path.join(__dirname, 'src/app/**.ts'),
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g) || []
}
},
extensions: ['cshtml', 'js', 'ts']
}
],
}),
I am using
webpack 4,
[email protected]
Any ideas?
Many thanks
Specifically I mean does it require you to generate a CSS file (vs using style-loader) and is it compatible with CSS Modules (without making you whitelist them all)?
First, thanks for creating and maintaining this project!
I'm using Webpack 3 and I installed this plugin as yarn add --dev purgecss-webpack-plugin ... which installed the Webpack 4 compatible plugin and resulted in a hard-to-debug issue (see symfony/webpack-encore#330). I know that your installation instructions show different commands for Webpack 3 and 4 ... but I missed that.
The people that helped me solve this problem wondered why this plugin declares Webpack as a dependency instead of a peer dependency so I created this issue to ask the same in case it helps this project.
Thanks!
| Branch | Build failing 🚨 |
|---|---|
| Dependency | rollup |
| Current Version | 0.63.4 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 11 commits.
dc9f347 0.63.56c1d1e6 Fix typings for turbo colore109576 Update changelog115239f Update changelogda97ea5 Add plugin implemenation type (#2355)55d90d8 fix regression #2305, ensure onwrite plugin hooks execute in sequence (#2364)fc1e6f7 Update changelogd07d5bf Always warn when no name is provided for a global module (#2359)489477d Update changelog9eaa1d9 Remove "es6" output format from types (#2349)382323a fix(types): inlineDynamicImports is optional (#2348)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/*`)
})
Not so much an issue, but what exactly does the paths option do in this plugin? paths is not a PurgeCSS option. It is a purgecss-webpack-plugin option but wasn't mentioned in the README. Some explanation would be great :)
Hello,
I would like to use PurgeCss in addition to css-chunks-html-webpack-plugin and extract-css-chunks-webpack-plugin.
Following the documentation, I ended up doing sometthing like :
`
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssChunkHashPlugin = require('../lib');
module.exports = {
plugins: [
new ExtractCssChunks(),
new CssChunkHashPlugin({ inject: true }),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.style}/*`),
}),
new HtmlWebpackPlugin({...entryFileOptions}),
]
};
`
Which obviously doesn't work - I believe it's to be expected as I can't provide a list of static entry points to the purge plugin. As you said earlier, it's always good to have examples and I would love someone to put me in the right direction for this.
Thanks for your time
I'm using the contenthash in the filenames to allow long term caching:
https://webpack.js.org/guides/caching/
Unfortunately if the content is changed by the PurgeCss plugin only, for example since I have removed a usage of an class or I'm using a class which hasn't been used before, the contenthash does not change. This leads to old files being served to the users and therefore a breaking app.
The content hash changes as soon as I do an actual modification of the CSS files. My guess would be that the contenthash is calculated to early?
webpack config:
const path = require('path');
const glob = require('glob-all')
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin'); //installed via npm
const PurgecssPlugin = require('purgecss-webpack-plugin');
const webpack = require('webpack');
// the path(s) that should be cleaned
let pathsToClean = [
'dist'
];
// the clean options to use
let cleanOptions = {
root: '..................../public',
verbose: true,
dry: false
};
function collectWhitelistPatterns() {
return [/^pcr-/];
}
module.exports = {
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new ManifestPlugin(),
new PurgecssPlugin({
paths: glob.sync(['./src-js/**/*', './templates/**/*'], { nodir: true }),
whitelistPatterns: collectWhitelistPatterns,
}),
new MiniCssExtractPlugin({
filename: "[name]-[contenthash].css",
chunkFilename: "[id]-[contenthash].css"
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
entry: {
one: './src-js/index-one.js',
two: './src-js/index-two.js',
three: './src-js/index-three.js',
},
output: {
path: path.resolve(__dirname, 'public/dist'),
filename: dev?'[name]-min.js':'[name]-[contenthash]-min.js',
publicPath: "/dist/"
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"targets": "> 0.25%, not dead",
}
]
],
"plugins": ["transform-remove-console"]
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
externals: {
jquery: 'jQuery'
},
};
| Branch | Build failing 🚨 |
|---|---|
| Dependency | webpack |
| Current Version | 4.16.2 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
require.ensures.The new version differs by 5 commits.
482ff20 4.16.36c60e9d Merge pull request #7798 from webpack/bugfix/empty-chunks-failaac4368 fix case where empty chunkgroups cause nested chunkgroups to vanisha28f44f Merge pull request #7770 from webpack/bump_jest20dc30e Update JestSee the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I am trying to follow the following tutorial: https://www.purgecss.com/guides/react with the bootstrap.css file.
I have create a fresh create-react-app, ejected the project and modified my webpack file to include the plugins but i'm seeing the following error when i npm run build "Cannot read property 'tap' of undefined".
I have tried nuking the whole repo, starting fresh and i end up with the same error.
Here's the only part of the webpack file i've changed for reference (apart from importing glob and purgecssplugin at the top).
plugins: [ PnpWebpackPlugin, new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), new MiniCssExtractPlugin({ filename: "[name].css", }), new PurgecssPlugin({ paths: glob.sync(``${paths.appSrc}/**/*``, { nodir: true }), }), ], },
The backticks in the code above are single, i dont know how to escape them.
Any help is appreciated. Thanks.
Hey guys,
Question about [attribute] selectors - are they intended to never be stripped from the final bundle? I noticed that they are always included.
My webpack config - nothing special, just good ol' vanilla purging:
new PurgecssPlugin({
keyframes: false, // https://goo.gl/bACbDW
styleExtensions: ['.css'],
paths: globAll.sync([
'./src/**/*.js',
'./src/**/*.jsx',
'./src/index.ejs'
], { absolute: true })
})I'm using my own scss library called Sassyons which out of the box contains an obnoxious amount of classes. Over 24,000 lines worth! Purgecss successfully strips that library down to only the handful of selectors that are actually used in my test project. So far, so good. Then I add these 2 styles to my top-level scss file to test things out:
.this-is-never-used {
display: none;
}
[this-is-never-used] {
display: block;
}The class is stripped out successfully and not included in the built asset but the attribute selector is included. I'm wondering if this is because attributes can be a pain since they can be regexy like [some-attr*] or [another-attr^=whatever].
Just want to know if this behavior is intended or not. I'm trying to revamp my Purgecss Whitelister plugin and don't know if I should be considering attribute selectors or not since they seem to be included by default. If they aren't supposed to be included by default (i.e. this is indeed a bug), what would be the correct way to whitelist them once this is ironed out? Should the whitelist array contain something like [attribute-name] or attribute-name? I appreciate your help in advance!
I am getting an error when setting more than one directory as a path using glob.sync.
new PurgecssPlugin({
paths: glob.sync(
"*.php",
"./templates/*.php",
"./templates/submit_templates/*.php"
)
})
TypeError: callback provided to sync glob
If I config with one of the paths only it works well.
new PurgecssPlugin({
paths: glob.sync("*.php")
})
I have seen a similar example here.
Hi,
Thank you for this package. Everything is working perfectly in development environment (without PurgeCSS). However, with this configuration, the plugin throws an error:
at Purgecss.extractSelectors (/Users/Diederik/Sites/3_CUSTOMERS/5_ONBOARD/node_modules/purgecss/lib/purgecss.js:713:43)
at Purgecss.extractFileSelector (/Users/Diederik/Sites/3_CUSTOMERS/5_ONBOARD/node_modules/purgecss/lib/purgecss.js:647:112)
at Purgecss.purge (/Users/Diederik/Sites/3_CUSTOMERS/5_ONBOARD/node_modules/purgecss/lib/purgecss.js:409:41)
at /Users/Diederik/Sites/3_CUSTOMERS/5_ONBOARD/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:262:79
at Array.forEach (<anonymous>)
at /Users/Diederik/Sites/3_CUSTOMERS/5_ONBOARD/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:231:23
at Array.forEach (<anonymous>)
[...]
Whenever I remove these lines, the build process succeeds, but too much CSS gets removed. Hence the implementation of the extractor class.
Any ideas?
I am using CleanWebpackPlugin which cleans my build folder from previous builds.
My build folder /build/client
output: {
path: path.resolve('./build/client')
}
plugins:
new CleanWebpackPlugin('./build/client/'),
new PurgecssPlugin({
paths: [...glob.sync(`${path.join(__dirname, './build/client/*')}/*`]
}),
The problem is PurgecssPlugin is trying to purgecss before webpack outputs the assets to build/client
Throws this error
build/client/* has been removed.
92% recordingnode_modules/purgecss/lib/purgecss.js:1
(function (exports, require, module, __filename, __dirname) { "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var fs=_interopDefault(require("fs")),glob=_interopDefault(require("glob")),postcss=_interopDefault(require("postcss")),selectorParser=_interopDefault(require("postcss-selector-parser"));function normalizeArray(e,t){for(var r=0,n=e.length-1;n>=0;n--){var o=e[n];"."===o?e.splice(n,1):".."===o?(e.splice(n,1),r++):r&&(e.splice(n,1),r--)}if(t)for(;r--;r)e.unshift("..");return e}var splitPathRe=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,splitPath=function(e){return splitPathRe.exec(e).slice(1)};function resolve(){for(var e="",t=!1,r=arguments.length-1;r>=-1&&!t;r--){var n=r>=0?arguments[r]:"/";if("string"!=typeof n)throw new TypeError("Arguments to path.resolve must be strings");n&&(e=n+"/"+e,t="/"===n.charAt(0))}return e=normalizeArray(filter(e.split("/"
Error: No content provided.
at e.value (node_modules/purgecss/lib/purgecss.js:1:5408)
at new e (node_modules/purgecss/lib/purgecss.js:1:4948)
at node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:203:44
at Array.forEach (<anonymous>)
I've been trying to implement the PurgeCSS webpack plugin while using sass-loader and postcss-loader. I've found the examples only for webpack V3:
https://github.com/FullHuman/purgecss-webpack-plugin/tree/master/examples/postcss-and-scss
https://github.com/webpack-contrib/extract-text-webpack-plugin
⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.
My suggested solution: Create an example configuration for webpack v4 with sass-loader and postcss-loader
1.25.2 to 1.26.0.This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
2019-10-27
The new version differs by 5 commits.
53fb6fe 1.26.01fad958 Update changelog1e1a111 Add support for "export * as name from …" (#3193)2f7e064 Remove the need to provide an output name for IIFE bundles (#3181)b4c8b43 [feat] Adds support for large assets (> 100 MB) (#3194)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
4.25.0 to 4.25.1.This version is covered by your current version range and after updating it in your project the build failed.
webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 6 commits.
2361995 4.25.1e2a2016 Merge pull request #8338 from webpack/bugfix/issue-8293babe736 replace prefix/postfix even when equal for wrapped contextdcd0d59 test for #8293af123a8 Merge pull request #8334 from webpack/bugfix/lint36eb0bb move azure specific commands to azure-pipelines.ymlSee the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
| Branch | Build failing 🚨 |
|---|---|
| Dependency | rollup-plugin-commonjs |
| Current Version | 9.1.3 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
rollup-plugin-commonjs is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Just in case this comment was missed:
#58 (comment)
this doesn't work (below 2 classes don't appear in the final css bundle):
const className = `no-underline bg-blue-lighter`this works (single quote):
const className = 'no-underline bg-blue-lighter'My config:
const path = require('path');
const glob = require('glob');
const PurgecssPlugin = require('purgecss-webpack-plugin');
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:/]+/g) || [];
}
}
new PurgecssPlugin({
// files to scan for class names.
paths: glob.sync(path.join(__dirname, './src/**/*.js')),
extractors: [
{
extractor: TailwindExtractor,
extensions: ['js', 'jsx'],
},
],
whitelist: ['html', 'body'],
whitelistPatterns: [],
});6.5.1 to 6.6.0.This version is covered by your current version range and after updating it in your project the build failed.
eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
39dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12280) (Scott O'Hara)4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477) (Milos Djermanovic)c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480) (Milos Djermanovic)0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347) (Milos Djermanovic)c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379) (Milos Djermanovic)364877b Update: measure plugin loading time and output in debug message (#12395) (Victor Homyakov)1744fab Fix: operator-assignment removes and duplicates comments (#12485) (Milos Djermanovic)52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483) (Milos Djermanovic)0f6d0dc Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468) (Toru Nagashima)923a8cb Chore: Fix lint failure in JSDoc comment (#12489) (Brandon Mills)aac3be4 Update: Add ignored prop regex no-param-reassign (#11275) (Luke Bennett)e5382d6 Chore: Remove unused parameter in dot-location (#12464) (Milos Djermanovic)49faefb Fix: no-obj-calls false positive (fixes #12437) (#12467) (Toru Nagashima)b3dbd96 Fix: problematic installation issue (fixes #11018) (#12309) (Toru Nagashima)cd7c29b Sponsors: Sync README with website (ESLint Jenkins)8233873 Docs: Add note about Node.js requiring SSL support (fixes #11413) (#12475) (Nicholas C. Zakas)89e8aaf Fix: improve report location for no-tabs (#12471) (Milos Djermanovic)7dffe48 Update: Enable function string option in comma-dangle (fixes #12058) (#12462) (YeonJuan)e15e1f9 Docs: fix doc for no-unneeded-ternary rule (fixes #12098) (#12410) (Sam Rae)b1dc58f Sponsors: Sync README with website (ESLint Jenkins)61749c9 Chore: Provide debug log for parser errors (#12474) (Brad Zacher)7c8bbe0 Update: enforceForOrderingRelations no-unsafe-negation (fixes #12163) (#12414) (Sam Rae)349ed67 Update: improve report location for no-mixed-operators (#12328) (Chiawen Chen)a102eaa Fix: prefer-numeric-literals invalid autofix with adjacent tokens (#12387) (Milos Djermanovic)6e7c18d Update: enforceForNewInMemberExpressions no-extra-parens (fixes #12428) (#12436) (Milos Djermanovic)51fbbd7 Fix: array-bracket-newline consistent error with comments (fixes #12416) (#12441) (Milos Djermanovic)e657d4c Fix: report full dot location in dot-location (#12452) (Milos Djermanovic)2d6e345 Update: make isSpaceBetweenTokens() ignore newline in comments (#12407) (YeonJuan)84f71de Update: remove default overrides in keyword-spacing (fixes #12369) (#12411) (YeonJuan)18a0b0e Update: improve report location for no-space-in-parens (#12364) (Chiawen Chen)d61c8a5 Update: improve report location for no-multi-spaces (#12329) (Chiawen Chen)561093f Upgrade: bump inquirer to ^7.0.0 (#12440) (Joe Graham)fb633b2 Chore: Add a script for testing with more control (#12444) (Eric Wang)012ec51 Sponsors: Sync README with website (ESLint Jenkins)874fe16 New: pass cwd from cli engine (#12389) (Eric Wang)b962775 Update: no-self-assign should detect member expression with this (#12279) (Tibor Blenessy)02977f2 Docs: Clarify eslint:recommended semver policy (#12429) (Kevin Partington)97045ae Docs: Fixes object type for rules in "Use a Plugin" (#12409) (Daisy Develops)24ca088 Docs: Fix typo in v6 migration guide (#12412) (Benjamim Sonntag)b094008 Chore: update version parameter name (#12402) (Toru Nagashima)e5637ba Chore: enable jsdoc/require-description (#12365) (Kai Cataldo)d31f337 Sponsors: Sync README with website (ESLint Jenkins)7ffb22f Chore: Clean up inline directive parsing (#12375) (Jordan Eldredge)84467c0 Docs: fix wrong max-depth example (fixes #11991) (#12358) (Gabriel R Sezefredo)3642342 Docs: Fix minor formatting/grammar errors (#12371) (cherryblossom000)c47fa0d Docs: Fix missing word in sentence (#12361) (Dan Boulet)8108f49 Chore: enable additional eslint-plugin-jsdoc rules (#12336) (Kai Cataldo)b718d2e Chore: update issue template with --eslint-fix flag (#12352) (James George)20ba14d Sponsors: Sync README with website (ESLint Jenkins)566a947 Sponsors: Sync README with website (ESLint Jenkins)070cbd0 Sponsors: Sync README with website (ESLint Jenkins)The new version differs by 53 commits.
879c373 6.6.0c8ba30a Build: changelog update for 6.6.039dfe08 Update: false positives in function-call-argument-newline (fixes #12123) (#12280)4d84210 Update: improve report location for no-trailing-spaces (fixes #12315) (#12477)c6a7745 Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480)0bffe95 Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347)c6a9a3b Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379)364877b Update: measure plugin loading time and output in debug message (#12395)1744fab Fix: operator-assignment removes and duplicates comments (#12485)52ca11a Fix: operator-assignment invalid autofix with adjacent tokens (#12483)0f6d0dc Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468)923a8cb Chore: Fix lint failure in JSDoc comment (#12489)aac3be4 Update: Add ignored prop regex no-param-reassign (#11275)e5382d6 Chore: Remove unused parameter in dot-location (#12464)49faefb Fix: no-obj-calls false positive (fixes #12437) (#12467)There are 53 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hello,
I get the following error when I run npm run watch:
(node:28608) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead 91% additional asset processing unnamed compat pluginC:\Users\Gebruiker\desktop\poll\node_modules\purgecss\lib\purgecss.js:1
(function (exports, require, module, __filename, __dirname) { "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var fs=_interopDefault(require("fs")),glob=_interopDefault(require("glob")),postcss=_interopDefault(require("postcss")),selectorParser=_interopDefault(require("postcss-selector-parser"));function normalizeArray(e,t){for(var r=0,n=e.length-1;n>=0;n--){var o=e[n];"."===o?e.splice(n,1):".."===o?(e.splice(n,1),r++):r&&(e.splice(n,1),r--)}if(t)for(;r--;r)e.unshift("..");return e}var splitPathRe=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,splitPath=function(e){return splitPathRe.exec(e).slice(1)};function resolve(){for(var e="",t=!1,r=arguments.length-1;r>=-1&&!t;r--){var n=r>=0?arguments[r]:"/";if("string"!=typeof n)throw new TypeError("Arguments to path.resolve must be strings");n&&(e=n+"/"+e,t="/"===n.charAt(0))}return e=normalizeArray(filter(e.split("/"),function
I'm using webpack 4.2, and purgecss-webpack-plugin 0.21.0.
Hey there,
I'm using this plugin with Tailwind + VueJS. In regards to both of those, it works flawlessly with the custom extractor.
However, I recently decided to start using Animate.css in my project, so I imported it in my main.js like so;
import {} from 'animate.css';
(Installed using NPM)
I'm only using 2-3 of the animations in the entire library, so I wanted to lean it down a bit so there wouldn't be pointless code in my app. However, it would appear purgecss isn't "detecting" it for some reason.
Here you can see below how I use these animation classes inside my VueJS templates;
<transition
enter-active-class="animated fadeIn custom-fast"
leave-active-class="animated fadeOut custom-fast"
mode="out-in">
<router-view></router-view>
</transition>
and here is relevant parts of my vue.config.js file;
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
};
configureWebpack: {
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './public/index.html'),
path.join(__dirname, './src/**/*.vue'),
path.join(__dirname, './src/**/*.js'),
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ['html', 'js', 'vue'],
},
],
}),
],
},
Any idea why this might be happening?
Let me know if more information is needed!
version: 1.3.1
Behavior:
The PurgeCSS plugin 'minifies' img[src=''] to img[src] for whatever reason. This breaks functionality, as the latter matches every img element with a src attribute. The first one only empty ones.
Expected:
img[src=''] stays the way it is.
However, this only happens, when the CSS is minified beforehand (with csso/clean-css/cssnano) (if I remove the minifier, this issue is gone, however if I only turn on the minifier without PurgeCSS, the issue is gone too - so PurgeCSS is faulty)
I'm trying to reduce the CSS size as much a possible.
Unfortunately the plugin removes too much CSS. Therefore I'd like to see what got removed to add some of it to the whitelist.
I've seen purgecss offers an option called rejected which seems to do exactly this. After some debugging I noticed that the option gets piped through by the webpack plugin but the plugin doesn't reveal the response of purgecss but only cares about the extracted CSS.
What do you think about adding proper support of the rejected option to the webpack plugin?
Version: 1.4.0
Platform: MacOS 10.13.6
Note: Please notice the difference between "purecss" and "purgecss" as it looks similar.
npm install purecss --save
export default (text = 'Hello world') => {
const element = document.createElement('div');
element.className = 'pure-button';
element.innerHTML = text;
return element;
};
import 'purecss';
import './main.scss';
import component from './component';
document.body.appendChild(component());
Below you could see the html style that is removed by Purgecss.
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
Because html style is removed, the font will look different after purging.
Hi,
do you have a solution to embed the purgecss result to a nuxt-ssr-app, inlined?
Your plugin only works when I set this nuxt build option to:
extractCSS: true
when I set this option to 'false' then nuxt will build the whole css to my production app and not the purgecss result.
You find the build snippet here:
github.com/ms-webdev/nuxt-express-quick-start
I hope you can help me
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.