withastro/astro

`is:inline` with `scss` doesn't compile into `css`

pioupia opened this issue · 3 comments

pioupia commented

What version of astro are you using?

2.0.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Linux

Describe the Bug

First of all, I am unable to know if this is a feature or a bug, the expected behavior was not described in the documentation.

The problem is very simple:
When you use the is:global attribute with the scss language, your code compiles nicely into css before being used in the HTML page.

But, when you change your attribute to is:inline, and you stay in SCSS, the compilation will not be done, and only the SCSS code will be sent to the user.

For example, the following code:

<style is:global lang="scss">
    .test {
        text-decoration: none;

        &:hover {
            text-decoration: underline 2px blue;
        }
    }
</style>

Will produce:

<style type="text/css" data-vite-dev-id="/home/pioupia/beautiful_path/Projects.astro?astro&amp;type=style&amp;index=0&amp;lang.css">.test {
  text-decoration: none;
}
.test:hover {
  text-decoration: underline 2px blue;
}
</style>

But, by only changing the attribute to is:inline :

<style is:inline lang="scss">
    .test {
        text-decoration: none;

        &:hover {
            text-decoration: underline 2px blue;
        }
    }
</style>

It will produce:

<style lang="scss">
    .test {
        text-decoration: none;

        &:hover {
            text-decoration: underline 2px blue;
        }
    }
</style>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gq8hjm?file=src/pages/index.astro

Participation

  • I am willing to submit a pull request for this issue.
y-nk commented

I think it's supposed to be? Basically is:inline means "we copy/paste that tag into your page without touching it".

https://docs.astro.build/en/reference/directives-reference/#isinline

is:inline

By default, Astro will process, optimize, and bundle any <script> and <style> tags that it sees on the page. You can opt-out of this behavior with the is:inline directive.

is:inline tells Astro to leave the <script> or <style> tag as-is in the final output HTML. The contents will not be processed, optimized, or bundled. This limits some Astro features, like importing an npm package or using a compile-to-CSS language like Sass.

pioupia commented

Oh thank you! Sorry, I didn't see that before. In any case, you could use the method presented here: https://docs.astro.build/en/guides/styling/#raw-css-imports

But I expected the SCSS code to be processed. I mean, it made sense to me, but in the end it was explained in the documentation...

I apologize for the inconvenience caused by this unnecessary issue...

simonwiles commented

It kinda sucks, though. I want my styles to be inlined and I want what I write to be processed by postcss, autoprefixer etc. While I'm grumbling into the void on a closed issue, I also want to be able to use define:vars without having to forego css processing -- the rationale provided at https://docs.astro.build/en/reference/directives-reference/#definevars:

This is because when Astro bundles a script, it includes and runs the script once even if you include the component containing the script multiple times on one page. define:vars requires a script to rerun with each set of values, so Astro creates an inline script instead.

makes no sense for <style/> tags.

  • 👀3