where is the css asset ?

[lili21]

only support js bundle ?

[th0r]

What do you want to see inside a CSS chunk?

[lili21]

just like the js chunk I guess. the size, the dependencies. don't know whether it's doable.

[ccarse]

Yeah, I also expected to see all assets that webpack emits, so fonts, images, css, html, js. That way I can get a sense of size and dependencies for all of these things.

[valscion]

If someone wants to take a stab at this, it would help a lot. Even a small sample repository using CSS assets / fonts / images what have you would be nice, as then we could discuss how would an output for such a project look like.

[iambalaam]

@valscion
I've been looking into this and would like to see if I can help on this. I've spent the day understanding how this plugin works + interacts with webpack.

I'll start working on a sample repo with multiple asset inclusion. I assume the plan would be to use that to generate a webpack stats file to write tests for?

[valscion]

I've been looking into this and would like to see if I can help on this.

Thanks!

I'll start working on a sample repo with multiple asset inclusion.

Sounds great 👍

I assume the plan would be to use that to generate a webpack stats file to write tests for?

I'm not sure how we will end up using the sample repository yet. Writing tests might not be enough, as we will also want to figure out how we'd like the output to be displayed in the generated treemap. So it might need some design iteration first before we write tests

[iambalaam]

After a bit more investigation I think we can split this up into 2 problems:

1. Singular assets (e.g. images, fonts)
2. Concatenated assets (e.g. css, js)

The first problem only requires us to find which src asset was turned into which output asset. From there it could be displayed in the visualiser in the correct chunk(s).

The second problem requires us to have this mapping for each file. For JS this is done by creating an AST from the output asset, and reverse engineering the webpack bundling process. This won't be possible for styles as they're just concatenated, and this won't let us know where they came from.

I agree this needs more design before we move forward, but I'll continue to make a helper-repo that bundles assets in different ways.

---

I've got a couple ideas of how to solve these:

1. Singular
   • We can still make progress on images / fonts
   • We can treat css as a single asset (it won't say where it came from, but better than nothing?)
2. Concatenated
   • We could offer this if people provide source maps?
   • We'd be able to find out exactly what src styles end up in the css assets
   • This might work for js too?
   • This would mean re-writing all the parsing internals 😰

[valscion]

Would be interesting to see how the output will look like once you get the helper repo in place ☺️

I'm not sure if the concatenated version would require re-writing all parsing internals ☺️ we already do support concatenated modules, but it just might need some additional work to work for CSS, too

[NarHakobyan]

any news about this amazing feature? ☺️

[iambalaam]

Quick repo here that builds scripts, images and styles.

(This has index.css importing a.css and b.css)

This shows the size of the css asset created, but doesn't show the src files inside, and this suggested feature would solve that.

I think I used 'concatenate' badly in the previous comment, and didn't mean concatenated modules. I was trying to say that the output .js files leave behind how webpack bundled them. But with css they're just concatenated and there isn't a way to tell where they came from (that I know of)

[adampatterson]

I would love to see a chunked view of my app.css

I have over 140 scss files and some of them look deceivingly simple but include a while loops so at a glance they don't look that large.

It would also help me to reduce redundant CSS being served.

[yuxizhe]

@iambalaam If you don't use MiniCssExtractPlugin, a.css and b.css will show in all.js

[adampatterson]

@yuxizhe is that CSS extracted from Javascript or processed from SCSS?