semantic-root-element not being applied to input, select, textarea from forms/_basics.scss

[blachawk]

My Setup

• I have an npm project that is using picocss . I installed it like so from my terminal...

npm i -D @picocss/pico

• My package version is such

"@picocss/pico": "^2.0.6",

• I have a sass file that I am using to initiate pico styling into my project

// Pico lightweight version
@use "../../node_modules/@picocss/pico/scss/index" with (
    $enable-semantic-container: true,
    $semantic-root-element: "#nffaac",
    $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 you can see above, I have semantic-root-element in use. From my HTML project, when it builds and is displayed in the browser, the DOM loads my custom form...

<div id="nffaac">
<form>
....<input>...
</form>
</div>

But when I use Dev Tools to inspect my input element, The _basics.scss file from picoss is still only applying the following to my input element...

input, select, textarea {....}

I'm expecting it to be applied like the following but its not....

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

How can I adjust the sass logic this way a parent element is applied to the selector(s) (i.e. the above example).

[dev-willis]

Possibly related to #533

[blachawk]

I think I figurted it out, according to the docs on conditional styling, we can use $parent-selector as a variable. So I had to add it to my pico setup like so...

// 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 know see the following in the DOM when I inspect my input eleement

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