Allow to disable conditionally

[ouvreboite]

Hi,

The conditional version is nice, but it does not solve one of the common problem: using a third-party tool inside a pico component. For example, displaying a GoogleMap inside a card or using agGrid inside a section.

Having a .no-pico (or .picoff) class that would stop the pico styles on the element and all its children would be very useful.

Personally, I would like to push PicoCSS for some of the internal apps where I work, but smoothly integrating with other libraries is a must.

(Maybe there is a simpler solution to this problem ?)

[dev-willis]

I've attempted to solve this problem like so:

@use "@picocss/pico/scss/pico" with (
	$parent-selector: "*:not(#no_pico_inside_this_element *) ",
);

This helps but isn't foolproof and feels hacky. I think it might work better if #533 gets resolved.

[ouvreboite]

Not yet available in Firefox, but the @scope feature could be useful.

[ouvreboite]

@dev-willis @lucaslarroche

I did a small test with @scope on Chrome:

• I took the base css file: pico.css
• Wrapped in in a @scope using two custom class as the scope root and limit: .picon enables pico while .picoff disables it
• ⚠️ pico.css contains a lot of reference to :root. This does not work in @scope, but you can simply replace all occurence of :root by :scope

@charset "UTF-8";
@scope (.picon) to (.picoff) {
  /* the base content of pico.css with all :root replaced by :scope*/
}

And voilà 🎉

You can aslo re-enable pico inside a disabled block:

<div class="picon">
  this is pico
  <div class="picoff">
    this is not pico
    <div class="picon">
      this is pico again
  </div>
</div>
</div>

⚠️ But this seems to increase the font size each time 😨 .
I suppose it's because some of the css variable use %, and the on-and-off-again behavior makes it coumpount.
(--pico-font-size: 118.75%)