Inconsistent local component styling in build

[keen wave]

I have a component where I style a link globally with blue and in local component I override this with white variant. I do this using variables.
In preview this looks perfectly fine but in build/preview the local styling gets overwritten by the global styling like in the image.

Any clue why this is or what I am doing wrong?
I load css in the global.css file like so

a {
    color: var(--blue);
}

In the component I use this:

    a {
        display: block;
        text-decoration: none;
        color: var(--color-text);
    }

    a:hover {
        color: var(--color-accent-secondary);
    }

The hover does work as intended.

[pseudo vigil]

@keen wave can you share the astro component?

[keen wave]

---
import type { MarkdownInstance } from "astro";
import Pill from "@components/tag-pill.astro";
export interface Props {
    post: MarkdownInstance<Record<string, any>>;
}

const { post } = Astro.props;
---

<div class="post-listing">
    <a href={post.url}>
        <div>
            <div class="date">{post.frontmatter.date?.slice(0, 10)}</div>
            <h2>{post.frontmatter.title}</h2>
        </div>
    </a>
    <div>
        {
            (post.frontmatter.tags)?.map((tag: string) => (
                <Pill tag={tag} />
            ))
        }
    </div>
</div>
<style>
    a {
        display: block;
        text-decoration: none;
        color: var(--color-text);
    }

    a:hover {
        color: var(--color-accent-secondary);
    }

    h2 {
        margin: 0;
    }

    .post-listing {
        margin-bottom: 1em;
    }

    .date {
        color: var(--color-text-inactive);
    }
</style>

[cold vessel]

Component style probably loads first and then the global style

[pseudo vigil]

https://docs.astro.build/en/guides/styling/#css-variables

[cold vessel]

As both a styles are equal in hierarchy, the latter will override the first one

[pseudo vigil]

you need to define the vars

[keen wave]

I use them in my base layout exactly the same as my index page. And they behave differently.

[keen wave]

ill try this out but why does it behave differently in two pages?

[cold vessel]

Well does the other page have the .astro-3BC4WEEN class

Oh right, even if it did, it would still not get prioritized with my logic

[keen wave]

I map over posts in my index, just at my home. And in another tag/[tag].astro file

only the tag site messes up

[cold vessel]

You should add more hierarchy to the styling though, just use .post-listing a instead of a

[keen wave]

yes I did it without because I assumed it was local and would override it anyway

[keen wave]

this does do other weird stuff hahaha, I guess I do need to just add the variables but it doesnt like my naming convention

[keen wave]

I dont honestly don't really like this. I prefer to have my stylings defined in my css file.
And more local classes seems to just not apply styling somehow?

[pseudo vigil]

you could add the is:global directive to the style tag

https://docs.astro.build/en/reference/directives-reference/#isglobal

[keen wave]

That seems to defeat the purpose of local styling then no?
I guess it's better like this but I still find it odd behavior.

[cold vessel]

What do you think of CSS modules, I always tend to prefer them

Makes combining global and local classes much easier in my opinion

[keen wave]

I find my project to be way to simple to introduce such things. I personally just find it weird that it behaves (to me) as expect in dev mode but different in build.
I have never, in any other frameworks, had issues like this.
I would classify this as bug unless I'm misunderstanding this.

[vernal fern]

^ I also by default expected the local styles to behave similarly to how CSS modules would