csssvelte-5

Open-props breaks default Svelte alignment


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:

default svelte header laoyout

To this:

broken svelte header layout

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:

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

Solution

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