Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support some way of inlining CSS into the HTML

See original GitHub issue

Clear and concise description of the problem

I would like some way to have a CSS file compiled by Vite end up as an inline <style> tag in the resulting .html file. But without dumping everything into the html like vite-plugin-singlefile.

I have a lightweight splash/loading screen built into my html so the user doesn’t see a blank white page while JS is loading. This needs a bit of CSS, however if this CSS is located in a separate CSS file there is an undesirable FOUC in between when the HTML for the loading screen’s and when the separate delayed network request for the loading screen’s CSS. So it’s strongly desirable to include the loading screen’s CSS inline with the loading screen HTML.

This however is not possible in Vite. In fact Vite actively does the opposite, any inline <style> styles in html get extracted out into an external stylesheet.

Suggested solution

We already have ?inline which has a similar behaviour in JS, i.e. return it raw instead of bundling it into a file. So one idea might be to make ?inline on an @import in <style> inline those styles into the <style> tag the import is present in.

<style>
@import url('./style.css?inline');
</style>

Alternative

I thought the easiest way to implement this as a plugin and tried implementing it in multiple ways. However this turned out to be absurdly difficult.

  • A pre transform plugin doesn’t get CSS compiled by the user’s postcss plugins and have to re-implement all of Vite’s CSS handling.
  • A post transform plugin doesn’t get the CSS at all, instead it gets a junk ES module so it can’t extract it.
  • Vite has no way to append a postcss plugin without overriding the user’s postcss config, so you can’t add a PostCSS that’ll extract something like @media inline { ... } either.

Additional context

No response

Validations

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:18
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

8reactions
meduzencommented, Feb 12, 2022

I face a similar issue (can it be considered the same?) where I’d like a tag <style> to remain in the end bundle, mainly because it’s embed in a SVG spritesheet, but Vite strips it from the build HTML and move it to the bundled CSS file.

Sample HTML:

<body>
    <svg style="display: none;">
        <symbol id="lock-path" viewBox="0 0 13 18" fill="currentColor">
            <!-- This 👇 is removed by Vite -->
            <style>
                .lock-path--unlocked { --locked-path: none; }
                .lock-locked-path { display: var(--locked-path, unset); }
            </style>
            <path d="M10.608 8.357h-9A1.625 1.625 0 0 0 .001 9.964s-.002 2.575 0 4.5C.003 16.42 1.611 17.998 3.537 18H8.68a3.553 3.553 0 0 0 3.535-3.536v-4.5a1.625 1.625 0 0 0-1.607-1.607Zm-3.536 4.702v2.048a.33.33 0 0 1-.321.321H5.465a.33.33 0 0 1-.321-.321v-2.048c-.699-.792-.193-2.099.964-2.136 1.143.037 1.663 1.344.964 2.136Z"/>
            <path d="M6.108 0C3.483.003 1.29 2.197 1.287 4.821v2.893h1.928V4.821c0-1.575 1.317-2.892 2.893-2.892 1.576 0 2.893 1.317 2.893 2.892 0 .17.15.322.321.322h1.286a.33.33 0 0 0 .322-.322C10.927 2.197 8.733.003 6.108 0Z"/>
            <path class="lock-locked-path" d="M9 4.8h1.93v2.91H9z"/>
        </symbol>
    </svg>
</body>

The <style> tag is moved and the end of the CSS, and I don’t want that:

.lock-path--unlocked{--locked-path:none}.lock-locked-path{display:var(--locked-path,unset)}

Maybe a solution could be to have a magic comment and/or a setting to keep inline CSS in the HTML and/or what @dantman is suggesting.

1reaction
meduzencommented, May 2, 2022

For me, Vite 2.9.7 solves the issue. Many thanks to the contributors. 🙇

Read more comments on GitHub >

github_iconTop Results From Across the Web

Inline Styles in HTML - Codecademy
When CSS is written using the style attribute, it's called an “inline style”. In general, this is not considered a best practice.
Read more >
How to Add CSS to HTML: Understanding Inline, Internal ...
There are three ways to add CSS to HTML. You can add inline CSS in a style attribute to style a single HTML...
Read more >
HTML Styles CSS - W3Schools
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements; Internal - by...
Read more >
Inline CSS Guide – How to Style an HTML Tag Directly
You've written some HTML and now need to style it with CSS. One way is to use inline styles, which is what this...
Read more >
Improve site performance by inlining your CSS - LogRocket Blog
In the case of CSS, the performance gain comes from inlining styles directly into the HTML document, eliminating the need for the browser...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Vite lossily combines `link[rel=stylesheet]` and `link[rel=stylesheet][media="(prefers-color-scheme:dark)"]`

Next page

Allow usage of sass-embedded instead of sass package