Restrict PICO CSS to certain part of HTML

mrniamster commented 1 year ago

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 commented 1 year ago

@lucaslarroche Can you please look into this.

rsuurd commented 1 year ago

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.

Schermafbeelding 2023-06-22 om 13 49 40

Is there a workaround for this?

mrniamster commented 1 year ago

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

nakibrayan3 commented 1 year ago

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 commented 1 year ago

@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,

nakibrayan3 commented 1 year ago

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

cemrehancavdar commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 9 months ago

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

mrniamster commented 9 months ago

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 https://github.com/picocss/pico/issues/378#issuecomment-1912945855, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMRAYX4I76KUX6IUMIOTTM3YQRYE3AVCNFSM6AAAAAAZKDZO4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJSHE2DKOBVGU . You are receiving this because you authored the thread.Message ID: @.***>

marksteven commented 7 months ago

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

blachawk commented 2 months ago

I just figured it out that I needed $parent-selector as a variable in my pico.scss file setup in order to see this work. My scss file looks like this...

// Pico lightweight version
@use "../../node_modules/@picocss/pico/scss/index" with (
    $enable-semantic-container: true,
    $semantic-root-element: "#nffaac", 
    $parent-selector: "#nffaac", //this is making all the difference
    $enable-classes: true,
    $modules: (
        "themes/default": true,
        "content/code": false,
        "forms/input-color": false,
        "forms/input-date": false,
        "forms/input-file": false,
        "forms/input-range": false,
        "forms/input-search": false,
        "components/accordion": false,
        "components/card": false,
        "components/dropdown": false,
        "components/loading": false,
        "components/modal": false,
        "components/nav": false,
        "components/progress": false,
        "components/tooltip": true,
        "utilities/accessibility": false,
        "utilities/reduce-motion": false));

As a result, I now see the following in the browser when I inspect my form elements...

#nffaac input, #nffaac select, #nffaac textarea {...}

picocss / pico