astro-scope 🔭

This Astro integration allows you to get the hash used by the astro compiler to scope css rules.

• Why astro-scope?
• Installation
• Usage
• Troubleshooting
• Contributing
• Changelog

Why astro-scope?

🤷

Installation

Manual Install

First, install the astro-scope package using your package manager. If you're using npm or aren't sure, run this in the terminal:

npm install astro-scope

Then, apply this integration to your astro.config.* file using the integrations property:

  // astro.config.mjs
  import { defineConfig } from 'astro/config';
+ import scope from 'astro-scope';

  export default defineConfig({
    // ...
    integrations: [scope()],
    //             ^^^^^^^
  });

Usage

Once the Astro scope integration is installed and added to the configuration file, you can import the scope from the "astro:scope" namespace.

---
import scope from "astro:scope"
---
<h1>{scope}</h1>

You can also import the scope into a client-side script. The scope will be the same in the frontmatter and in the script.

<script>
    import scope from "astro:scope"
    console.log(scope)
</script>
<h1>{scope}</h1>

Note that the Astro scope can only be imported inside a .astro file. Importing it into an API route, middleware or framework component will throw an error. If you need the scope of a particular astro component to be available to other components, you can pass it as a prop.

---
import scope from "astro:scope"
import Component from "./OtherComponent.jsx"
---
<Component {scope} />

Troubleshooting

For help, check out the Discussions tab on the GitHub repo.

Contributing

This package is maintained by lilnasy independently from Astro. The integration code is located at packages/scope/integration.ts. You're welcome to contribute by opening a PR or submitting an issue!

Changelog

See CHANGELOG.md for a history of changes to this integration.