build: hoist CSS Custom Properties from hostShadowSelector to :host

adobe · Mar 3, 2021 · 4ff6bb0 · 4ff6bb0
1 parent ab58bf9
commit 4ff6bb0
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 37 deletions.
diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css
@@ -28,7 +28,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     transition-delay: 0ms;
     pointer-events: auto;
 }
-.modal {
+:host {
     /* .spectrum-Modal */
     --spectrum-dialog-confirm-exit-animation-delay: 0ms;
     --spectrum-dialog-fullscreen-margin: 32px;

diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css
@@ -10,9 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-#button {
+:host {
     /* .spectrum-Picker */
     --spectrum-button-line-height: 1.3;
+}
+#button {
+    /* .spectrum-Picker */
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -348,7 +351,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-item-padding-xl)
     );
 }
-#button {
+:host {
     /* .spectrum-Picker */
     --spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);
     --spectrum-picker-disabled-border-size: 0;

diff --git a/packages/styles/fonts.css b/packages/styles/fonts.css
@@ -14,53 +14,33 @@ governing permissions and limitations under the License.
 
 :host,
 :root {
-    --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont,
-        'Segoe UI', Roboto, sans-serif;
-    --spectrum-font-family-base: var(--spectrum-alias-body-text-font-family);
-    --spectrum-font-family-ar: var(--spectrum-alias-font-family-ar);
-    --spectrum-font-family-he: var(--spectrum-alias-font-family-he);
-    --spectrum-font-family-zh: var(--spectrum-alias-font-family-zh);
-    --spectrum-font-family-zhhans: var(--spectrum-alias-font-family-zhhans);
-    --spectrum-font-family-ko: var(--spectrum-alias-font-family-ko);
-    --spectrum-font-family-ja: var(--spectrum-alias-font-family-ja);
-    --spectrum-font-family-han: var(--spectrum-alias-font-family-zh);
-    --spectrum-font-family-zhhant: var(--spectrum-alias-font-family-zh);
-    --spectrum-text-size: var(--spectrum-alias-font-size-default);
-    --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
-    --spectrum-text-size-text-label: var(--spectrum-label-text-size);
-    --spectrum-line-height-text-label: var(--spectrum-label-text-line-height);
-}
-:host,
-:root {
-    font-family: var(--spectrum-font-family-base);
-    font-size: var(--spectrum-text-size);
+    font-family: var(--spectrum-alias-body-text-font-family);
+    font-size: var(--spectrum-alias-font-size-default);
 }
 :host:lang(ar),
 :root:lang(ar) {
-    font-family: var(--spectrum-font-family-ar);
+    font-family: var(--spectrum-alias-font-family-ar);
 }
 :host:lang(he),
 :root:lang(he) {
-    font-family: var(--spectrum-font-family-he);
+    font-family: var(--spectrum-alias-font-family-he);
 }
 :host:lang(zh-Hans),
 :root:lang(zh-Hans) {
-    font-family: var(--spectrum-font-family-zhhans);
+    font-family: var(--spectrum-alias-font-family-zhhans);
 }
+:host:lang(zh),
 :host:lang(zh-Hant),
+:root:lang(zh),
 :root:lang(zh-Hant) {
-    font-family: var(--spectrum-font-family-zhhant);
-}
-:host:lang(zh),
-:root:lang(zh) {
-    font-family: var(--spectrum-font-family-zh);
+    font-family: var(--spectrum-alias-font-family-zh);
 }
 :host:lang(ko),
 :root:lang(ko) {
-    font-family: var(--spectrum-font-family-ko);
+    font-family: var(--spectrum-alias-font-family-ko);
 }
 :host:lang(ja),
 :root:lang(ja) {
-    font-family: var(--spectrum-font-family-ja);
+    font-family: var(--spectrum-alias-font-family-ja);
 }
 /* stylelint-enable */
diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js
@@ -151,6 +151,23 @@ class SpectrumProcessor {
             }
         });
 
+        // const customPropertyNode = result.first.clone();
+        // const hasCustomProperties = false;
+        // console.log(result.first.type);
+        // // Query declarations for variables
+        // // If variables, hope new host and insert them
+        // // insert new host after hostShadowSelectorNode
+        // customPropertyNode.walkDecls(/^(?!--)/, (decl) => {
+        //     decl.remove();
+        // });
+        // result.first.walkDecls(/^--/, (decl) => {
+        //     hasCustomProperties = true;
+        //     decl.remove();
+        // });
+        // if (hasCustomProperties) {
+        //     result.first.insertBefore(customPropertyNode);
+        // }
+
         // Map shadow DOM classes to ids
         // e.g. ".spectrum-Button-label" -> "#label"
         astTransforms.push((selector, rule) => {
@@ -536,7 +553,6 @@ class SpectrumProcessor {
                     }
                     if (skip) continue;
                 }
-
                 const transformed = selectorTransform(selector, rule);
                 if (transformed) {
                     result.push(transformed);
@@ -632,6 +648,38 @@ class SpectrumProcessor {
             return;
         }
         const convertedSelectors = this.convertSelectors(rule);
+        if (
+            convertedSelectors.length === 1 &&
+            convertedSelectors[0] === this.component.hostShadowSelector &&
+            this.component.hostShadowSelector !== ':host'
+        ) {
+            // In the case that custom property declarations are destined
+            // for `hostShadowSelector` selected rules, we need to hoise them
+            // back up to the :host so that they can be overriden from the outside
+            // To do this:
+            // - clone the rule
+            // - walk the declarations for variables
+            // - take custom properties out of the current rule
+            // - take non-custom properties out of the cloned rule
+            // - insert the cloned rule when custom properties have been found
+            const customPropertyNode = rule.clone();
+            let hasCustomProperties = false;
+            customPropertyNode.walkDecls(/^(?!--)/, (decl) => {
+                decl.remove();
+            });
+            rule.walkDecls(/^--/, (decl) => {
+                hasCustomProperties = true;
+                decl.remove();
+            });
+            if (hasCustomProperties) {
+                console.log('Apply new :host rule');
+                this.appendRule(
+                    [':host'],
+                    customPropertyNode.nodes,
+                    `${rule.selectors.join(',\n   * ')}`
+                );
+            }
+        }
         this.appendRule(
             convertedSelectors,
             rule.nodes,
@@ -647,7 +695,7 @@ class SpectrumProcessor {
      * @param {string} comment - The comment to begin the rule with
      */
     appendRule(selectors, nodes, comment) {
-        if (selectors.length === 0) return;
+        if (selectors.length === 0 || nodes.length === 0) return;
 
         const parentRule = postcss.rule({ selectors });
         this.result.root.append(parentRule);

diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js
@@ -194,14 +194,21 @@ cores.forEach(async (core) => {
 
         // fonts.css (2 sources so a little tricky)
         {
-            const srcPath1 = path.join(commonsPath, 'fonts.css');
+            // const srcPath1 = path.join(commonsPath, 'fonts.css');
             const srcPath2 = path.join(typographyPath, 'font.css');
             const dstPath = path.resolve(
                 path.join(__dirname, '..', 'packages', 'styles', 'fonts.css')
             );
             console.log(`processing fonts from commons & typography`);
             processes.push(
-                processMultiSourceCSS([srcPath1, srcPath2], dstPath, ':root ')
+                processMultiSourceCSS(
+                    [
+                        // srcPath1,
+                        srcPath2,
+                    ],
+                    dstPath,
+                    ':root '
+                )
             );
         }
     }