Style missing when using client:only directive

timseverien commented 1 year ago

What version of `astro` are you using?

2.3.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Summary

Given Svelte component with styles used in another Svelte component loaded with the client:only directive, styles of the inner component are missing on astro build.

Example

Let’s say we have a component called Flow to create vertical rhythm:

<div class="flow">
  <slot />
</div>

<style>
  .flow {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
</style>

Additionally, we have a component Card that uses Flow:

<script>
  import Flow from "./Flow.svelte";
</script>

<Flow>
  <div>Header</div>
  <div>Content</div>
  <div>Footer</div>
</Flow>

Let’s say we want to use the Card component client-side only. In index.astro, we write:

<Card client:only />

Everything looks fine, but on production the Flow style is missing.

Distilling the problem

The problem doesn’t occur on astro dev
The problem does occur when running astro build && astro preview
When the client:only directive is removed, the Flow styles are applied again
When the client:only directive is swapped for client:loaded or any of the other client:* directives, styles are applied again
When adding a <Flow> component to the index.astro, the styles are applied again, regardless whether we keep the client:only directive on Card or not

It appears astro build performs an action that astro dev doesn’t, which may discard styles or cause classname mismatches.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/bug-astro-svelte-styles?file=src/pages/error.astro

Participation

[ ] I am willing to submit a pull request for this issue.

vampaz commented 1 year ago

Can add that I've the same with Vue. I think it is related with this https://github.com/withastro/astro/commit/7653cf9e9fedc6edc6038603248351e276191c3a

amxmln commented 1 year ago

I can confirm this is an issue with Vue as well. Maybe it has to do with scoped styles?

Another thing I noticed, that may be of relevance is that the ordering of styles is different in dev and build. Importing normalize.css causes the styles from normalize to override my styles during dev, because it gets added after my styles, but everything is fine after build.

This started roughly around the same time the component styles disappeared when using client:only.

Edit: in case the style ordering isn’t related to this issue, I have opened a separate one here: https://github.com/withastro/astro/issues/6975

josephmcg commented 1 year ago

I run into the same issue with Vue as well

saxoncameron commented 1 year ago

Any update on this one? Running Vue and have the same issue

ironon commented 1 year ago

Same issue here with Vue. It's a really weird edge condition, as it used to work until it didn't. Changing the client directive didn't fix the problem in this case. Multiple nested vue components may also be causing a problem for me, as I'm unclear on how the client directives affect their children.

tonyski commented 1 year ago

same issue with Vue

TUBB commented 1 year ago

same issue with Vue

bluwy commented 1 year ago

Sorry for the regression. I've looked into the issue and #7218 should fix it.

Chudroy commented 11 months ago

Still got this problem with astro 2.10.15

onurusluca commented 10 months ago

Still having the problem with Astro(also with Starlight), Vue and PrimeVue.

Edit: for anyone having the same issue, take a look at this template from PrimeVue repository. It works fine. The trick was to import needed styles in the components: https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart

import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import "primevue/resources/themes/lara-light-indigo/theme.css";

joechipjoechip commented 10 months ago

Still have the issue with version 4.0.6 .. :/

Fasa2509 commented 9 months ago

Same here but using Preact

chowdud commented 9 months ago

Getting the same with version 4.2.4 - specifically pertaining to loading in a stylised datatable, it momentarily renders in correctly, only then to have the styles removed completely.

undead404 commented 8 months ago

This issue should probably not be closed. Got the same problem (styles, from an SCSS module, disappear after build but present in dev) with 4.2.5

M-erb commented 4 months ago

This is still an issue in 4.9.1 using vue. All styles load correctly from the vue component in dev mode, but as soon as I build it the styles no longer load

bbagherian commented 3 weeks ago

If you're still getting to this page for the same problem, the solution was to insert your Vue component inside an html tag:

This won't apply the component style as a single page neither as scoped or global:

<EmptyVue client:visible/>`

But this will apply component styles:

<body>
    <h1>Empty Vue Active</h1>
    <main>
        <div>
            <EmptyVue client:visible/>
        </div>
    </main>

</body>

withastro / astro