Inject CSS into final bundle

[AustinGil]

I'm trying to create a plugin that injects CSS at the end of the bundling pipeline (it relies on the contents of the JS files which is why it has to happen at the end).

As I understand, renderChunk is the right place to do this, and for the sake of a very basic example, let's say it looks like this:

export default function myPlugin () {
  return {
    name: 'my-plugin'
    renderChunk(code, chunk, options) {
      // Inject `* { color: red }` into final CSS bundle
    }
  }
}

I'm not sure how to do this. I know about emitFile but that generates a new file which is not really what I want. I'm not sure how I would tell users the name of the built file or how to incorporate it. So I'm thinking maybe there is another way?

Any pointers in the right direction would be awesome.

[Lesik]

I'd also be interested in how to do this. Perhaps it helps if I elaborate on the use case:

My plugin enables to import LaTeX formulas as svg files, so you write import equation from "./equation.tex" (and equation.tex contains f(x) = \frac{1}{x}) and then the variable equation is filled with the svg rendering of that formula (using MathJax running on Node).

But since equations often contain repeated parts (for example in the equation above, the x appears twice), MathJax optimizes by putting common portions into a sort of sprite somewhere on the page, and then using svg's <use> to reference them from the sprite.

That means that apart from having the transform function of my plugin emit the svg containing the <use> tags, I also need to inject the sprite containing all the referenced "optimized parts" of the equations. And this injection needs to happen at the very end of build time, when all the equations are already processed.

[cgatian]

Bumping this.
Curious to know how to add a file this.emitFile into the CSS bundle dynamically on buildEnd