fullhuman/purgecss

Remove unused CSS

purgecss's Issues

Documentation Website

https://www.purgecss.com

• Introduction
• Configuration
• CLI
• Javascript API
• Webpack
• Gulp
• Rollup
• Whitelisting
• Extractor
• Comparison

Bad regex in DefaultExtractor matches special characters

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

Default purgecss extractor

what's the strategy for including css classes that only exist inside node_modules component?

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?

Purgecss from pug

Nuxt

Please an example for NuxtJS as the one for VueJs. Thanks

Classes including : not at the beginning are not extracted

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!

Config file

Media queries

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/

Purgecss from html

webpack error

Im getting the following error within webpack when running:

        new PurgecssPlugin({
            paths: glob.sync(`${PATHS.src}/*`)
        }),

Has anyone seen this before? Thanks

'Purgecss is not a constructor' when following the JS API examples

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

[Feature Request] An option to print out the stripped selectors and the css file size reduction

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.

can we get a purgecss cli example please?

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!

Whitelist specific file

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...?

Example how to whitelist certain dynamic classes

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. :)

Vue CLI 3.0 Support

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

White List a Specific File for php rendered content

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.

SVG styles not supported?

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?

Feature request: ignore everything between starting and closing comment

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.

Add typescript definitions

0.15.0 fails to parse bootstrap ("unexpected }") with keyframes = true

Before you open an issue, please check if a similar issue already exists or has been closed before.

When reporting a bug, please be sure to include the following:

• 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

When you open an issue for a feature request, please add as much detail as possible:

• A descriptive title
• A description of the problem you're trying to solve, including why you think this is a problem
• An overview of the suggested solution
• If the feature changes current behavior, reasons why your solution is better

DNS for purgecss.com (naked domain) doesn't resolve

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!

Unused @keyframes not removed at all

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

React Native support

Any estimation for React Native support?

Add lint

Rollup plugin

error when running webpack build

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 👍

Multiple files, don't combine

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?

Webpack plugin

Whitelisting doesn't keep a selector that ends in the html tag figure

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;
}

Doesn't distinguish between class and tag

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

[Feature request] Add a set of templates for common used cms like Wordpress

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

Gulp plugin

CSS Modules classes removed in .vue file

When reporting a bug, please be sure to include the following:

• A descriptive title
• An isolated way to reproduce the behavior
• What version of purgecss you're using, and the platform(s) you're running it on: purgecss-webpack-plugin@^0.20.0
• The behavior you expect to see, and the actual behavior: Do not remove CSS Modules classes, but they are actually removed

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.

chunk.mapModules is not a function

Before you open an issue, please check if a similar issue already exists or has been closed before.

When reporting a bug, please be sure to include the following:

• 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)
• What version of purgecss you're using, and the platform(s) you're running it on
  "purgecss-webpack-plugin": "^0.19.0"
  Windows 7
• The behavior you expect to see, and the actual behavior
  not crashing when npm 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

Escaped characters are ignored

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

Css attribute selectors [Request]

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?

Rewriting css keyframes

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?

Purgecss cli

[bug] Bracketed term lost with :not(.hyphenated-classname)

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

can you help me make this work with laravel mix.combine

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!

Feature request: Purge unused keyframes

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?

Purgecss with Tailwindcss and Sapperjs

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.

Add prettier

Not purging specific CSS classes?

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'; }

Error when running using gulp

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

Also remove @-webkit-keyframes

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).

Extraction of nth-child selectors

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
  }

[Issue] Support responsive and hover classes with tailwindcss and gulp

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