@speedkit/cli 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [4.1.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v4.0.0...v4.1.0) (2026-05-06)
+
+
+### Features
+
+* **wizard:** shopify ([f7686ce](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/f7686ce4c24fd2f4d9fa3158f465ab2454dc4959))
+
 # [4.0.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v3.43.2...v4.0.0) (2026-05-06)
 
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/4.0.0 linux-x64 node-v22.22.2
+@speedkit/cli/4.1.0 linux-x64 node-v22.22.2
 $ sk --help [COMMAND]
 USAGE
   $ sk COMMAND

package/dist/services/customer-config/templates/config_documentHandler.js.hbs

@@ -109,13 +109,22 @@ const config = {
       wrapPreRenderedElementsWithCustomRootTags(document);
       addPolyFillAfterMainPreRenderTemplate(document);
       triggerShadowRendering(document);
+      {{#if isShopify}}
+        // Shopify specific: inject scripts into sk-html which set css variables (normally set to html element)
+        injectCSSVariableScripts(document);
+      {{/if}}
       {{#if addSSRInnerShadowDomSupport}}
 
         overrideCustomElementDefine(document);
         walkPreRenderedElements(document);
       {{/if}}
     {{else}}
-      // do nothing
+      {{#if isShopify}}
+        // Shopify specific: inject script which sets css variables on the html element
+        injectCSSVariableScripts(document);
+      {{else}}
+        // do nothing
+      {{/if}}
     {{/if}}
   },
 {{#if isPlentymarkets}}
@@ -652,3 +661,81 @@ export const post = async (db, req, res) => {
     }
   {{/if}}
 {{/if}}
+{{#if isShopify}}
+
+  /**
+   * Injects scripts into sk-html within each shadow root that set CSS custom
+   * properties (e.g. --window-height, --announcement-bar-height, --header-height)
+   * on sk-html instead of the document's html element.
+   *
+   * @param document
+   */
+  function injectCSSVariableScripts(document) {
+    {{#if addSSR}}
+      const customShadowRoots = getCustomShadowElements(document);
+      for (const customShadowRoot of customShadowRoots) {
+        const skHtml = customShadowRoot.querySelector("sk-html");
+        if (!skHtml) continue;
+
+        const script = document.createElement("script");
+        script.textContent = `(${setCSSVariablesOnSkHtml.toString()})();`;
+        // insert script before #main so styles are applied earlier
+        const main = skHtml.querySelector("#main");
+        if (main) {
+          main.before(script);
+        } else {
+          skHtml.appendChild(script);
+        }
+      }
+    {{else}}
+      const script = document.createElement("script");
+      script.textContent = `(${setCSSVariablesOnHtml.toString()})();`;
+      // insert script before #main so styles are applied earlier
+      const main = document.querySelector("#main");
+      if (!main) return;
+      main.before(script);
+    {{/if}}
+  }
+
+  /**
+   * Client-side script that sets CSS custom properties on {{#if addSSR}}sk-html{{else}}the html element{{/if}}
+   * (e.g. --window-height, --announcement-bar-height, --header-height).
+   * Injected via .toString() into the document.
+   *
+   * TODO: double check whether the set CSS variables are being used by the theme
+   *  and that the queried selectors are correct for this Shopify store.
+   */
+  /* eslint-disable no-undef -- client-side function serialised via .toString() */
+  function {{#if addSSR}}setCSSVariablesOnSkHtml{{else}}setCSSVariablesOnHtml{{/if}}() {
+    {{#if addSSR}}
+      const host = document.querySelector("sk-shadow-app-root");
+      const root = host?.shadowRoot;
+      if (!root) return;
+      const skHtml = root.querySelector("sk-html");
+      if (!skHtml) return;
+    {{else}}
+      const html = document.querySelector("html");
+      if (!html) return;
+    {{/if}}
+
+    requestAnimationFrame(() => {
+      const viewportHeight = window.visualViewport ? window.visualViewport.height : document.documentElement.clientHeight;
+      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--window-height", viewportHeight + "px");
+    });
+
+    const announcementBar = {{#if addSSR}}root{{else}}document{{/if}}.querySelector('[id^="shopify-section"][id$="announcement-bar"]');
+    if (announcementBar) {
+      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--announcement-bar-height", announcementBar.clientHeight + "px");
+    }
+
+    const headerElement = {{#if addSSR}}root{{else}}document{{/if}}.querySelector('[id^="shopify-section"][id$="header"]');
+    if (headerElement) {
+      const headerHeight = headerElement.clientHeight;
+      const headerHeightWithoutBottomNav = headerElement.querySelector(".header__wrapper")?.clientHeight;
+      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--header-height", headerHeight + "px");
+      if (headerHeightWithoutBottomNav != null) {
+        {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--header-height-without-bottom-nav", headerHeightWithoutBottomNav + "px");
+      }
+    }
+  }
+{{/if}}

package/oclif.manifest.json

@@ -751,5 +751,5 @@
       ]
     }
   },
-  "version": "4.0.0"
+  "version": "4.1.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@speedkit/cli",
   "description": "Speed Kit CLI",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "author": {
     "name": "Baqend.com",
     "email": "info@baqend.com"
@@ -85,7 +85,7 @@
     "@aws-sdk/client-athena": "^3.529",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@inquirer/prompts": "^8.4.1",
+    "@inquirer/prompts": "^8.4.2",
     "@oclif/core": "^4.10.5",
     "@oclif/errors": "^1.3.6",
     "@oclif/plugin-autocomplete": "^3.2.45",
@@ -131,7 +131,7 @@
     "@types/uuid": "^9.0.8",
     "chai": "^4.4.1",
     "copyfiles": "^2.4.1",
-    "eslint": "10.2.0",
+    "eslint": "10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-unicorn": "^64.0.0",
@@ -139,9 +139,9 @@
     "husky": "^8.0.3",
     "lint-staged": "^16.4.0",
     "memfs": "^4.8.0",
-    "mocha": "^12.0.0-beta-3",
+    "mocha": "^12.0.0-beta-9.2",
     "mock-fs": "^5.5.0",
-    "nock": "^14.0.12",
+    "nock": "^14.0.13",
     "nyc": "^18.0.0",
     "oclif": "^4.23.0",
     "shx": "^0.4.0",