Open-props breaks default Svelte alignment

Question

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.com/open-props";
    @import "https://unpkg.com/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 forgotten 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.com/open-props";
    @import "https://unpkg.com/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:

Execute the Svelte v5 scaffold
NPM install
Add the @import statements as seen above
npm run dev

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
– 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
– 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
– brunnerh, Commented Mar 27 at 16:55

Jorge Linares · Accepted Answer · 2025-03-28 19:11:17Z

0

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 =)

answered Mar 28 at 19:11

Jorge Linares

6264 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Open-props breaks default Svelte alignment

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related