Don't support import css files to javascript

[marlonmleite]

I need to import 1 css file into javascript and use my css content directly in Javascript (this makes it possible for me to get the CSS string and create 1 element style straight into shadowDom without sideEffect):

import a from 'external-lib/bundle.css';

console.log(a);

I need this, because the customElements not work correctly, see: sveltejs/svelte#3594

I need to create 1 customElement, where it will import 1 .css file from an external lib. But, this have a problem, this plugin not work with import a .css file to a string.

Because customElement totally isolates my component, there is no other way to import these external styles without having any side effects. The only way I got anything like this was this:

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

The workround cause sideEffect, because flick my app when loading the css.

[marlonmleite]

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

In MySvelte.svelte:

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

Currently, after compilation looks like this:

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

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

With the new feature:

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

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

[maxmilton]

I'm not exactly sure what you're proposing here. Do you mean you want to inline a CSS @import?

You can already acheve this using a style preprocessor, e.g., something like PostCSS. Would thsese be helpful in your case?

• https://github.com/kaisermann/svelte-preprocess
• https://github.com/postcss/postcss-import

[marlonmleite]

@maxmilton and @Conduitry I try use svelte-preprocess and postcss-import, but the svelte compiler remove all css content, because the hash/content of css don't match the html elements of the current file.

Is there any way to block this behavior from svelte for the style element?

<style type="postcss">
	@import './../public/bundle.css'; 
</style>

<svelte:component this={MyBigComponent} />

in rollup:

    svelte({
      preprocess: [
        postcss({
          plugins: [
            require('postcss-import')
          ]
        })
      ],

But after compile the content of the import don't work, because the svelte force ignore the unlike styles.

[maxmilton]

At this point in time, I don't believe there is a way to disable svelte's removal of "unused" styles. You do have the option of adding the global modifier (:global(.your-style)) to styles to keep svelte from discarding them.

It can be frustrating though when you have a lot of styles you want to inject. In the past I used a custom PostCSS plugin to automatically inject the global modifier for all styles... but now I tend to keep a boundary between global or common/reusable styles and component-specific styles. I don't use web components so I'm not sure what the current best practices are for sharing styles between different web components or instances of the same web component.

If you dig around in https://github.com/sveltejs/svelte/issues you'll find some proposals to change how the styles discarding works.

[Conduitry]

This would be, if anything, the responsibility of a preprocessor, not of this plugin.