Disable css inlining for one css file | Astro Lounge | Page 1

oak agate Sep 1, 2023, 2:11 PM

#

Hello, I'm building an integration for astro for my css library.
I want to include the style file to every page:

export default function LinwoodStyleIntegration(): AstroIntegration {
  return {
    name: "linwood-style-astro",
    hooks: {
      "astro:config:setup": async ({ config, updateConfig, injectScript }) => {
        injectScript(
          "page-ssr",
          `import "linwood-style-astro/base.css";`
        );
      },
    },
  };
}

The base.css file looks like this:

@import url("linwood-style-web/css/linwood_style.css");

If I build the demo project, the whole linwood_style.css will be included as inline css. How can I disable this?

arctic burrow Sep 1, 2023, 2:31 PM

#

How big is your stylesheet? Stylesheets smaller than the ViteConfig.build.assetsInlineLimit option (4kb by default) will be inlined onto the page: https://docs.astro.build/en/guides/upgrade-to/v3/#changed-default-inlinestylesheets

Astro Documentation

Upgrade to Astro v3

How to upgrade your project to the latest version of Astro (v3.0).

oak agate Sep 1, 2023, 2:32 PM

#

Not very big but it doesn't change on every page

#

When caching this css file it would be better than inlining it on every page

#

2,4 kb

arctic burrow Sep 1, 2023, 2:34 PM

#

You can use the updateConfig() option to make the build.inlineStylesheets option never

oak agate Sep 1, 2023, 2:34 PM

#

But then every stylesheet won't be inline when adding this integration?

arctic burrow Sep 1, 2023, 2:35 PM

#

Ya, AFAIK there is not a way to not inline only one file

oak agate Sep 1, 2023, 2:35 PM

#

Hmm okay...

#

Can I add a file to public and link it manually?

arctic burrow Sep 1, 2023, 2:38 PM

#

It is possible to copy files to public but there is not a built in way of doing it, most people use pre/post build CLI commands to do it

#

You could export a <Head> component that contains a link to your css file, but people would have to replace the head with your component

oak agate Sep 1, 2023, 2:38 PM

#

Hmm okay, then I just use the default inline one

#

it shouldn't be a big problem

arctic burrow Sep 1, 2023, 2:39 PM

#

Ok, let me know if you need any more help!

oak agate Sep 1, 2023, 2:39 PM

#

Yeah, maybe it can be added as a new feature? ?external?

#

or ?no-inline

arctic burrow Sep 1, 2023, 2:42 PM

#

I suggest posting in the #feedback-ideas channel where more people can see the idea (including @arshxcx who implemented the feature)

#Disable css inlining for one css file