preserve critical inline styles (do not extract to file)

[leoj3n]

User questions/requests for feature:

Quoting discord user Anoesj:

Regarding file/line:

vite/packages/vite/src/node/plugins/html.ts

Line 292 in 2351d79

js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.js"`

One thing I can think of is that it’d be nice to add an option to preserve inline style tags with some kind of vite-preserve attribute.

// <style>...</style>
if (node.tag === 'style' && node.children.length) {
  const styleNode = node.children.pop() as TextNode
  const filePath = id.replace(normalizePath(config.root), '')
  inlineModuleIndex++
  addToHTMLProxyCache(
    config,
    filePath,
    inlineModuleIndex,
    styleNode.content
  )
  if (!node.props.some(p => p.name === 'vite-preserve')) {
      js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"`
      shouldRemove = true
  }
}

Quoting @patak-dev:

I think we should create a feature request for this. Something interesting to me is that after 2.8 we don't have a way to add CSS to the html that we want to remain there... it will always be extracted to a separate file. And I think there are use cases to avoid the waterfall for some critical styles

TODO:

• Check if other maintainers agree.
• Bikeshed on implementation...
  • An attribute in the <style> tag?
    • <style attribute> where attribute could maybe be vite-preserve, critical, keep, inline, no-extract, etc...?

[quantuminformation]

I ran into this issue today where I was adding to the existing style css in dev, but in prod I need to create a new stylesheet to add dynamic css.

[quantuminformation]

I ran into this issue today where I was adding to the existing style css in dev, but in prod I need to create a new stylesheet to add dynamic css.

[leoj3n]

Thoughts:

1. Is it possible for these non-extracted inline styles to optionally be transformed?

• For instance, if they have background image urls to assets that get hashed?

2. Would this all be useful for native custom elements?

[remixer-dec]

While this feature is not implemented, there is a workaround to keep inline styles in output html files. Just change the case of a style tag that you want to keep (for example to <STYLE>...</STYLE>)

[meduzen]

I think it’s just been fixed in today’s Vite release (2.9.7).

[Ovsdrak]

How can I preserve inline styles with an specific attribute on style tag?