search

eriklharper / postcss-nested-import

@import stylesheets inside nested CSS
MIT License
17 stars 7 forks source link

Can This Replace @extend ? #17

Closed wesleyboar closed 1 year ago

wesleyboar commented 1 year ago

I use https://github.com/travco/postcss-extend, which is an old and unmaintained software.

I need a replacement. Can @nested-import serve as a replacement?

I think it can not do so without major overhead. I know everything I @extend would become @nested-import, but I would now need to import files, not pieces of files, so I would need to make as many files as I have unique instances of @extend.... right?

revelt commented 1 year ago

You're right, the imports will plunk the whole file, straight from fs.readFileSync.

On the other hand, looking pragmatically, from the KPI's, web vitals perspective, redundant CSS is the least harmful of anything redundant — JS is the evil, that one is slow and needs tree-shaken and otherwise optimised.

I know I'm being a hypocrite (having authored email-comb the unused CSS remover) =]

wesleyboar commented 1 year ago

I don't mind repeat CSS in the output. It's the tons of tiny files to maintain that would vex me.

Sidebar: @extend hoisting my code to a single selector causes me grief in my project that offers both large global stylesheets and small module stylesheets for clients, because in the large ones I fear mis-ordering of CSS and the small ones include irrelevant classes (etc.) in its selectors.

wesleyboar commented 1 year ago

So, what is a good use case for @nested-import? (Importing a stylesheet that sometimes needs to be in a different layer()?) Would a list of use cases be good for the README?

revelt commented 1 year ago

Originally, I picked postcss for my website, I don't remember what I needed this library for but probably for dark/light themes or resets or something. Eventually, I pushed it to the limit and got fed up with postcss and switched to good old SASS monolith, one file, all custom and hand-written (like back in the day). At day jobs everybody around me is using tailwind, of course.

wesleyboar commented 1 year ago

Hm, I can see the dark/light/other-a11y-type use case. Isolate the styles for each. Then load them into one stylesheet who only has one job, to output the correct styles.

I'll keep this plugin on my list of maybes. I'm still a PostCSS fanboy.