fullhuman / grunt-purgecss Goto Github PK

First of all, thanks for updating the Grunt plugin in regards to the issue with comments FullHuman/purgecss#90 @Ffloriel

Now, I'm having trouble getting the plugin to work with proper extractors that respect / do not cleanse responsive/etc. classes from my css which have been put there by TailwindCSS.

I know FullHuman/purgecss#56 and I also found this at the Tailwind repo. However, this doesn't solve my issue.

I want to keep css like

  .mn\:hidden {
    display: none;
  }

...when this can be found in my markup:

<div class="mn-hidden">

My setup inside my Gruntfile.js

    purgecss: {
      my_target: {
        options: {
          content: ['../theme/layout/*.liquid',
                    '../theme/sections/*.liquid',
                    '../theme/snippets/*.liquid',
                    '../theme/templates/*.liquid',
                    '../theme/templates/customers/*.liquid'],
          extractors: {
            extractor: class {
                static extract(content) {
                    content.match(/[A-z0-9-:\/]+/g) || []
                }
            },
            extension: ['css', 'html', 'liquid']
          },
          // whitelist: ['text'],
          // whitelistPatterns: [/mn$/],
          keyframes: true,
          fontFace: true
        },
        files: {
          'tmp/theme_sass_postcss_stringreplace_purgecss.css': ['tmp/theme_sass_postcss_stringreplace.css']
        }
      }
    },

However with this setup the css gets stripped. I'm currently helping myself by changing the separator from colon to dash (tailwind docs) as it works this way.

The purge works per se, so it's not an issue with the content files. However, I'm no regex-expert (always using regex101), so maybe the regex-code is simply wrong for my case?

Another possible reason would be that the plugin is not behaving correctly so I thought I probably report this, even though I got it working with an alternate separator.

Hi,

I just tried the plugin and recognized an error in the example you have given:
I had to add a "section" and wrap the files parameter, otherwise "files" was always empty.

grunt.initConfig({
  purgecss: {
    options: {
      content: ['src/**/*.html'],
    },
    app: {
        files: {
          'dist/main.css': ['src/**/*.css'],
        },
    }
  },
});

In addition to this, there is no file written in my case. It just stops during the purge process.

     grunt.log.writeln('1');

      // purgecss
      var purgecssResult = new Purgecss({
        content: options.content,
        css: f.src
      }).purge()[0].css
      grunt.log.writeln('2');

So "1" will be printed but "2" doesn´t.

Running "purgecss:app" (purgecss) task
Verifying property purgecss.app exists in config...OK
Files: #mypath#mycss.css -> #mypath#mycss.min.css
Options: content=["#mypath#/**/*.twig"]
1

Done.

Does the "files" array always convert one source css file to one target file? Or can you give an example on how to use wildcards here (if possible with purgcss, like in the "content" option)

So basically what I want is:

• Purge any css file in given directory structure and output every file (with the same name) to specified output directory

Something like:

files: { 'purged_output/**/*.css': 'scr/css/**/*.css' }

Plan B would be to purge all source css files into one large (purged) css file but I couldn't get that t work, too:

files: { 'purged_output/app.css': 'scr/css/*.css' }

results in an empty output file

Like:

>> 1 file created. 57.97 kB → 45.16 kB

@Ffloriel could you please update purgecss to the latest version and make a new release?

Thanks!

Using "whitelist" option to ignore certain classes isn't working -- purgecss still removes those classes. Am I doing something wrong or is this a bug? Running grunt-purgecss 1.0.0, and grunt 1.0.3.

`module.exports = function(grunt) {
grunt.initConfig({

	purgecss: {
      my_target: {
        options: {
          content: ['page-templates/home-page.php'],
          whitelist: ['random', 'text-white', 'button']
        },
        files: {
          'build/css/style-home-purge.css': ['source/sass/style-combined.css']
        }
      }
    }
    
});

grunt.loadNpmTasks('grunt-purgecss');

}`

#7 — related issue. @Ffloriel, ping.

1. Summary

Any PurgeCSS whitelisting options doesn't work for me.

2. Data

2.1. Environment

• Operating system:

  • Windows 10 Enterprise LTSB 64-bit EN — local
  • Ubuntu 14.04.5 LTS

• Node.js 11.10.0

• purgecss 1.1.0

• grunt 1.0.3

• grunt-purgecss 1.1.0

• grunt-cli 1.3.2

3. Files

Look at KiraPurgeCSS branch of my demo repository:

• KiraGoddess.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PurgeCSS debugging</title>
</head>
<body>
    <p class="KiraFirst">Kira</p>
</body>
</html>

• KiraGoddess.css:

.KiraFirst {
    color: red
}

.KiraSecond {
    color: yellow
}

• Gruntfile.coffee:

module.exports = (grunt) ->
    grunt.initConfig
        purgecss:
            options:
                content: ["KiraGoddess.html"]
                whitelist: [".KiraSecond"]
                whitelistPatterns: [/\.KiraSecond/g]
                whitelistPatternsChildren: [/\.KiraSecond/g]
            main:
                files:
                    "KiraGoddess.css": ["KiraGoddess.css"]

    grunt.loadNpmTasks 'grunt-purgecss'
    return

4. Steps to reproduce

4.1. PurgeCSS CLI

purgecss --css KiraGoddess.css --con KiraGoddess.html --out . --whitelist KiraSecond

4.2. grunt-purgecss

grunt purgecss

5. Behavior

5.1. Expected — CLI

• Live demo on Travis CI

• Result:

.KiraFirst {
    color: red
}
.KiraSecond {
    color: yellow
}

purgecss-CLI successful ignore .KiraSecond class.

5.2. Unexpected — Grunt

• Live demo on Travis CI

• Result:

.KiraFirst {
    color: red
}

grunt-purgecss not ignore .KiraSecond class.

Note, how Grunt show options:

Options: content=["KiraGoddess.html"], whitelist=[".KiraSecond"], whitelistPatterns=[{}], whitelistPatternsChildren=[{}]

6. Not helped

1. Remove \. and /g from patterns
2. Adding ^ and $ to regexes as in example

Thanks.