Remove :global()

README.md

@@ -249,3 +249,57 @@ It will produce
 
 `Return to Home`  
 `Return back`
+
+## Understand Astro's scoped CSS
+
+By default, everything is scoped to the current custom component. This mean you can't style a custom child component.
+If you do want to style a custom child component, there are two ways:
+
+- Using :global()
+- Passing a class to the child component
+
+Passing a class will enable two things on one element of the child component (typically the root element):
+
+- It will now have the class
+- It will also have the parent component CID (Astro's Scope-CSS ID)
+
+### Example
+
+We have two components:
+
+```html
+// Component A
+
+<div data-astro-cid-hnifvupa>
+  <p>This is Component A</p>
+  <ComponentB />
+</div>
+
+// Component B
+
+<div data-astro-cid-ywfdi5qi>
+  <p>This is Component B</p>
+</div>
+```
+
+Now if Component A pass a class "test" to Component B:
+
+```html
+<div data-astro-cid-hnifvupa>
+  <p>This is Component A</p>
+  <ComponentB class="test" />
+</div>
+```
+
+The resulting Component B will be:
+
+```
+<div class="test" data-astro-cid-hnifvupa data-astro-cid-ywfdi5qi>
+  <p>This is Component B</p>
+</div>
+```
+
+Things to consider:
+
+- The root element of Component B (the one where we applied the CID) is now in the scope of Component A's CSS.
+- The opposite isn't true: Component B's scoped CSS cannot affect Component A.

src/components/AppLayout/components/Topbar/Topbar.astro

@@ -80,10 +80,6 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
       padding: 3px; /* This way focus outline isn't cropped by overflow-x */
       gap: 8px;
       margin-left: -0.8em;
-
-      & > :global(*) {
-        flex-shrink: 0;
-      }
     }
 
     & > #toolbar {
@@ -113,16 +109,16 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
         display: flex;
         gap: 12px;
 
