feat: optional parent selector

Author: lucaslarroche

scss/_settings.scss

@@ -38,6 +38,11 @@ $enable-transitions: true !default;
 // Enable overriding with !important
 $enable-important: true !default;
 
+// Optional parent selector
+// If defined, all HTML tags are wrapped with this selector
+// :root is not wrapped
+$parent-selector: "" !default;
+
 // Breakpoints, viewports and root font size
 $breakpoints: () !default;
 $breakpoints: map.deep-merge(

scss/components/_accordion.scss

@@ -6,7 +6,7 @@
    * Accordion (<details>)
    */
 
-  details {
+  #{$parent-selector} details {
     display: block;
     margin-bottom: var(#{$css-var-prefix}spacing);
 
@@ -102,7 +102,7 @@
   }
 
   [dir="rtl"] {
-    details {
+    #{$parent-selector} details {
       summary {
         text-align: right;
 

scss/components/_card.scss

@@ -6,7 +6,7 @@
    * Card (<article>)
    */
 
-  article {
+  #{$parent-selector} article {
     margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
     padding: var(#{$css-var-prefix}block-spacing-vertical)
       var(#{$css-var-prefix}block-spacing-horizontal);

scss/components/_dropdown.scss

@@ -8,7 +8,7 @@
 
   // Container
   // ––––––––––––––––––––
-  details.dropdown {
+  #{$parent-selector} details.dropdown {
     position: relative;
     border-bottom: none;
 
@@ -38,15 +38,15 @@
   // Container type accordion
   // inside a nav
   // ––––––––––––––––––––
-  nav details.dropdown {
+  #{$parent-selector} nav details.dropdown {
     // Override height
     margin-bottom: 0;
   }
 
   // Bouton as a select
   // inside container type accordion
   // ––––––––––––––––––––
-  details.dropdown summary:not([role]) {
+  #{$parent-selector} details.dropdown summary:not([role]) {
     height: calc(
       1rem *
         var(#{$css-var-prefix}line-height) +
@@ -122,7 +122,7 @@
 
   // Dropdown inside a nav
   // ––––––––––––––––––––
-  nav details.dropdown {
+  #{$parent-selector} nav details.dropdown {
     display: inline;
     margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
 
@@ -146,7 +146,7 @@
 
   // Submenu
   // ––––––––––––––––––––
-  details.dropdown summary + ul {
+  #{$parent-selector} details.dropdown summary + ul {
     display: flex;
     z-index: 99;
     position: absolute;
@@ -226,14 +226,14 @@
   // Button opened
   // inside container type accordion
   // ––––––––––––––––––––
-  details.dropdown[open] summary {
+  #{$parent-selector} details.dropdown[open] summary {
     margin-bottom: 0;
   }
 
   // Menu opened
   // ––––––––––––––––––––
   // 1. Inside container type accordion
-  details.dropdown[open] summary {
+  #{$parent-selector} details.dropdown[open] summary {
     + ul {
       transform: scaleY(1);
       opacity: 1;
@@ -249,7 +249,7 @@
   // Close for dropdown
   // inside container type accordion
   // ––––––––––––––––––––
-  details.dropdown[open] summary {
+  #{$parent-selector} details.dropdown[open] summary {
     &::before {
       display: block;
       z-index: 1;
@@ -264,7 +264,7 @@
   }
   // Label
   // ––––––––––––––––––––
-  label > details.dropdown {
+  #{$parent-selector} label > details.dropdown {
     margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
   }
 }

scss/components/_group.scss

@@ -6,14 +6,14 @@
    * Group ([role="group"], [role="search"])
    */
 
-  form {
+  #{$parent-selector} form {
     &[role="search"],
     &[role="group"] {
       width: 100%;
     }
   }
 
-  [role="search"] {
+  #{$parent-selector} [role="search"] {
     > * {
       &:first-child {
         border-top-left-radius: 5rem;
@@ -27,8 +27,8 @@
     }
   }
 
-  [role="search"],
-  [role="group"] {
+  #{$parent-selector} [role="search"],
+  #{$parent-selector} [role="group"] {
     display: inline-flex;
     position: relative;
     margin-bottom: var(#{$css-var-prefix}spacing);

scss/components/_loading.scss

@@ -7,7 +7,7 @@
    */
 
   // Everything except form elements
-  [aria-busy="true"]:not(input, select, textarea, html) {
+  #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
     white-space: nowrap;
 
     &::before {
@@ -33,12 +33,12 @@
   }
 
   // Buttons and links
-  button,
-  [type="submit"],
-  [type="button"],
-  [type="reset"],
-  [role="button"],
-  a {
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [role="button"],
+  #{$parent-selector} a {
     &[aria-busy="true"] {
       pointer-events: none;
     }

scss/components/_modal.scss

@@ -10,7 +10,7 @@
     #{$css-var-prefix}scrollbar-width: 0px;
   }
 
-  dialog {
+  #{$parent-selector} dialog {
     display: flex;
     z-index: 999;
     position: fixed;

scss/components/_nav.scss

@@ -18,12 +18,12 @@
   // Pico
   // ––––––––––––––––––––
 
-  nav,
-  nav ul {
+  #{$parent-selector} nav,
+  #{$parent-selector} nav ul {
     display: flex;
   }
 
-  nav {
+  #{$parent-selector} nav {
     justify-content: space-between;
 
     ol,
@@ -118,7 +118,7 @@
   }
 
   // Vertical Nav
-  aside {
+  #{$parent-selector} aside {
     nav,
     ol,
     ul,
@@ -143,7 +143,7 @@
 
   // Breadcrumb RTL
   [dir="rtl"] {
-    nav {
+    #{$parent-selector} nav {
       &[aria-label="breadcrumb"] {
         & ul li {
           &:not(:last-child) {

scss/components/_progress.scss

@@ -13,15 +13,15 @@
 
   // 1. Add the correct display in Edge 18- and IE
   // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
-  progress {
+  #{$parent-selector} progress {
     display: inline-block; // 1
     vertical-align: baseline; // 2
   }
 
   // Pico
   // ––––––––––––––––––––
 
-  progress {
+  #{$parent-selector} progress {
     // Reset the default appearance
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -84,7 +84,7 @@
 
   [dir="rtl"] {
     @media (prefers-reduced-motion: no-preference) {
-      progress:indeterminate {
+      #{$parent-selector} progress:indeterminate {
         animation-direction: reverse;
       }
     }

scss/components/_tooltip.scss

@@ -6,7 +6,7 @@
    * Tooltip ([data-tooltip])
    */
 
-  [data-tooltip] {
+  #{$parent-selector} [data-tooltip] {
     position: relative;
 
     &:not(a, button, input) {