SASS and atomic fusion concept

Using Neos & Flow Frontend & Integration
1

When working with the atomic fusion concept, each element also provides its own JS / .ts and CSS / .scss

As an example to explain a scenario (please ignore the practical relevance):

Each page of a website shall have its own main.min.css and abovethefold.min.css, that contain only CSS necessary to render that particular page and (for the abovethefold file) CSS of the first – let’s say – 3 components/organisms.

How do I get the SASS compiler (same for JS) to work together with Fusion in order to determine which CSS to compile for each page, depending on what atomic fusion elements are present?

Are there any examples available for this fine grained atomic fusion approach to SASS and JS?

1 Like
2

I built a small plugin some time ago for this and use it in one project and on my site. GitHub - Sebobo/Shel.CriticalCSS: Allow adding and combining inline (scoped) styles in Neos CMS

But it’s a complex topic and often not worth the effort IMO.

It only works with css. The JS part could be done with code splitting and the JS is loaded when it’s needed by a component. Most Bundlers offer that afaik and I used it once.

3

Thank you!
This is shedding some light on the matter.