-        & > :global(.m-only) {
+        & > .m-only {
           display: none;
         }
 
         @media (max-width: 40rem) {
-          & > :global(.m-only) {
+          & > .m-only {
             display: flex;
           }
 
-          & > :global(.m-not) {
+          & > .m-not {
             display: none;
           }
         }

src/components/AppLayout/components/Topbar/components/CurrencySelector.astro

@@ -10,7 +10,7 @@ interface Props {
   class?: string | undefined;
 }
 
-const { withTitle, class: className } = Astro.props;
+const { withTitle, ...otherProps } = Astro.props;
 const { t } = await getI18n(Astro.locals.currentLocale);
 
 const { currentCurrency } = Astro.locals;
@@ -18,7 +18,7 @@ const { currentCurrency } = Astro.locals;
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<Tooltip trigger="click" class={className}>
+<Tooltip trigger="click" {...otherProps.class ? otherProps : {}}>
   <div id="content" slot="tooltip-content">
     {
       cache.currencies.map((id) => (

src/components/AppLayout/components/Topbar/components/LanguageSelector.astro

@@ -10,7 +10,7 @@ interface Props {
   class?: string | undefined;
 }
 
-const { withTitle, class: className } = Astro.props;
+const { withTitle, ...otherProps } = Astro.props;
 
 const { currentLocale } = Astro.locals;
 const { t } = await getI18n(currentLocale);
@@ -18,7 +18,7 @@ const { t } = await getI18n(currentLocale);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<Tooltip trigger="click" class={className}>
+<Tooltip trigger="click" {...otherProps.class ? otherProps : {}}>
   <div id="content" slot="tooltip-content">
     {
       cache.locales.map(({ id }) => (

src/components/AudioPlayer.astro

@@ -3,16 +3,18 @@ import type { EndpointAudio } from "src/shared/payload/payload-sdk";
 
 interface Props {
   audio: EndpointAudio;
+  class?: string | undefined;
 }
 
 const {
   audio: { url, mimeType },
+  ...otherProps
 } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<audio controls>
+<audio controls {...otherProps.class ? otherProps : {}}>
   <source src={url} type={mimeType} />
 </audio>
 

src/components/Card.astro

@@ -2,20 +2,28 @@
 interface Props {
   href?: string | undefined;
   disableRoundedTop?: boolean;
+  class?: string | undefined;
 }
 
-const { href, disableRoundedTop = false } = Astro.props;
+const { href, disableRoundedTop = false, class: className, ...otherProps } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 {
   href !== undefined ? (
-    <a href={href} id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+    <a
+      href={href}
+      id="card"
+      class:list={[className, { "rounded-top": !disableRoundedTop }]}
+      {...(className ? otherProps : {})}>
       <slot />
     </a>
   ) : (
-    <div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+    <div
+      id="card"
+      class:list={[className, { "rounded-top": !disableRoundedTop }]}
+      {...(className ? otherProps : {})}>
       <slot />
     </div>
   )
@@ -37,25 +45,25 @@ const { href, disableRoundedTop = false } = Astro.props;
     border: 1px solid var(--color-base-300);
     box-shadow: 0 1px 2px 0 var(--color-shadow-2);
     background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
-  }
 
-  a#card {
+    &a {
-    transition-duration: 150ms;
+      transition-duration: 150ms;
-    transition-property: border-color, box-shadow, background-color;
+      transition-property: border-color, box-shadow, background-color;
 
-    &:hover,
+      &:hover,
-    &:focus-visible {
+      &:focus-visible {
-      border-color: var(--color-base-650);
+        border-color: var(--color-base-650);
-      outline-color: var(--color-base-650);
+        outline-color: var(--color-base-650);
-      box-shadow: 0 2px 2px var(--color-shadow-2);
+        box-shadow: 0 2px 2px var(--color-shadow-2);
-      background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
+        background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
-    }
+      }
 
-    &:active {
+      &:active {
-      border-color: var(--color-base-1000);
+        border-color: var(--color-base-1000);
-      box-shadow: 0 6px 12px 2px var(--color-shadow-2);
+        box-shadow: 0 6px 12px 2px var(--color-shadow-2);
-      background-color: var(--color-elevation-2);
+        background-color: var(--color-elevation-2);
-      outline-color: var(--color-base-1000);
+        outline-color: var(--color-base-1000);
+      }
     }
   }
 </style>

src/components/Previews/GenericPreview.astro

@@ -42,83 +42,81 @@ const {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<Card href={href} disableRoundedTop={disableRoundedTop && thumbnail !== undefined}>
+<Card
-  <div id="card">
+  href={href}
+  disableRoundedTop={disableRoundedTop && thumbnail !== undefined}
+  class="generic_preview-card">
+  {
+    thumbnail && (
+      <img
+        class:list={{ "rounded-top": !disableRoundedTop }}
+        src={thumbnail.url}
+        srcset={sizesToSrcset(thumbnail.sizes)}
+        sizes={sizesForGridLayout(250, 1.15)}
+        width={thumbnail.width}
+        height={thumbnail.height}
+        loading="lazy"
+      />
+    )
+  }
+
+  <div
+    id="icon-container"
+    class:list={{ "thumbnail-alt": !thumbnail, "rounded-top": !disableRoundedTop }}
+    title={iconHoverLabel}>
+    <Icon name={icon} width={32} height={32} />
+  </div>
+
+  <div id="footer">
     {
-      thumbnail && (
+      smallTitle ? (
-        <img
+        <p class="font-l">{title}</p>
-          class:list={{ "rounded-top": !disableRoundedTop }}
+      ) : (
-          src={thumbnail.url}
+        <p>
-          srcset={sizesToSrcset(thumbnail.sizes)}
+          {pretitle && (
-          sizes={sizesForGridLayout(250, 1.15)}
+            <span id="pretitle" class="font-s">
-          width={thumbnail.width}
+              {pretitle}
-          height={thumbnail.height}
+            </span>
-          loading="lazy"
+          )}
-        />
+          <span id="title" class="font-serif font-2xl">
+            {title}
+          </span>
+          {subtitle && (
+            <span id="subtitle" class="font-serif font-m">
+              {subtitle}
+            </span>
+          )}
+        </p>
       )
     }
 
-    <div id="icon-container" class:list={{ "thumbnail-alt": !thumbnail }} title={iconHoverLabel}>
+    {
-      <Icon name={icon} width={32} height={32} />
+      attributes.length > 0 && (
-    </div>
+        <>
-
+          {subtitle && <hr />}
-    <div id="footer">
+          <div id="tags">
-      {
+            <InlineAttributes attributes={attributes} />
-        smallTitle ? (
+          </div>
-          <p class="font-l">{title}</p>
+        </>
-        ) : (
+      )
-          <p>
+    }
-            {pretitle && (
-              <span id="pretitle" class="font-s">
-                {pretitle}
-              </span>
-            )}
-            <span id="title" class="font-serif font-2xl">
-              {title}
-            </span>
-            {subtitle && (
-              <span id="subtitle" class="font-serif font-m">
-                {subtitle}
-              </span>
-            )}
-          </p>
-        )
-      }
-
-      {
-        attributes.length > 0 && (
-          <>
-            {subtitle && <hr />}
-            <div id="tags">
-              <InlineAttributes attributes={attributes} />
-            </div>
-          </>
-        )
-      }
-    </div>
   </div>
 </Card>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  :global(a > #card) {
+  .generic_preview-card {
-    & > #card > div > p > #title {
+    position: relative;
-      transition-duration: 150ms;
+    width: unset;
-      transition-property: color;
-    }
 
-    &:hover > #card > div > p {
+    &a:hover > #footer > p {
       color: var(--color-base-750);
     }
 
-    &:active > #card > div > p {
+    &a:active > #footer > p {
       color: var(--color-base-1000);
     }
-  }
-
-  #card {
-    position: relative;
 
     & > img {
       width: 100%;
@@ -140,7 +138,7 @@ const {
         display: grid;
         place-content: center;
 
-        & > :global(svg) {
+        & > svg {
           width: 64px;
           height: 64px;
         }
@@ -155,7 +153,11 @@ const {
         background-color: color-mix(in srgb, var(--color-elevation-2) 60%, transparent);
       }
 
-      border-radius: 0.7em;
+      &.rounded-top {
+        border-radius: 0.7em;
+      }
+
+      border-bottom-right-radius: 0.7em;
     }
 
     & > #footer {
@@ -165,6 +167,7 @@ const {
       gap: 1.2em;
 
       & > p {
+        transition: 150ms color;
         display: grid;
 
         & > #pretitle {

src/components/Tooltip.astro

@@ -4,12 +4,12 @@ interface Props {
   trigger?: string | undefined;
 }
 
-const { class: className, trigger } = Astro.props;
+const { trigger, ...otherProps } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<tippy-tooltip class={className} trigger={trigger}>
+<tippy-tooltip trigger={trigger} {...otherProps.class ? otherProps : {}}>
   <template><slot name="tooltip-content" /></template>
   <slot />
 </tippy-tooltip>

src/components/VideoPlayer.astro

@@ -4,16 +4,22 @@ import { formatLocale } from "src/utils/format";
 
 interface Props {
   video: EndpointVideo;
+  class?: string | undefined;
 }
 
 const {
   video: { url, thumbnail, mimeType, subtitles },
+  ...otherProps
 } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<video controls poster={thumbnail?.url} crossorigin="anonymous">
+<video
+  controls
+  poster={thumbnail?.url}
+  crossorigin="anonymous"
+  {...otherProps.class ? otherProps : {}}>
   <source src={url} type={mimeType} />
   {
     subtitles.map(({ language, url }) => (

src/pages/[locale]/_components/CategoryCard.astro

@@ -57,6 +57,16 @@ const { img, name, href } = Astro.props;
 
     border-radius: 12px;
 
+    padding: 10%;
+
+    @media (max-width: 40rem) {
+      padding: 5%;
+    }
+
+    @media (max-width: 22rem) {
+      padding: 10%;
+    }
+
     user-select: none;
     aspect-ratio: 16/9;
     width: 100%;

src/pages/[locale]/api/timeline/partial.astro

@@ -34,23 +34,21 @@ const { title, description, notes, credits } = getLocalizedMatch(translations);
 
 {" " /* TODO: To be removed when https://github.com/withastro/astro/issues/11103 is fixed */}
 <MasoTarget>
-  <Card>
+  <Card class="timeline_partial-card">
-    <div class="event">
+    <div id="content">
-      <div id="content">
+      {title && <h4 class="font-xl">{title}</h4>}
-        {title && <h4 class="font-xl">{title}</h4>}
+      {description && <RichText content={description} />}
-        {description && <RichText content={description} />}
+    </div>
-      </div>
+    <div id="bottom" class="when-js when-no-print">
-      <div id="bottom" class="when-js when-no-print">
+      <TimelineSourcesButton sources={sources} />
-        <TimelineSourcesButton sources={sources} />
+      {notes && <TimelineNote notes={notes} />}
-        {notes && <TimelineNote notes={notes} />}
+      <TimelineLanguageOverride
-        <TimelineLanguageOverride
+        availableLanguages={translations.map(({ language }) => language)}
-          availableLanguages={translations.map(({ language }) => language)}
+        currentLang={lang}
-          currentLang={lang}
+        credits={credits}
-          credits={credits}
+        getPartialUrl={(locale) =>
-          getPartialUrl={(locale) =>
+          getLocalizedUrl(`/api/timeline/partial?id=${id}&index=${index}&lang=${locale}`)}
-            getLocalizedUrl(`/api/timeline/partial?id=${id}&index=${index}&lang=${locale}`)}
+      />
-        />
-      </div>
     </div>
   </Card>
 </MasoTarget>
@@ -58,7 +56,7 @@ const { title, description, notes, credits } = getLocalizedMatch(translations);
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  .event {
+  .timeline_partial-card {
     display: flex;
     flex-direction: column;
     gap: 1em;

src/pages/[locale]/audios/[id].astro

@@ -78,7 +78,7 @@ const metaAttributes = [
     audio,
   }}>
   <div id="container">
-    <AudioPlayer audio={audio} />
+    <AudioPlayer audio={audio} class="audio_id-audio-player" />
 
     <div id="info">
       {
@@ -107,7 +107,7 @@ const metaAttributes = [
     margin-top: 6em;
     align-items: center;
 
-    > :global(audio) {
+    > .audio_id-audio-player {
       width: 100%;
     }
 

src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro

@@ -37,82 +37,87 @@ const href = (() => {
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<Card href={href}>
+<Card href={href} class="content_row-card">
-  <div id="row">
+  <div id="title">
-    <div id="title">
-      {
-        content.relationTo === Collections.GenericContents ? (
-          <p>{getLocalizedMatch(content.value.translations).name}</p>
-        ) : content.relationTo === Collections.Pages ? (
-          <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
-        ) : content.relationTo === Collections.Audios ? (
-          <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
-        ) : content.relationTo === Collections.Videos ? (
-          <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
-        ) : (
-          <ErrorMessage
-            title="Unknown content type"
-            description="Please contact website technical administrator."
-          />
-        )
-      }
-    </div>
-
-    <div id="dots"></div>
-
-    <div id="range">
-      {
-        range && (
-          <>
-            {range.type === "pageRange" ? (
-              range.start
-            ) : range.type === "timeRange" ? (
-              range.start
-            ) : range.type === "other" ? (
-              <RichText content={getLocalizedMatch(range.translations).note} />
-            ) : (
-              <ErrorMessage
-                title="Unknown range type"
-                description="Please contact website technical administrator."
-              />
-            )}
-          </>
-        )
-      }
-    </div>
-
     {
-      content.relationTo === Collections.Audios ? (
+      content.relationTo === Collections.GenericContents ? (
-        <div class="media">
+        <p>{getLocalizedMatch(content.value.translations).name}</p>
-          <AudioPlayer audio={content.value} />
+      ) : content.relationTo === Collections.Pages ? (
-        </div>
+        <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
+      ) : content.relationTo === Collections.Audios ? (
+        <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
+      ) : content.relationTo === Collections.Videos ? (
+        <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
       ) : (
-        content.relationTo === Collections.Videos && (
+        <ErrorMessage
-          <div class="media">
+          title="Unknown content type"
-            <VideoPlayer video={content.value} />
+          description="Please contact website technical administrator."
-          </div>
+        />
-        )
       )
     }
+  </div>
 
+  <div id="dots"></div>
+
+  <div id="range">
     {
-      (content.relationTo === Collections.Pages ||
+      range && (
-        content.relationTo === Collections.Audios ||
+        <>
-        content.relationTo === Collections.Videos) &&
+          {range.type === "pageRange" ? (
-        content.value.attributes.length > 0 && (
+            range.start
-          <div id="tags">
+          ) : range.type === "timeRange" ? (
-            <InlineAttributes attributes={content.value.attributes} />
+            range.start
-          </div>
+          ) : range.type === "other" ? (
-        )
+            <RichText content={getLocalizedMatch(range.translations).note} />
+          ) : (
+            <ErrorMessage
+              title="Unknown range type"
+              description="Please contact website technical administrator."
+            />
+          )}
+        </>
+      )
     }
   </div>
+
+  {
+    content.relationTo === Collections.Audios ? (
+      <div class="media">
+        <AudioPlayer audio={content.value} />
+      </div>
+    ) : (
+      content.relationTo === Collections.Videos && (
+        <div class="media">
+          <VideoPlayer video={content.value} />
+        </div>
+      )
+    )
+  }
+
+  {
+    (content.relationTo === Collections.Pages ||
+      content.relationTo === Collections.Audios ||
+      content.relationTo === Collections.Videos) &&
+      content.value.attributes.length > 0 && (
+        <div id="tags">
+          <InlineAttributes attributes={content.value.attributes} />
+        </div>
+      )
+  }
 </Card>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  :global(a > #card) {
+  .content_row-card {
-    & > #row > #title {
+    padding: 1.5em;
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 1em;
+    align-items: center;
+
+    &a > #title {
       transition-duration: 150ms;
       transition-property: text-decoration-color, color;
 
@@ -120,24 +125,15 @@ const href = (() => {
       text-decoration-color: transparent;
     }
 
-    &:hover > #row > #title {
+    &a:hover > #title {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }
 
-    &:active > #row > #title {
+    &a:active > #title {
       color: var(--color-base-1000);
       text-decoration-color: var(--color-base-1000);
     }
-  }
-
-  #row {
-    padding: 1.5em;
-
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 1em;
-    align-items: center;
 
     & > #title {
       font-variation-settings: "wght" 600;

src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro

@@ -11,6 +11,7 @@ interface Props {
   title: string;
   subtitle: string;
   href: string;
+  class?: string | undefined;
 }
 
 const {
@@ -18,12 +19,13 @@ const {
   title,
   subtitle,
   href,
+  ...otherProps
 } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<a href={href}>
+<a href={href} {...otherProps.class ? otherProps : {}}>
   <img
     src={url}
     srcset={sizesToSrcset(sizes)}

src/pages/[locale]/collectibles/[slug]/index.astro

@@ -176,6 +176,7 @@ if (price) {
           {
             gallery && (
               <ImageTile
+                class="collectibles_id-image_tile"
                 image={gallery.thumbnail}
                 title={t("collectibles.gallery.title")}
                 subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
@@ -187,6 +188,7 @@ if (price) {
           {
             scans && (
               <ImageTile
+                class="collectibles_id-image_tile"
                 image={scans.thumbnail}
                 title={t("collectibles.scans.title")}
                 subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
@@ -277,18 +279,16 @@ if (price) {
       gap: 2.5em;
       width: 100%;
 
-      > :global(a) {
+      @media (max-width: 23rem) {
-        aspect-ratio: 2 / 1;
+        > .collectibles_id-image_tile {
+          aspect-ratio: 2 / 1;
+        }
       }
 
       @media (min-width: 23rem) {
         gap: clamp(1em, 0.5em + 3vw, 2em);
         flex-direction: row;
 
-        > :global(a) {
-          aspect-ratio: 1 / 1;
-        }
-
         @media (min-width: 52rem) {
           max-width: 15rem;
           flex-direction: column;

src/pages/[locale]/index.astro

@@ -200,24 +200,8 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
         margin-bottom: 24px;
       }
 
-      & > a > :global(.section-button) {
-        margin-bottom: 24px;
-      }
-
       &#library {
         & > .grid {
-          & > :global(a) {
-            padding: 10%;
-
-            @media (max-width: 40rem) {
-              padding: 5%;
-            }
-
-            @media (max-width: 22rem) {
-              padding: 10%;
-            }
-          }
-
           @media (max-width: 40rem) {
             grid-template-columns: 1fr 1fr;
           }

src/pages/[locale]/videos/[id].astro

@@ -77,7 +77,7 @@ const metaAttributes = [
     video,
   }}>
   <div id="container">
-    <VideoPlayer video={video} />
+    <VideoPlayer class="video_id-video-player" video={video} />
 
     <div id="info">
       {
@@ -105,15 +105,15 @@ const metaAttributes = [
     gap: 6em;
     align-items: center;
 
-    > :global(video) {
-      max-height: 60vh;
-      width: auto;
-    }
-
     h1 {
       max-width: 35em;
     }
 
+    & > .video_id-video-player {
+      max-height: 60vh;
+      width: auto;
+    }
+
     & > #info {
       display: flex;
       flex-direction: column;