emitCss - how to disable CSS entirely?

[gushogg-blake]

Is it possible to disable CSS output entirely? I want to avoid having CSS in the clientside JS of the component, but also don't need CSS files from the clientside bundle, as they are provided by a separate SSR build.

[rproserpio]

You could create a simple Rollup plugin that handles the css imports:

import { createFilter } from 'rollup-pluginutils';

const css = (options) => {
  const filter = createFilter(options.include, options.exclude);
  return {
    name: 'css',
    transform: async function(code, id) {
      if (filter(id)) { // if it's css
        return ''; // then remove the module
      } else {
        return null; // ignore the other modules 
      }
    }
  }
}

That can be called like this:

plugins: [
svelte({
  emitCss: true
}),
css({
  include: '**/*.css'
})
]

[benmccann]

Can you set compilerOptions: { css: false }? Try with both emitCss: true and emitCss: false and let me know if either work (though admittedly the first would be a confusing API it might help you).

[rproserpio]

Can you set compilerOptions: { css: false }? Try with both emitCss: true and emitCss: false and let me know if either work (though admittedly the first would be a confusing API it might help you).

Hi Ben! compilerOptions: {css: false} together with emitCss: false does the trick.
With emitCss: true the css is still extracted in a Rollup module.
My answer was needlessly complicated.

[gushogg-blake]

Thanks!