Multiple Instances of Same CSS Block

abelljs / abell

A Low-Level, Framework Agnostic, Highly Flexible Static-Site-Generator to help you build Static Sites on a smaller learning curve 🌀

https://abelljs.org

MIT License

420 stars 36 forks source link

Multiple Instances of Same CSS Block #147

Open saurabhdaware opened 2 years ago

saurabhdaware commented 2 years ago

Describe the bug

While using a component, if you reuse the component multiple times, it is currently adding inlined CSS of that component multiple times as well

To Reproduce

Create a component
Import it and call it multiple times

Expected behavior

I feel we should add it to a separate CSS file and import the css file.

Screenshots

Specs:

Abell Version:
Node Version:
Operating System:

Additional context

saurabhdaware commented 2 years ago

We'll have to stop appending the css inlined to components and instead extract some sort of css-stats.json file that has css related to a file.

Then we can have some function like collectCSS (similar to stitches, styled-components, and any other css-in-js library) and then generate a css file based on that.