RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
A series of images of an avatar doing a bunch of skateboard tricks.
atom@argyleink
notecss

This felt like a future of library customization, using @layer:

/* <tool-tip> styles */
@import "tool-tip.css" layer(components.tooltip);

/* later, in some-new-context.css */
@layer components.tooltip {
  .some-new-context tool-tip {
    --_bg: var(--surface-1);
    --_shadow-alpha: 15%;
  }
}

Scope the import, then append tweaks into that scope from anywhere. Safe and sound.

Rad stuff.

4 mentions #

48likes
12reposts
  • romainmenke
  • Miriam Suzanne
  • Apple Annie :prami:
  • Niklas Wolf
  • Jan Andrle
  • Roni Laukkarinen
  • Tixie Salander 💕
  • Thomas Broyer
  • GENKI
  • Abdul Fatir
  • Melanie
  • Chromium Developers
4 pingbacks

Join the conversation on

@argyleink This honestly is a gamechanger what cascade layers enable 👍😊

Niklas WolfNiklas Wolf

@argyleink @a11yMel I love this, but what of the performance impact of importing CSS files?

Ollie BoermansOllie Boermans