Conversation

Notices

1. Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Feb-2023 21:37:07 JST Aral Balkan

   As of the latest commit, Kitten now deduplicates/combines all styles on a page into a single style tag in the head.

   (So don’t worry about returning styles from your components which are used multiple times in the page. The styles will only be added once. Unless you‘re fetching just the component over the wire via htmx, in which case they’ll still be sent but there’s also no harm in that. I’m looking at improving component authoring further as we go.)

   https://codeberg.org/kitten/app

   #kitten #SmallWeb

   • Aral Balkan (aral@mastodon.ar.al)'s status on Wednesday, 01-Mar-2023 15:53:44 JST Aral Balkan

     in reply to

     • Niels Abildgaard

     @nielsa I should have mentioned that the idiom for components is to ensure your styles are prefixed by class names and thus scoped to the component so it shouldn’t. (A good reminder that I also need to document said idiom) :)

   • Niels Abildgaard (nielsa@mas.to)'s status on Wednesday, 01-Mar-2023 15:53:45 JST Niels Abildgaard

     in reply to

     @aral This feels like the kind of thing that may break the cascade? If two equally specific rules match an element, the order is significant. Depending on how it's done 😁

     C.f. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#cascade

   • Aral Balkan (aral@mastodon.ar.al)'s status on Wednesday, 01-Mar-2023 16:20:14 JST Aral Balkan

     in reply to

     • Niels Abildgaard

     @nielsa Thanks, Niels; very helpful. Will run some tests with scenario 1. Scenario 2 is already covered by default.

     As much as possible, I don’t want to introduce any magic or post-processing into it (not least of all because even that doesn’t cover all bases; eg., see svelte, etc., where combining local + global css is a headache) and rely on good css hygiene, knowledge of the cascade and healthy idioms.

     (And evolving as we encounter issues actually building with it.) :)

   • Niels Abildgaard (nielsa@mas.to)'s status on Wednesday, 01-Mar-2023 16:20:15 JST Niels Abildgaard

     in reply to

     @aral that makes sense!

     I see a few potential edge cases, you may have considered:

     - components with shared styling, e.g. `class="card photo-card"` (not a great example) inherits some base styling from card, and adds component specific styling. How is that done? If merged from different sources, order is important (photos-card after card in the cascade).

     - order of styling defined inside a compinent must be preserved on merge in order for component-local cascade to persist

   • Aral Balkan (aral@mastodon.ar.al)'s status on Wednesday, 01-Mar-2023 16:32:58 JST Aral Balkan

     in reply to

     • Niels Abildgaard

     @nielsa 💕

   • Niels Abildgaard (nielsa@mas.to)'s status on Wednesday, 01-Mar-2023 16:32:59 JST Niels Abildgaard

     in reply to

     @aral Yeah,makes sense, I'm a big fan of your approach of leaning into HTML and CSS!