Recent searches
Search options
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.)
@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
@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) :)
@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
@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.) :)
@aral Yeah,makes sense, I'm a big fan of your approach of leaning into HTML and CSS!
