UnCSS setup with Brunch

Question

Using Brunch as my build-tool for a front-end prototype, I am having difficulty setting up the UnCSS-plugin. I installed the Bootstrap 4-skeleton for a quick setup, and apart from UnCSS everything is running smoothly.

The error I get on brunch build --production is error: UnCSS: no stylesheets found. I configured the plugins like this:

  plugins:
    sass:
      options:
        includePaths: [
          'bower_components/bootstrap/scss'
        ]
    postcss:
      processors: [
        require('autoprefixer')
      ]
    babel:
      ignore: [
        /^(bower_components|vendor)/
      ]
    uncss:
        options:
            csspath: 'css/app.css'
            htmlroot: 'public'
        files: ['index.html']

The source files for the project are located in app: index.html in app/assets, main.scss (imports Bootstrap) and styles.css in app/stylesheets, and app.js in app/javascripts.

Brunch builds this to a folder named public, with styles in public/css/app.css and content in public/index.html. The question is, what is incorrect about the configuration of UnCSS? My understanding of it is that it works on the CSS output from the build, in which case the paths seem correct.

There is a question on SO from 2014 asking pretty much the same thing, but it was never answered.

Answer 1

I had not considered looking at the GitHub issues, wherein one specifically addressed this. In essence, as suggested by @1951FDG:

  plugins:
    uncss:
      options:
        ignore: [/\.\bactive\b/]
        ignoreSheets: [/fonts.googleapis/]
      files: ['public/index.html']

ignore: sample regex to ignore '.active' class

ignoreSheets: sample regex to ignore Google fonts

More importantly, this invocation of UnCSS reads the stylesheets linked in index.html to find the correct CSS-file, then processes it.