How do I deal with a default theme's obfuscated css? | Astro Lounge | Page 1

kindred jasper Feb 5, 2024, 4:50 PM

#

I'm trying to style the bottom border style for Starlight tabs and from looking at inspect element, this works, but I don't want to select it with obfuscated names.

.tab:where(.astro-esqgolmp) > :where(.astro-esqgolmp)[role="tab"][aria-selected="true"] {
    border-bottom: 4px solid var(--brand-500);
}

dark plinth Feb 5, 2024, 4:55 PM

#

place all base, reset, and frameworks style in to css @layer

for example:

@layer framework.starlight {
  @import "...starlight.scss";
}

layered styles has lower specify
and right all ur components not layerd.
ez override. ez reading. ez af

kindred jasper Feb 5, 2024, 4:57 PM

#

im not that deep into astro yet. idk what that means. i just expected something like how this works

a[id^="tab-"] {
    color: var(--embed-title) !important;
    padding-bottom: 0.2em !important;
    background-color: var(--background-tertiary) !important;
}

dark plinth Feb 5, 2024, 4:57 PM

#

it's not astro stuff. its pure css

kindred jasper Feb 5, 2024, 4:57 PM

#

oh i barely know anything about css lol

#

is there a guide for that?

dark plinth Feb 5, 2024, 4:58 PM

#

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

MDN Web Docs

@layer - CSS: Cascading Style Sheets | MDN

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

#

level up! )

kindred jasper Feb 5, 2024, 5:02 PM

#

i dont understand what to do with this information

#

like first off, where does the text that comes after @layer come from?

#

@layer tab?

dark plinth Feb 5, 2024, 5:09 PM

#

ok. lets try another way

#

u need got works this?

a[id^="tab-"] {
    color: var(--embed-title) !important;
    padding-bottom: 0.2em !important;
    background-color: var(--background-tertiary) !important;
}

kindred jasper Feb 5, 2024, 5:11 PM

#

yes it does what i need it do do. its the consistent style no matter the state

dark plinth Feb 5, 2024, 5:11 PM

#

then what's wrong?

kindred jasper Feb 5, 2024, 5:12 PM

#

i now want to do this

.tab:where(.astro-esqgolmp) > :where(.astro-esqgolmp)[role="tab"][aria-selected="true"] {
    border-bottom: 4px solid var(--brand-500);
}

#

but its obfuscated classes

dark plinth Feb 5, 2024, 5:13 PM

#

selector :where has zero specifity
its just way for scoping in astro

#

try

:is(.tab, #important) > [role="tab"][aria-selected="true"] {
    border-bottom: 4px solid var(--brand-500);
}

kindred jasper Feb 5, 2024, 5:22 PM

#

wait im trying to understand the scss thing. i feel like im close

@tailwind base;
@tailwind components;
@tailwind utilities;

.inline-icon {
    @apply inline-block align-middle !important;
}

@layer components {
    .tab {
        > [role="tab"] {
            color: var(--embed-title) !important;
            padding-bottom: 0.2em !important;
            background-color: var(--background-tertiary) !important;
            
            &[aria-selected="true"] {
                border-bottom: 4px solid var(--brand-500) !important;
            }
        }
    }
}

#

but that gives me
[WARN] [vite] [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

dark plinth Feb 5, 2024, 5:24 PM

#

did u install sass to ur project? )

kindred jasper Feb 5, 2024, 5:24 PM

#

no i thought that was already built in

dark plinth Feb 5, 2024, 5:24 PM

#

no. u have to install it

#

but now

#

w8 a bit

kindred jasper Feb 5, 2024, 5:25 PM

#

it did tell me to do
npm install -D sass

#

so i did that

dark plinth Feb 5, 2024, 5:27 PM

#

@tailwind base;
@tailwind components;
@tailwind utilities;

.inline-icon {
    @apply inline-block align-middle !important;
}

:is(.tab, #important) > [role="tab"] {
    color: var(--embed-title);
    padding-bottom: 0.2em;
    background-color: var(--background-tertiary);
}
            
:is(.tab, #important) > [role="tab"][aria-selected="true"] {
    border-bottom: 4px solid var(--brand-500);
}

#

try this. pure css

kindred jasper Feb 5, 2024, 5:28 PM

#

but you said to level up. now i dont want to do pure css anymore /j

#

this whole time ive been editing this stylesheet, ive been wondering if there's a better version of css and i just realized there is, so id like to try and figure it out

dark plinth Feb 5, 2024, 5:30 PM

#

ur truth)

#

so use sass with scss syntax

#How do I deal with a default theme's obfuscated css?