If I scaffold a new Svelte v5 project

npm create vite@latest myapp -- --template svelte

Then import the Open-props stylesheets in the main App.svelte file

  :global {
    @import ";;
    @import ".min.css";
  }

I find that the header of the page changes layout, from this:

To this:

The only change, of course, is that the normalise.min.css is now being applied to everything, but that's by design because I want the functionality of the stylesheets to be applied. But I don't want the layout change.

I would say I've tried everything, which essentially means different methods of importing the stylesheets - but there is nothing I can find which excludes this effect from these particular elements.

What am I missing? Have I fotten to look at a particular element or rule?

Here is the App.svelte markup:

<main>
  <div>
    <a href="; target="_blank" rel="noreferrer">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="; target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>
...
</main>

Here is the script providing the stylesheet import in the same file:

<style>
  :global {
    @import ";;
    @import ".min.css";
  }
  ...
</style>

And that's all there is to it. The import you see above is enough to cause this breaking change.

The steps to reproduce are simply:

1. Execute the Svelte v5 scaffold
2. NPM install
3. Add the @import statements as seen above
4. npm run dev

If I scaffold a new Svelte v5 project

npm create vite@latest myapp -- --template svelte

Then import the Open-props stylesheets in the main App.svelte file

  :global {
    @import "https://unpkg/open-props";
    @import "https://unpkg/open-props/normalize.min.css";
  }

I find that the header of the page changes layout, from this:

To this:

The only change, of course, is that the normalise.min.css is now being applied to everything, but that's by design because I want the functionality of the stylesheets to be applied. But I don't want the layout change.

I would say I've tried everything, which essentially means different methods of importing the stylesheets - but there is nothing I can find which excludes this effect from these particular elements.

What am I missing? Have I fotten to look at a particular element or rule?

Here is the App.svelte markup:

<main>
  <div>
    <a href="https://vite.dev" target="_blank" rel="noreferrer">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>
...
</main>

Here is the script providing the stylesheet import in the same file:

<style>
  :global {
    @import "https://unpkg/open-props";
    @import "https://unpkg/open-props/normalize.min.css";
  }
  ...
</style>

And that's all there is to it. The import you see above is enough to cause this breaking change.

The steps to reproduce are simply:

1. Execute the Svelte v5 scaffold
2. NPM install
3. Add the @import statements as seen above
4. npm run dev

• css
• svelte-5

• Include all relevant code, questions has to be stand-alone. That means the code for the page, any used components and the normalization CSS. (Normalization affecting layout is completely expected, by the way.) – brunnerh Commented Mar 27 at 7:52
• @brunnerh Added what I can without including all the scaffolded code. The only code not produced by the Svelte scaffold are the 2 import lines. – Matt W Commented Mar 27 at 16:34
• The CSS is still missing. It does not matter how the code is created or where it is from, the question should contain the relevant code. – brunnerh Commented Mar 27 at 16:55

1 Answer 1

The normalize.min.css affects your `img tags with the following statements:

:where(img,svg,video,canvas,audio,iframe,embed,object) {
    display: block;
}

*, :after, :before {
    box-sizing: border-box;
}

So all you have to do to revert the images to their original display is reset to the default values with

:global(img) {
    display: inline;
    box-sizing:content-box;
}

The use of global obviously depends on your preference but that's it =)