PurgeCSS?

[simplerethink]

What's the best way to purge unused css with 11ty vite and rollup?

I can't seem to get the output to actually purge unused css.

[simplerethink]

I tried with PostCSS as well.

npx @11ty/eleventy   
             
[11ty] Writing _site/test/index.html from ./_src/test.njk
[11ty] Writing _site/index.html from ./_src/index.njk
vite v3.2.3 building for production...
✓ 1 modules transformed.
[vite:css] Failed to load PostCSS config (searchPath: /eleventy-demo/.11ty-vite): [Error] Loading PostCSS Plugin failed: req(...) is not a function

(@/eleventy-demo/postcss.config.js)
Error: Loading PostCSS Plugin failed: req(...) is not a function

(@/eleventy-demo/postcss.config.js)
    at load (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25903:11)
    at file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25928:16
    at Array.map (<anonymous>)
    at plugins (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25927:8)
    at processResult (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25997:14)
    at file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:26121:14
    at async resolvePostcssConfig (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:43962:22)
    at async compileCSS (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:43695:27)
    at async Object.transform (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:43306:55)
    at async transform (file:///eleventy-demo/node_modules/rollup/dist/es/shared/rollup.js:21734:16)
file: /eleventy-demo/.11ty-vite/css/app.sass
[11ty] Encountered a Vite build error, restoring original Eleventy output to _site [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /eleventy-demo/.11ty-vite): [Error] Loading PostCSS Plugin failed: req(...) is not a function

(@/eleventy-demo/postcss.config.js)
Error: Loading PostCSS Plugin failed: req(...) is not a function

(@/eleventy-demo/postcss.config.js)
    at load (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25903:11)
    at file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25928:16
    at Array.map (<anonymous>)
    at plugins (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25927:8)
    at processResult (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:25997:14)
    at file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:26121:14
    at async resolvePostcssConfig (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:43962:22)
    at async compileCSS (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:43695:27)
    at async Object.transform (file:///eleventy-demo/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:43306:55)
    at async transform (file:///eleventy-demo/node_modules/rollup/dist/es/shared/rollup.js:21734:16)] {
  code: 'PLUGIN_ERROR',
  plugin: 'vite:css',
  hook: 'transform',
  id: '/eleventy-demo/.11ty-vite/css/app.sass',
  watchFiles: [
    '/eleventy-demo/.11ty-vite/index.html',
    '/eleventy-demo/.11ty-vite/test/index.html',
    '/eleventy-demo/.11ty-vite/css/app.sass'
  ]
}
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] ENOENT: no such file or directory, stat '/eleventy-demo/.11ty-vite' (via Error)
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '/eleventy-demo/.11ty-vite'
[11ty] Copied 1 file / Wrote 2 files in 1.45 seconds (v2.0.0-canary.16)
transforming (2) index.html%      

postcss.config.js

module.exports = {
    plugins: {
        'postcss-nesting': {},
        autoprefixer: {},
        cssnano: {
            preset: 'default'
        },
        purgecss: {
            content: ['./_site/**/*.html']
        }
    }
}

[khalidabuhakmeh]

👋 Hi @simplerethink, I am using PurgeCSS now and this is a section from my configuration. I'm using the package @fullhuman/postcss-purgecss.

eleventyConfig.addPlugin(EleventyVitePlugin, {
    assetsInclude: ['**/rss.xml'],
    viteOptions: {
      clearScreen: true,
      appType: "mpa",
      css: {
        postcss : {
          plugins: [
            purgeCss({
              content: [
                // for development
                './_site/**/*.html',
                // for production builds
                './.11ty-vite/**/*.html'
              ],
              safelist: {
                deep: [/plyr.*/]
              }
            })
          ]
        }
      },
  ....

hope this helps.