Compile import css files to javascript when is a customElement

[marlonmleite]

Problem:
When using external libraries or cssInJs in customElement, we have problems with the scope of shadowDom.

A good feature for svelte/compile:
svelte should would read the file content in the compilation and automatically insert the content into shadowDom.

MySvelte.svelte:

<style>
	@import '/external-file/lib.css';
</style>

Currently, after compilation looks like this (build.js):

    class App$1 extends SvelteElement {
    	constructor(options) {
    		super();

    		this.shadowRoot.innerHTML = `<style>@import '/external-lib.css</style>';

With the new feature (build.js):

    class App$1 extends SvelteElement {
    	constructor(options) {
    		super();

    		this.shadowRoot.innerHTML = `<style>div.class-external-lib {color: red}</style>';

[Conduitry]

This is outside the purview of Svelte itself, which compiles one component at a time, and doesn't actually access the filesystem at all. Something like this could be implemented with a preprocessor which you pass to the bundler plugin.

[marlonmleite]

This is outside the purview of Svelte itself, which compiles one component at a time, and doesn't actually access the filesystem at all. Something like this could be implemented with a preprocessor which you pass to the bundler plugin.

@Conduitry I applied the technique using the guidelines of this issue sveltejs/rollup-plugin-svelte#65, but as you can see this does not work very well because of the svelte CSS imposition.