title: Rollup.js - have PostCSS process whole bundle.css instead of individual files from rollup-plugin-svelte
body: <p>I've tried several guides and many configurations, but can't get my rollup, postcss, and svelte bundle process to work quite right.</p>
  
  <p>Right now the svelte plugin is extracting the css from my .svelte files and emitting it to the posctcss plugin, but it's doing it one file at a time instead of the entire bundle.  This makes it so some functions in the purgecss and nanocss postcss plugins don't completely work because they need the entire bundle to do things like remove duplicate/redundant/unused css rules.</p>
  
  <pre class="lang-js prettyprint-override"><code>// rollup.config.js
  import svelte from 'rollup-plugin-svelte'
  import resolve from 'rollup-plugin-node-resolve'
  import commonjs from 'rollup-plugin-commonjs'
  import livereload from 'rollup-plugin-livereload'
  import { terser } from 'rollup-plugin-terser'
  import rollup_start_dev from './rollup_start_dev'
  import builtins from 'rollup-plugin-node-builtins'
  import postcss from 'rollup-plugin-postcss'
  
  const production = !process.env.ROLLUP_WATCH
  
  export default {
      input: 'src/main.js',
      output: {
          sourcemap: true,
          format: 'iife',
          name: 'app',
          file: 'public/bundle.js',
      },
      plugins: [
          svelte({
              dev: !production,
              emitCss: true,
          }),
          postcss({
              extract: true,
              sourceMap: true,
          }),
          builtins(),
          resolve({
              browser: true,
              dedupe: importee =&gt;
                  importee === 'svelte' || importee.startsWith('svelte/'),
          }),
          commonjs(),
          !production &amp;&amp; rollup_start_dev,
          !production &amp;&amp; livereload('public'),
          production &amp;&amp; terser(),
      ],
      watch: {
          clearScreen: false,
      },
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// postcss.config.js
  const production = !process.env.ROLLUP_WATCH
  const purgecss = require('@fullhuman/postcss-purgecss')
  
  
  module.exports = {
      plugins: [
          require('postcss-import')(),
          require('tailwindcss'),
          require('autoprefixer'),
          production &amp;&amp;
              purgecss({
                  content: ['./src/**/*.svelte', './src/**/*.html', './public/**/*.html'],
                  css: ['./src/**/*.css'],
                  whitelistPatterns: [/svelte-/],
                  defaultExtractor: content =&gt; content.match(/[\w-/:]+(?&lt;!:)/g) || [],
              }),
          production &amp;&amp;
              require('cssnano')({
                  preset: 'default',
              }),
      ],
  }
  </code></pre>
  
  <p>How can I have rollup pass the entire bundle.css to postcss instead of one "file" at a time?</p>