fix: correct custom property hoisting

adobe · Apr 12, 2022 · a1d98dc · a1d98dc
1 parent f5e5e67
commit a1d98dc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css
@@ -478,7 +478,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     box-shadow: 0 0 0 var(--spectrum-picker-focus-ring-size)
         var(--spectrum-picker-focus-ring-color); /* .spectrum-Picker.focus-ring:after */
 }
-:host([quiet]) #button {
+:host([quiet]) {
     --spectrum-picker-texticon-border-size: 0; /* .spectrum-Picker--quiet */
     --spectrum-picker-texticon-border-radius: 0;
     --spectrum-picker-textonly-padding-left: 0;

diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js
@@ -663,11 +663,14 @@ class SpectrumProcessor {
         const convertedSelectors = this.convertSelectors(rule);
         if (
             convertedSelectors.length === 1 &&
-            convertedSelectors[0] === this.component.hostShadowSelector &&
-            this.component.hostShadowSelector !== ':host'
+            ((convertedSelectors[0] === this.component.hostShadowSelector &&
+                this.component.hostShadowSelector !== ':host') ||
+                convertedSelectors[0].search(
+                    this.component.hostShadowSelector
+                ) > 0)
         ) {
             // In the case that custom property declarations are destined
-            // for `hostShadowSelector` selected rules, we need to hoise them
+            // for `hostShadowSelector` selected rules, we need to hoist them
             // back up to the :host so that they can be overriden from the outside
             // To do this:
             // - clone the rule
@@ -687,8 +690,11 @@ class SpectrumProcessor {
             if (hasCustomProperties) {
                 // eslint-disable-next-line no-console
                 console.log('Apply new :host rule');
+                const newSelector = convertedSelectors[0].startsWith(':host')
+                    ? convertedSelectors[0].split(' ')[0]
+                    : ':host';
                 this.appendRule(
-                    [':host'],
+                    [newSelector],
                     customPropertyNode.nodes,
                     `${rule.selectors.join(',\n   * ')}`
                 );