Filters not working on production build about eleventy-web-starter

[chrissy-dev]

Hey @ineptian, the issue is with html-minifier and it's dependency of clean-css to handle minifying CSS within <style> tags during HTML compression. This is noted as the culprit here. Clean CSS does actually support this in newer versions but the version html-minifier includes is a few years old and doesn't look likely to be updated any time soon.

There's a few options. Firstly, we want to stop html-minifier touching our CSS.

1. On line 11 in ./utils/transforms.js set the minifyCSS option to false or remove it completely.

If you run a build, everything should now work as expected but the inline CSS won't be minified.

Switch to cssnano for minifying

1. Install cssnano as a dependency

npm install cssnano --save-dev

2. Update ./postcss.config.js to inline CSS in production

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        isProduction && require('cssnano')({
            preset: 'default',
        }),
    ]
}

Hope this helps.

[ineptian]

@chrissy-dev thanks so much for being so on it with the replies. I installed css nano and that worked great but I actually haven't tested the filters yet since I already migrated away from using them in the meantime. I have been wanting to test this though and will report back when I have time. You can keep closed for now.

[chrissy-dev]

@ineptian Closing this but feel free to comment on it to pick it up again 😊