runjuu/html-inline-css-webpack-plugin

Can not inline multiple css

mixueXiang opened this issue · 6 comments

mixueXiang commented

When there are multiple css in the page that need to be inlined，a part of css will not be inlined。
I readed the source code in v4.ts, maybe the problem is here:

private prepareCSSStyle(data: BeforeAssetTagGenerationData) {
    data.assets.css.forEach((cssLink, index) => {
      if (this.isCurrentFileNeedsToBeInlined(cssLink)) {
        const style = this.getCSSStyle({
          cssLink,
          publicPath: data.assets.publicPath,
        })

        if (style) {
          if (this.cssStyleMap.has(data.plugin)) {
            this.cssStyleMap.get(data.plugin)!.push(style)
          } else {
            this.cssStyleMap.set(data.plugin, [style])
          }
          // prevent generate <link /> tag
          data.assets.css.splice(index, 1)
        }
      }
    })
  }

for example:
image

the element in the middle is deleted, it results in a part of css cannot be inlined.

mixueXiang commented

I want to be sure that if there is a historical reason for this code, can I pull a request to resolve this problem?

l5oo00 commented

@mixueXiang I think it is a bug.

runjuu commented

Hi @mixueXiang , Sorry for the late reply. This does seem to be a problem and I'm looking forward to your pull request! 😃

  • 😄1
mixueXiang commented

@runjuu , Thanks for your reply, I pulled a request, can you help me to review changes?

runjuu commented

Hi @mixueXiang , I've released a new version for it.

mixueXiang commented

@runjuu Thanks, new version works well.

  • 🎉1