fullhuman / purgecss Goto Github PK
View Code? Open in Web Editor NEWRemove unused CSS
Home Page: https://purgecss.com
License: MIT License
Remove unused CSS
Home Page: https://purgecss.com
License: MIT License
Hi. I am finding that purgecss is not outputting certain individual css keyframes if they have decimal places in the values - even if the css is actually in use. This is probably a bit of an edge case (I have a css looping feature that fades in/out forever, that uses sass for calculations, hence the decimal places).
A simple example would be:
@keyframes xxx {
0% {opacity: 0;}
99.9% {opacity: 1;}
}
is output by purgecss as follows (the 99.9% keyframe is missing):
@keyframes xxx {
0% {
opacity: 0; } }
BUT using integers is ok:
@keyframes yyy {
0% {opacity: 0;}
99% {opacity: 1;}
}
outputs as expected...
@keyframes yyy {
0% {
opacity: 0; }
99% {
opacity: 1; } }
I hope there is a way around this. I'm not sure why purgecss is processing these - I'm pretty certain that it's not another module that is doing this (I've spent a while narrowing it down). Any ideas please?
I can't seem to find a way to get purgecss to work with css selectors like [class*="section-"] or [title~="flower"].
Is there a method I'm overlooking or if not, is there a way to implement this?
The current whitelisting features are great, but I think the "CSS comment" one could be improved. Instead of just ignoring one selector/ruleset at a time, I think it should ignore everything between two comments, like this:
/* purgecss start ignore */
h1 {
color: blue;
}
h2 {
color: red;
}
/* purgecss end ignore */
It would make it much easier to ignore large parts of the CSS (even whole files) that you are 100% sure you want to keep even if PurgeCSS can't find the mentioned classes/elements in the markup, because they are added dynamically with JavaScript for instance.
I'm using 0.19.0
and my @keyframes
are being purged successfully (whoop - thanks for all the work on the keyframe refactoring!), but my vendor-prefixed keyframe rules (specifically @-webkit-keyframes
) are not being removed. Would it be possible to remove these too?
I'm using the postcss-loader
in Webpack, and its adding these prefixes for me. I was trying to work out if I could run purgecss
before postcss-loader
, but I couldn't figure out how to do it (I'm using the Vue webpack template).
const Purgecss = require('purgecss'); // 0.18.1
const fs = require('fs');
const css = '.a{color:#fff}.b{color:#000}.c{color:#123}';
fs.writeFileSync('a.css', css, err => console.log.bind(console));
const content = '<b class="a"></b>';
fs.writeFileSync('b.html', content, err => console.log.bind(console));
new Purgecss({
content: ['b.html'],
css: ['a.css']
}).purge();
Result css: .a{color:#fff}.b{color:#000}
https://runkit.com/secondfry/5a68950aad6c1300124ba55c
Hi, im having this kind of error when trying this plugin
my gulp config
gulp.task("purgecss", () => {
return gulp.src('build/css/style.css')
.pipe($.purgecss({
content: ["src/html/index.html"]
}))
.pipe(gulp.dest('build/css'));
})
λ gulp purgecss
[09:25:42] Using gulpfile ~\WebProjects\gulp\gulp-test\gulpfile.js
[09:25:42] Starting 'purgecss'...
events.js:182
throw er; // Unhandled 'error' event
^
Error: Cannot read property 'startsWith' of undefined
if i change the gulp.src and content
gulp.task("purgecss", () => {
return gulp.src('build/css/**/*.css')
.pipe($.purgecss({
content: ["src/html/**/*.html"]
}))
.pipe(gulp.dest('build/css'));
})
and giving this error
λ gulp purgecss
[09:30:24] Using gulpfile ~\WebProjects\gulp\gulp-test\gulpfile.js
[09:30:24] Starting 'purgecss'...
events.js:182
throw er; // Unhandled 'error' event
^
Error: fs$1.readdirSync is not a function
No matter what I try - I cant get rect
, polygon
, circle
and polyline
rules to be included in my CSS - they all drop out.
If this is my CSS:
.svgcolor-white path, .svgcolor-white rect, .svgcolor-white polygon, .svgcolor-white circle {
fill: #ffffff;
}
.svgcolor-white line, .svgcolor-white polyline {
stroke: #ffffff;
}
.svgcolor-red path, .svgcolor-red rect, .svgcolor-red polygon, .svgcolor-red circle {
fill: #e3342f;
}
And if I have a Whitelist like this:
whitelistPatterns: [/^svgcolor-/],
Then all I end up with is
svgcolor-white path
, svgcolor-white line
and svgcolor-red path
.
I've tried numerious things - but none seem to work for the other SVG styles. Am I doing something wrong - or is this a bug?
Before you open an issue, please check if a similar issue already exists or has been closed before.
purgecss
you're using, and the platform(s) you're running it onnpm run build
new PurgecssPlugin({
paths: [path.resolve(__dirname, './dist/index.html'), ...glob.sync(path.resolve(__dirname, './src/*'))],
})
dist/
is the bundle output folder
src/
is where the React components go.
output:
...
C:\dev\projects\webui\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 (C:\dev\projects\webui\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js:148:18)
at C:\dev\projects\webui\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js:199:90
at Array.forEach (<anonymous>)
at C:\dev\projects\webui\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js:195:39
at Array.forEach (<anonymous>)
Can you spot what could be causing this error? Thanks
I have a case where font-icons are being pulled from a database value. Is there a way to tell purgecss to not purge certain classes, say from a certain SCSS file? I tried adding the following but it doesn't keep them in the final output.
path.join(__dirname, "resources/scss/partials/fonts.scss")
An example class in the file is:
.icon-flickr::before { content: '\e80d'; }
I'm currently importing the animate.css library through SASS into my final css file. Despite only using some animations, all animation keyframes from the library will be imported into the final css file.
Is there a way to purge keyframes that aren't used?
Hi,
If you have class names that include special characters, for example @
or in my case /
they are 'purged' although the class is used in the content.
For example:
if you have this css:
.escape\/slash {
color: red
}
and this html:
<input class="escape/slash">
the css gets removed
purge version 0.13.0 on linux, node 8.9.1
Hi, I'm currently looking for something that will remove duplicate css properties accross media queries. Does this project do that?
for example:
h1 {
font-size: 25px;
font-weight: bold;
color: black;
}
@media screen and (min-width: 1000px) {
h1 {
font-size: 30px;
font-weight: bold;
color: black;
}
}
I'm hoping the second font weight and color would be discarded.
I'm currently using css purge but it doesn't seem to reliably do this
http://rbtech.github.io/css-purge/
am following this gist guide to use purgecss along with laravel, but for some reason each time i try to run yarn watch
i get the error
92% recording/Users/novo/Public/five/node_modules/purgecss/lib/purgecss.js:1
(function (exports, require, module, __filename, __dirname) { "use strict";function _interopDefault(t){return t&&"object"==typeof t&&"default"in t?t.default:t}function normalizeArray(t,e){for(var r=0,n=t.length-1;n>=0;n--){var i=t[n];"."===i?t.splice(n,1):".."===i?(t.splice(n,1),r++):r&&(t.splice(n,1),r--)}if(e)for(;r--;r)t.unshift("..");return t}function resolve(){for(var t="",e=!1,r=arguments.length-1;r>=-1&&!e;r--){var n=r>=0?arguments[r]:"/";if("string"!=typeof n)throw new TypeError("Arguments to path.resolve must be strings");n&&(t=n+"/"+t,e="/"===n.charAt(0))}return t=normalizeArray(filter(t.split("/"),function(t){return!!t}),!e).join("/"),(e?"/":"")+t||"."}function normalize(t){var e=isAbsolute(t),r="/"===substr(t,-1);return(t=normalizeArray(filter(t.split("/"),function(t){return!!t}),!e).join("/"))||e||(t="."),t&&r&&(t+="/"),(e?"/":"")+t}function isAbsolute(t){return"/"===t.charAt(0)}function join(){return normalize(filter(
Error: The extractor has failed to extract the selectors.
at t.value (/Users/novo/Public/five/node_modules/purgecss/lib/purgecss.js:1:89301)
at t.value (/Users/novo/Public/five/node_modules/purgecss/lib/purgecss.js:1:88744)
at t.value (/Users/novo/Public/five/node_modules/purgecss/lib/purgecss.js:1:87941)
at /Users/novo/Public/five/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:199:83
at Array.forEach (<anonymous>)
at /Users/novo/Public/five/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:182:27
at Array.forEach (<anonymous>)
at Compilation.<anonymous> (/Users/novo/Public/five/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:174:30)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at Compilation.applyPluginsAsyncSeries (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:206:13)
at sealPart2 (/Users/novo/Public/five/node_modules/webpack/lib/Compilation.js:662:9)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:202:11)
at Compilation.compilation.plugin (/Users/novo/Public/five/node_modules/webpack/lib/ProgressPlugin.js:111:6)
at next (/Users/novo/Public/five/node_modules/tapable/lib/Tapable.js:204:14)
at /Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:244:13
at /Users/novo/Public/five/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/novo/Public/five/node_modules/async/dist/async.js:1050:13)
at /Users/novo/Public/five/node_modules/async/dist/async.js:958:16
at /Users/novo/Public/five/node_modules/extract-text-webpack-plugin/dist/index.js:227:15
at /Users/novo/Public/five/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/novo/Public/five/node_modules/async/dist/async.js:1050:13)
error Command failed with exit code 1.
and here is my current config
const mix = require('laravel-mix')
const glob = require('glob-all')
const purgeCss = require('purgecss-webpack-plugin')
mix.webpackConfig({
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'stage-3']
}
}
}
]
}
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.vue'),
path.join(__dirname, 'resources/assets/vendor/**/*.vue')
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
})
am using purgecss-webpack-plugin: 0.11.0
.
not sure what exactly is causing this but if you need any extra info plz do tell me 👍
Hi,
I'm trying to follow the ES5 JS API examples but it looks like something is going wrong with the export as I'm getting a TypeError: Purgecss is not a constructor
error. I think it's probably something I'm doing wrong rather than a problem with the docs, but I'm not 100% sure.
This is my output from trying to run purgeCss.js
with node v8.6.0.
/usr/local/bin/node /Users/name/Sites/project/core/www/sites/all/themes/custom/project_theme/purgeCss.js
/Users/name/SItes/project/aman/core/www/sites/all/themes/custom/project_theme/purgeCss.js:2
var purgecss = new Purgecss({
^
TypeError: Purgecss is not a constructor
at Object.<anonymous> (/Users/name/Sites/project/core/www/sites/all/themes/custom/project_theme/purgeCss.js:2:16)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Function.Module.runMain (module.js:665:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:607:3
Process finished with exit code 1
Hey, I noticed that the DNS for purgecss.com doesn't resolve. I'm guessing it is supposed to redirect to www.purgecss.com. Just wanted to give you a heads up!
Is there a way to take A.css and B.css, remove B's duplicate css from A, and keep A and B as separate files in the end?
Reproducible with:
.bar:not(.foo) { color: red; }
.bar:not(.foo-bar) { color: blue; }
<p class="bar">anything</p>
Expected output CSS:
.bar:not(.foo) { color: red; }
.bar:not(.foo-bar) { color: blue; }
Actual output CSS:
.bar:not(.foo) { color: red; }
.bar:not { color: blue; }
$ purgecss --version
0.12.0
The default extractor regex in version v0.16.0
is /[A-z0-9-]+/g
The range A-z
includes all ascii characters between A
(65) and z
(122), in particular also the range from 91 to 96, which is [
\
]
^
_
`
This was probably not intended. I would suggest the following regex: /[A-Za-z0-9-]+/g
'foo[bar] foo^bar foo`bar`baz'.match(/[A-z0-9-]+/g)
~> [ 'foo[bar]', 'foo^bar', 'foo`bar`baz' ]
'foo[bar] foo^bar foo`bar`baz'.match(/[A-Za-z0-9-]+/g)
~> [ 'foo', 'bar', 'foo', 'bar', 'foo', 'bar', 'baz' ]
See also: FullHuman/purgecss-webpack-plugin#7
I've almost got this fully working now.. but am running into one last problem it seems
I'm using this vue component https://github.com/spatie/vue-tabs-component in my app.
I don't have this component in my /resources/assets folder because it's not needed there.
Inside the node_modules folder where npm installed that component, are references to CSS classes
Right now those classes are being skipped by purgeCss and the needed classes are being stripped as expected
What's the best strategy for dealing with this?
Adding the entire node_modules folder to the extractor paths seems like the wrong way to go. And adding just the node_modules/vue-tabs-component/src/components to the paths would fix the problem but I'm wondering if there's an even better strategy
I suppose having purgeCss determine which components are loaded and then looking automatically inside the node_modules folder for those would be overkill and out of scope
Thoughts?
I want to run the equivalent of
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.vue')
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g) || [];
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
],
}
But using the purgecss cli
I think I'll need a configuration file to set the extractor config.. and am not sure how best to pass the glob of paths to the cli utility
an example would be greatly appreciated!
I'm using Tailwind css. They generate layout that's responsive by creating classes like this
.flex
.md\:flex (only apply over a certain breakpoint)
which you can use like this
<div class="flex md:flex">
When I try to purge all unused css classes with purgecss, my output is working fine until i'm using those responsive classes (hover:, md:, lg:) because they are not included in the output. So I think the issue is that the html class is md: and the css classes is md\: because css need to escape the : character.
Maybe there is a option in my gulp file to make those two value equal.
There's my gulp config:
return gulp.src(['./main.css'])
.pipe(postcss([
tailwindcss('./tailwind.js'),
]))
.pipe(purgecss({
content: ["index.html"]
}))
.pipe(concat('purge.min.css'))
.pipe(gulp.dest('./build/css'));
I try using with and without the extractor property and it's the same thing.
For a very simple example of the issue go checkout this repo
https://github.com/alexgilbertDG/TailwindcssTest
Thanks
Version:
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-postcss": "^7.0.1",
"gulp-purgecss": "^0.20.0",
"tailwindcss": "^0.4.1"
},
"devDependencies": {
"purgecss": "^0.20.0",
}
Node: 6.6.0
I'm having trouble with selector staying when I have it whitelisted. I tried diving into the code but I can't quite figure out where the bug might be. Is there a list of HTML tags that purgeCSS goes off that it only allows? I'm trying to figure out why figure
tag isn't working properly. See below for an example:
Whitelist:
whitelistPatterns: [/vrabel/]
CSS:
/* This stays as expected */
.vrabel a {
margin: 0;
}
/* This gets purged */
.vrabel figure {
margin: 0;
}
Hi i played around with purgecss alot today, but i cant seem to get it to whitelist certain classes, can you provide af section in the documentation on how to whitelist classes that would be a great help. :)
Here is the minimal reproduce:
test.css
@-webkit-keyframes AAAAAAAAAAAAAAAAAAA {
0% { color: red; }
100% { color: #fff; }
}
@keyframes AAAAAAAAAAAAAAAAAAA {
0% { color: red; }
100% { color: #fff; }
}
empty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Command line:
npx purgecss --css test.css --content empty.html -o dist
The resulting dist/test.css
should be empty. But its content is exactly the same to the original file.
purgecss version: 0.20.0
I'm referencing this issue here because I didn't see a clear answer. #35
Is there a way to whitelist specific files? It would be helpful to do this since I use this plugin for WordPress themes and need to white list classes for content generated by plugins or widgets. Thanks.
Please an example for NuxtJS as the one for VueJs. Thanks
Hey there, I'm currently using Tailwind CSS which is a utility class library. It uses classes that look like .md:w-1/3
which contains a semicolon :
. It doesn't look like PurgeCSS will extract classes like this properly.
PurifyCSS doesn't do this right either but has a fork called purifycss-extended
which does a pretty good job at it.
Do you think this is something that can be supported in PurgeCSS?
Thank you!
It could be usefull if a user can have a "shortcut" of whitelist and whitelistPatterns for common used CMS etc. like wordpress
for example the set for wordpress is that https://gist.github.com/frnwtr/5647673bb15ca8893642469d3b400cba
Has anyone gotten purgecss to work with the new vue cli? I thought I got it working a few weeks ago but when I switched computers it's now failing (don't have access to my old one).
vue.config.js file
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');
module.exports = {
configureWebpack: {
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './public/index.html'),
path.join(__dirname, './src/**/*.vue'),
path.join(__dirname, './src/**/*.js'),
]),
}),
],
},
};
Error Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin
Before you open an issue, please check if a similar issue already exists or has been closed before.
A descriptive title
An isolated way to reproduce the behavior (example: GitHub repository with code isolated to the issue that anyone can clone to observe the problem): https://github.com/lopopolo/hyperbola, using webpack. To exercise the bug, modify keyframes: true
in webpack.config.js and run yarn install && make build
What version of purgecss
you're using, and the platform(s) you're running it on: 0.15.0
The behavior you expect to see, and the actual behavior: actual behavior:
/Users/lopopolo/dev/repos/hyperbola/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}function normalizeArray(e,t){for(var r=0,n=e.length-1;n>=0;n--){var i=e[n];"."===i?e.splice(n,1):".."===i?(e.splice(n,1),r++):r&&(e.splice(n,1),r--)}if(t)for(;r--;r)e.unshift("..");return e}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(e){return!!e}),!t).join("/"),(t?"/":"")+e||"."}function normalize(e){var t=isAbsolute(e),r="/"===substr(e,-1);return(e=normalizeArray(filter(e.split("/"),function(e){return!!e}),!t).join("/"))||t||(e="."),e&&r&&(e+="/"),(t?"/":"")+e}function isAbsolute(e){return"/"===e.charAt(0)}function join(){return normalize(filter(A
CssSyntaxError: <css input>:6:71741: Unexpected }
at Input.error (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/node_modules/postcss/lib/input.js:113:22)
at Parser.unexpectedClose (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/node_modules/postcss/lib/parser.js:492:26)
at Parser.end (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/node_modules/postcss/lib/parser.js:353:18)
at Parser.parse (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/node_modules/postcss/lib/parser.js:68:26)
at Function.parse (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/node_modules/postcss/lib/parse.js:24:16)
at e.value (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/lib/purgecss.js:1:90949)
at e.value (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/lib/purgecss.js:1:88660)
at e.value (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss/lib/purgecss.js:1:88224)
at /Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:199:83
at Array.forEach (<anonymous>)
at /Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:182:27
at Array.forEach (<anonymous>)
at Compilation.<anonymous> (/Users/lopopolo/dev/repos/hyperbola/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:174:30)
at next (/Users/lopopolo/dev/repos/hyperbola/node_modules/webpack/node_modules/tapable/lib/Tapable.js:204:14)
at Compilation.<anonymous> (/Users/lopopolo/dev/repos/hyperbola/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at Compilation.applyPluginsAsyncSeries (/Users/lopopolo/dev/repos/hyperbola/node_modules/webpack/node_modules/tapable/lib/Tapable.js:206:13)
at sealPart2 (/Users/lopopolo/dev/repos/hyperbola/node_modules/webpack/lib/Compilation.js:662:9)
at next (/Users/lopopolo/dev/repos/hyperbola/node_modules/webpack/node_modules/tapable/lib/Tapable.js:202:11)
at /Users/lopopolo/dev/repos/hyperbola/node_modules/extract-text-webpack-plugin/dist/index.js:244:13
at /Users/lopopolo/dev/repos/hyperbola/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/lopopolo/dev/repos/hyperbola/node_modules/async/dist/async.js:1050:13)
at /Users/lopopolo/dev/repos/hyperbola/node_modules/async/dist/async.js:958:16
at /Users/lopopolo/dev/repos/hyperbola/node_modules/extract-text-webpack-plugin/dist/index.js:227:15
at /Users/lopopolo/dev/repos/hyperbola/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/lopopolo/dev/repos/hyperbola/node_modules/async/dist/async.js:1050:13)
at /Users/lopopolo/dev/repos/hyperbola/node_modules/async/dist/async.js:958:16
at /Users/lopopolo/dev/repos/hyperbola/node_modules/extract-text-webpack-plugin/dist/index.js:216:21
at rebuilding.forEach.cb (/Users/lopopolo/dev/repos/hyperbola/node_modules/webpack/lib/Compilation.js:530:29)
at Array.forEach (<anonymous>)
at callback (/Users/lopopolo/dev/repos/hyperbola/node_modules/webpack/lib/Compilation.js:530:15)
make: *** [build] Error 1
Expected behavior: webpack successfully compiles, as it does in 0.14.0
purgecss
you're using, and the platform(s) you're running it on: purgecss-webpack-plugin@^0.20.0
reproduce repository: https://github.com/JounQin/blog/tree/purgecss
branch: purgecss
reproduce step:
Add a .env.local
file in project directory like following
NODE_ENV=development
APP_KEYS=APP_KEYS
GITHUB_TOKEN= # add an usable token for GitHub API
Then run yarn dev
to see correct UI and run yarn build && yarn start
to see generated version after purgecss enabled.
I am trying to use Purgecss to remove unused Tailwindcss classes from a SapperJS https://sapper.svelte.technology/ application. Could you please add an example in the documentation for SapperJS.
One of the features purifycss has is the option to print out the selectors that were removed and the reduction in file size it made on the css file. This is present in their Gulp plugin.
I've read the docs on whitelisting and I cant see the answer;
Is it possible to whitelist a specific file? I would assume Normalize.css
(https://necolas.github.io/normalize.css/) is a fairly common inclusion. Should we be purging that file, or including it "whole"?
Even though we might not reference a class directly, I'm trying to think if it would affect anything...?
Any estimation for React Native support?
I'm not sure, but I think purgecss doesn't extract selectors like some-item:nth-child(2n+1)
correctly. It will just be substituted with some-item:nth-child
. It works well with some-item:nth-child(2n)
thought.
My extractor:
class CustomExtractor {
static extract (content) {
return content.match(/[A-z0-9-+:\/]+/g)
}
}
Input code:
> .timeline-item:nth-child(odd) .timeline-info,
> .timeline-item:nth-child(even) .timeline-content {
padding-right: 30px;
}
> .timeline-item:nth-child(odd) .timeline-content,
> .timeline-item:nth-child(even) .timeline-info {
padding-left: 30px;
}
Output code:
.timeline-centered > .timeline-item:nth-child(2n) .timeline-content, .timeline-centered > .timeline-item:nth-child .timeline-info {
padding-right: 30px
}
.timeline-centered > .timeline-item:nth-child(2n) .timeline-info, .timeline-centered > .timeline-item:nth-child .timeline-content {
padding-left: 30px
}
First, thank you so much for making this, sounds very promising indeed!
Just found out about it through https://murze.be/reducing-the-size-of-a-css-file
this led me to this laravel mix base template: https://gist.github.com/reinink/83058f9af402aa474010844f7f2b1c54
Now the above example works on a single app.css. But in my case I would like to apply purgeCss on a bunch of different files that are being combined through mix.combine
Here's my full code
let mix = require('laravel-mix');
let glob = require('glob-all');
let purgeCss = require('purgecss-webpack-plugin');
mix.js('resources/assets/js/app.js', 'public/dist/js');
mix.sass('resources/assets/sass/app.scss', 'public/dist/css');
mix.combine([
'resources/assets/css/bootstrap-modals-override.css',
'resources/assets/css/my.animations.css',
'resources/assets/css/my.containers.css',
'resources/assets/css/my.core.css',
'resources/assets/css/my.footer.css',
'resources/assets/css/my.forms.css',
'resources/assets/css/my.header.css',
'resources/assets/css/my.menu.css',
'resources/assets/css/my.plugins.css',
'resources/assets/css/my.responsive.css',
], 'public/dist/css/general.css');
const webpackConfig = {
output: {
chunkFilename: 'dist/js/[name].js',
publicPath: "/",
},
resolve: {
modules: [
'node_modules'
],
alias: {
'vue$': 'vue/dist/vue.js',
},
},
// fix css files 404 issue
devServer: {
contentBase: path.resolve(__dirname, 'public'),
},
};
if (mix.inProduction()) {
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.vue')
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g) || []
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
});
}
mix.version();
mix.webpackConfig(webpackConfig);
npm run production
runs without errors but does not shrink the general.css at all.. clearly I'm doing something wrong.
Some help would be very appreciated! Thanks!
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.