Example usage with Astro? #15

digoburigo · 2024-01-28T14:41:59Z

digoburigo
Jan 28, 2024

Hello. I would like to know if its possible to use this with the Astro framework?

AceroM · 2024-03-03T01:45:45Z

AceroM
Mar 3, 2024

Using the is:inline directive (https://docs.astro.build/en/reference/directives-reference/#isinline) should work after importing the script.

example:

<div>
  <style is:inline>
    me {
      background-color: red;
    }
  </style>
...
</div>

0 replies

AceroM · 2024-03-06T21:11:32Z

AceroM
Mar 6, 2024

One more change you need to do is adding this in your <head> so that you can avoid FOUC

    <script
      is:inline
      src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline/script.js"
    ></script>

the is:inline property is important to opt out of astro's script processing. I can make a PR to add to the README?

0 replies

gnat · 2024-03-06T21:47:23Z

gnat
Mar 6, 2024
Maintainer

Gonna convert this to a discussion as it may be an ongoing thing. Kudos @AceroM for your insight as a fellow Astro user 👍 Could add a very short note about it in the Technical FAQ- but I'd generally like to avoid adding content that applies to only one framework.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example usage with Astro? #15

{{title}}

Replies: 3 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Example usage with Astro? #15

digoburigo Jan 28, 2024

Replies: 3 comments

AceroM Mar 3, 2024

AceroM Mar 6, 2024

gnat Mar 6, 2024 Maintainer

digoburigo
Jan 28, 2024

AceroM
Mar 3, 2024

AceroM
Mar 6, 2024

gnat
Mar 6, 2024
Maintainer