#Astro CSS variables not working when scoped styles are opted-out using is:global

1 messages · Page 1 of 1 (latest)

steady badge
#

This is part of my code, skillColor variable is not available at the global scope eventhough the is:global directive is defined

const happy = true;
const finished = true;
const goal = 3;
const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

<BaseLayout pageTitle={pageTitle}>
  <style is:global define:vars={{ skillColor, fontWeight, textCase }}>
    h1 {
      color: var(--skillColor) !important;
      font-size: 4rem;
    }
    .skill {
      color: var(--skillColor);
      font-weight: var(--fontWeight);
      text-transform: var(--textCase);
    }
    html.dark .skill {
      color: #fff;
    }
    html.dark ul > li::before {
      color: #fff !important;
    }
  </style>
unreal shuttleBOT
#

Hi @steady badge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, I can explain why the CSS variables are not working as expected in your code. The issue is related to how the is:global directive and define:vars interact in Astro.

According to the Astro documentation on Script & Style Directives, the is:global directive makes the contents of a <style> tag apply globally on the page. However, it's important to note that when you use define:vars, it doesn't automatically imply is:inline.

The define:vars directive is used to pass variables from your component's frontmatter to the <style> tag. However, when combined with is:global, it may not behave as expected.

To solve this issue, you have a couple of options:

  1. Remove the is:global directive if you want to keep using define:vars and scope the styles to your component:
<style define:vars={{ skillColor, fontWeight, textCase }}>
  h1 {
    color: var(--skillColor) !important;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
  /* ... rest of your styles ... */
</style>
  1. If you need global styles, you can define the CSS variables in a separate <style is:global> tag and then use them in your component:
<style is:global>
  :root {
    --skillColor: navy;
    --fontWeight: bold;
    --textCase: uppercase;
  }
</style>

<style>
  h1 {
    color: var(--skillColor) !important;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
  /* ... rest of your styles ... */
</style>
#

By separating the global variable definitions from the component-specific styles, you can ensure that the variables are available globally while still applying specific styles to your component.

For more information on styling in Astro and how to use CSS variables, you can refer to the Astro Styling Guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: