Search code examples
csssass

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

I installed Pico CSS into my npm workspace for my HTML project.

npm i -D @picocss/pico
  • My package version is such

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

  • Next, I have a sass file that I am using to initiate pico styling into my project
@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...

enter image description here

  • As you can see above, all that beautiful styling on the input element is being applied like so from _basics.scss file through Pico CSS
    input, select, textarea {....}
  • But I'm expecting it to look like this...
#nffaac input, #nffaac select, #nffaac textarea {....}

What am I missing in order to apply a parent element onto Pico CSS _basics.scss selectors?

Solution

  • Just in case anyone runs into this challenge and simply wants a parent selector around pico's styling, the following resource on conditional styling has helped me out.

    Adding that variable into my pico css setup now displays my parent id in the DOM.

    
// 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));

    I now see the following loaded...

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