renderToPipeableStream examples about used-styles HOT 16 CLOSED

And it short - that would not work.
You need to "know" which lazy components got rendered, which chunks they "require" and which chunks you need to consider using for used-styles.

I'll adjust your example to work as needed, give me some time.

from used-styles.

I really appreciate your help. I've already done this myself. Thanks for mentioning 'webpack-imported'.

I just needed to collect all my react.lazy chunk names and compare them to "ImportedStats" to determine if they were actually being used.

from used-styles.

standard TransformStream approach should be able to handle it, but I've got no proofs and I've got no example as well.

from used-styles.

@theKashey Ok thanks. But does used-styles support react 18 pipeableStream api as well? I'm having a problem importing all my styles (that aren't used there) into a specific page.
Do I understand correctly that used-styles should only pick up styles from the stream or not?
Should we control it ourselves?

from used-styles.

I've never tried. You probably should look at interleaved stream rendering configured after pipeableStream, but as I've mentioned - there is no example.

if you can create such an example - that would just great and should give me a good base to start from, and may be resolve the problem for you.

from used-styles.

It works as expected but I have another problem related to my css loader which is separating one component style from another separated by React.Lazy and the styles used are loading it, how can we avoid this using (mini-css-extract-plugin) with separated chunks? Can we fix it outside the library?

track.json is a file with ast created from the test css files.

maybe something like this:

from used-styles.

Can you clarify the problem - is it about ignoring some styles or some CSS files?
Take a look at https://github.com/theKashey/used-styles/blob/master/src/operations.ts#L29

from used-styles.

@theKashey Thanks, but no. I'm talking about something a little different. So in my project I am using the mini-css-extract plugin which splits all my CSS into different chunks. For example, I have 2 different lazy loading chunks (react components) and 1 common component that is not used in the project only in these two fragments. This way the CSS of this (shared) fragment will be split into both of my lazy components using repeating selectors.I can't use the webpack "optimizations.cacheGroups.splitChunks.styles" because my main chunk will be 3 megabytes.

So the problem is that when "used-styles" tries to find files with ".someclass" it loads them both, regardless of whether it was used on the page or not.

from used-styles.

In that case - "thanks, but yes". This is a code from a real project reducing "used styles" to the "factually used" chunks

where importAssets is import { importAssets } from "webpack-imported";

return (chunks: string[]) => {
                 // get import details for given stats and given chunks
		const files = importAssets(statsConfiguration, chunks);
                 // CSS files expected to be loaded
		const stylesToLoad = new Set(files.styles.load);

		// reduce used-styles to actually "used" ones.
		return alterProjectStyles(styleData, {
			filter(name) {
                                 // will reduce original set to contain styles only from given data
				return stylesToLoad.has(name);
			}			
		});

from used-styles.

Thank you. Perhaps I don't understand something or I lack context (sorry), but is this function compatible with createStylesStream (with processing of each chunk, the styles of which we know only after another pipe from renderToPipeableStream, without collecting the chunks before the actual renderToPipeableStream)

from used-styles.

😅🫠 no it's not. Look like you need a way to control what is in ast in a little bit dynamic way.

So:

• "how" - exactly like in the example provided by me - just "add"/"remove" some "ast nodes". Probably add as you discover new chunks as being used.
• "how" - exactly like in the example provided by you - an option to continuously control what to add

from used-styles.

Thanks a lot 🙏. I would really appreciate it if you could explain when you are using this code (during stream) and what the string[] pieces are (from where). I don't understand this concept. And as far as i see i don't have I have no way to use option 2 ("how") without adding this functionality myself (to the library)?

from used-styles.

Tell me how(when?) you track loaded chunks and I'll manage the rest.

from used-styles.

Thank you. As far as I understand, I can only track loaded chunks in the callback (if I use stream) in createStyleStream(second parameter) when "getUsedStylesIn" has already been executed for a specific chunk. Before this, I don't know what styles are used on the page.

from used-styles.

Not entirely what I've asked.

• you want to load styles only from "used chunks"
• this is possible if one "enable/disable" ast nodes for given chunks in a real-time. Something not possible right now, but we only need a direction.
• so how you can know which chunks are getting loaded?
  • different solutions use different tracking, but not all of them gives you access to this information during streaming.
  • according to the code you've shared - you have list of files you care about, that should be enough

Sounds like all required is to make configuration a little less static to let you "unblock" new chunks as they are getting used.

from used-styles.

I feel stupid now (I'm not very good at parsing and don't quite understand what "enable/disable" ast nodes means)(maybe I can read about this somewhere?). Can you please check my mini-example repo to make sure exactly what problem we are trying to solve?

https://github.com/ignatiqq/used-style-css-modules-example

please check the "/lazy" route there and note that all styles from the project are loaded by dividing the shared styles of one component into different chunks.

from used-styles.