How to inline CSS?

[muuvmuuv]

Is your feature request related to a problem? Please describe.

I want the CSS to be included in the HTML inline but inline: true does not work with Vite.

Describe the solution you would like

A clear and concise description of what you would like to have happen.

Describe alternatives you have considered

A clear and concise description of any alternative solutions or features you have considered.

Additional context

import vue from "@vitejs/plugin-vue"
import path from "path"
import critical from "rollup-plugin-critical"
import { defineConfig } from "vite"
import { chunkSplitPlugin } from "vite-plugin-chunk-split"
import { ViteCspPlugin } from "vite-plugin-csp"
import { createHtmlPlugin } from "vite-plugin-html"
import viteImagemin from "vite-plugin-imagemin"

import { version } from "./package.json"

export default defineConfig({
  plugins: [
    vue(),
    viteImagemin(),
    chunkSplitPlugin({
      customSplitting: {
        fortawesome: [/@fortawesome\/.*/],
        fontsource: [/@fontsource\/.*/],
      },
    }),
    ViteCspPlugin({
      onDev: "full",
    }),
    createHtmlPlugin({
      minify: process.env.NODE_ENV === "production",
    }),
    critical({
      criticalUrl: "xxxxxxx",
      criticalBase: "dist",
      criticalPages: [{ uri: "", template: "index" }],
      criticalConfig: {
        strict: true,
        inline: true,
      },
    }),
  ],
  define: {
    __VERSION__: JSON.stringify(version),
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
})

[eidens-design]

Have you worked this out, yet? I am trying to achieve the same thing.

[muuvmuuv]

@eidens-design no, unfortunately not...

[matthiasott]

Hey everyone! I have a fix for this ready which I also successfully tested in an Eleventy+Vite project I am working on – should I go ahead and create a PR or would you like to discuss/review the solution first, @khalwat? It basically just checks if the inline option is set to true and if so, the target will be HTML instead of CSS: Comparing nystudio107:master with matthiasott:inline-support-fix

[khalwat]

Go ahead and create the PR @matthiasott -- much appreciated!

[anon36]

@matthiasott Do you have a working example by any chance?

[matthiasott]

@anon36 Yes, I included this plugin in my Eleventy Plus Vite starter project: https://github.com/matthiasott/eleventy-plus-vite

In this project, the Nunjucks templates are compiled into HTML and Vite+Rollup do the post processing, including inlining the Critical CSS. Have a look into the .eleventy.js file, for example: https://github.com/matthiasott/eleventy-plus-vite/blob/main/.eleventy.js

In case you want to try it yourself, please be aware that there is currently an issue when using the eleventy-plugin-vite plugin with Eleventy 2.0 canary.12. I’d suggest you downgrade Eleventy to canary.11 after running npm install. You can do that with npm install @11ty/eleventy@2.0.0-canary.11.

[anon36]

Thank you very much :)

[khalwat]

I'm planning to do the PR merge & QA on this tomorrow!

[khalwat]

Sorry for the delay; I added tests and published it as 1.0.9:

https://github.com/nystudio107/rollup-plugin-critical/releases/tag/1.0.9

[khalwat]

thx for the PR @matthiasott !

[matthiasott]

🙌 Anytime!