Restrict PICO CSS to certain part of HTML

[mrniamster]

Please search for duplicate or closed issues first.

Describe the issue

Currently picocss is interfering with the default devtools tools provided by frameworks like react-query.

Current Behavior

A concise description of the bug.
i previusly thought $semantic-root-element: "#root"; can do it, but it didn't
I Would like to have a variable say $parent-selector:"#___nuxt" , so i can tell picocss to apply css to that particular selector only.

Expected Behavior

A concise description of what you expected.
The devtools are getting affected

Reproduction URL

We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
Please do not link to your actual project. Instead, we need a reduced test case in a new project without any unnecessary code.

Environment

Example: OS, versions, browser details.

• Operating System: Windows_NT

• Node Version: v18.11.0

• Nuxt Version: 3.5.3

• Nitro Version: 2.4.1

• Package Manager: npm@9.6.5

• Builder: vite

• User Config: routeRules, nitro, css, vite, postcss, app, modules, content, googleSignIn, runtimeConfig

• Runtime Modules: nuxt-vue3-google-signin@0.0.8, @pinia/nuxt@0.4.11, @nuxt/devtools@0.6.1, @nuxt/content@2.7.0,
  @pinia/nuxt@0.4.11

• Build Modules: -

  "@picocss/pico": "^1.5.10",
  "@pinia/nuxt": "^0.4.11",

[mrniamster]

@lucaslarroche Can you please look into this.

[rsuurd]

I think the same applies to in my case a google maps map. The google maps library assigns a role=[button] attribute once a click listener is set, which results in the markers getting the pico style, making them blue squares.

Is there a workaround for this?

[mrniamster]

@rsuurd agreed, I had to move from PICO due to this but would really appreciate if this gets resolved

[nakibrayane]

you can import only the needed modules using scss.

check out the docs: https://picocss.com/docs/customization.html, under section Importing Pico SASS library

[mrniamster]

@nakibrayan3 But how does it solves the given requirement question of this issue, it still applies the styles to "non-required" componenets like devtools bar floating widget,

[nakibrayane]

i don't really know how to fix your problem, sorry.

[cemrehancavdar]

Restricting pico can be possible if you add all scss rules :not(pico-disable *) one by one imho and add .pico-disable to elements.
But you can also build yourself a custom pico with .pico contains all layout part in scss/pico.scss this will make pico work with .pico only. So this is a trade of but it is possible.

Result css will be:
css.zip

This is the way i use it with leaflet.

[VargoGames]

is it possible to have a div with some class applied that acts like reset.css, so that none of pico stuff is applied?

[eric1234]

I hit this as well and was able to use CSS layers to resolve the conflict.

In my case it was an Rails app and Rails has a built-in rich text component called ActionText (built on the Trix editor). The problem was that Pico was messing up the styles for the Trix editor.

Below I define a framework layer as the lowest priority and import pico into that. Then I define a higher priority components layer which I use to import the Trix and ActionText css files. This way even though Pico has some higher specificity selectors I still get the Trix styles overriding them.

@layer framework, components;

@import url('https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.10/css/pico.css') layer(framework.pico);
@import url('trix.css') layer(components.actiontext);
@import url('actiontext.css') layer(components.actiontext);

[lucaslarroche]

Pico v2 will offer a CSS version that only enables Pico styles for specified parts of your HTML code.

[mrniamster]

Thank you Lucas, i was still booking for update on this !! SHould be great

…

On Sat, Jan 27, 2024 at 9:00 AM Lucas Larroche ***@***.***> wrote: Pico v2 will offer a CSS version that only enables Pico styles for specified parts of your HTML code. — Reply to this email directly, view it on GitHub <#378 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMRAYX4I76KUX6IUMIOTTM3YQRYE3AVCNFSM6AAAAAAZKDZO4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJSHE2DKOBVGU> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[marksteven]

having same issue with Pico overriding Vidstack video player buttons. Will look into the suggestion of Pico V2