connecteev
52
1
Mix

Configuring postcss-uncss for Laravel Mix

Posted 5 days ago by connecteev

I am trying to remove unused css rules from one sass file.

Research led me to postcss-uncss as the best option for removing unused css if you do not use server-side rendering (see: https://www.purgecss.com/comparison)

https://github.com/uncss/postcss-uncss

Now, postcss-uncss is a wrapper for uncss: https://github.com/uncss/uncss However, the uncss documentation is confusing to me, and the example configuration here is not useful: https://github.com/uncss/postcss-uncss#example-configuration

How does one configure postcss-uncss for Laravel Mix?

THis is what I have so far:

mix.js('resources/js/app.js', 'public/js')
    .options({
        processCssUrls: false,
        postCss: [
            require('postcss-uncss'),
            tailwindcss('./tailwind.config.js')
        ],
    })

I want to:

  1. Tell it which laravel routes to use (or 'all' should also be fine)
  2. Where my sass / scss files are located: /resources/sass/* (example files: /resources/sass/app.scss, /resources/sass/admin/admin.scss, etc)
  3. Where to put the output ie the compiled (and cleaned up) css without the unused rules: /public/css/* (so as to preserve the same structure, for example: /public/app.css, /public/admin/admin.css, etc)

Thoughts would be greatly appreciated.

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.