rebly-sections 1.2.0 → 1.3.0

package/assets/scripts/quality-gate-checks.py

@@ -5,25 +5,36 @@ import re
 
 
 def check_has_color_scheme(content, schema_json):
-    """Check if section schema includes color_scheme setting."""
+    """Check if color_scheme setting exists AND has a non-blank default."""
     if not schema_json:
         return ("WARN", "No schema to check for color_scheme")
     settings = schema_json.get("settings", [])
-    has_cs = any(s.get("type") == "color_scheme" for s in settings)
-    if has_cs:
-        return ("PASS", "color_scheme setting present")
-    return ("WARN", "Missing color_scheme setting — recommended for theme consistency")
+    cs_settings = [s for s in settings if s.get("type") == "color_scheme"]
+    if not cs_settings:
+        return ("WARN", "Missing color_scheme setting — recommended for theme consistency")
+    # Verify default is non-blank (Shopify rejects blank default)
+    for cs in cs_settings:
+        default = cs.get("default", "")
+        if not default or str(default).strip() == "":
+            return ("WARN", "color_scheme has blank/missing default — Shopify will reject upload. Set default: \"scheme-1\"")
+    return ("PASS", "color_scheme setting present with valid default")
 
 
 def check_has_font_picker(content, schema_json):
-    """Check if section schema includes at least one font_picker."""
+    """Check if font_picker exists AND is wired via font_face filter in Liquid."""
     if not schema_json:
         return ("WARN", "No schema to check for font_picker")
     settings = schema_json.get("settings", [])
-    has_fp = any(s.get("type") == "font_picker" for s in settings)
-    if has_fp:
-        return ("PASS", "font_picker setting present")
-    return ("WARN", "Missing font_picker — sections with headings should include typography control")
+    fp_settings = [s for s in settings if s.get("type") == "font_picker"]
+    if not fp_settings:
+        return ("WARN", "Missing font_picker — sections with headings should include typography control")
+    # Verify font_face filter usage (required to actually load the font)
+    if "font_face" not in content:
+        return ("WARN", "font_picker exists but font_face filter not used — font won't load. Add: {{ font_var | font_face: font_display: 'swap' }}")
+    # Verify CSS variable references the font family
+    if ".family" not in content and "font-family" not in content:
+        return ("WARN", "font_picker exists but font family not applied in CSS")
+    return ("PASS", "font_picker present and wired via font_face")
 
 
 def check_has_heading_tag(content, schema_json):
@@ -53,3 +64,20 @@ def check_no_hardcoded_colors(content, schema_json):
     if hex_colors:
         return ("WARN", f"Hardcoded colors in CSS: {', '.join(hex_colors[:5])} — use CSS variables instead")
     return ("PASS", "No hardcoded colors in CSS")
+
+
+def check_has_font_size_controls(content, schema_json):
+    """Check if section has font size range settings for typography control."""
+    if not schema_json:
+        return ("WARN", "No schema to check for font size controls")
+    settings = schema_json.get("settings", [])
+    # Check if section uses heading/text elements
+    has_headings = bool(re.search(r'<h[1-6][\s>]', content))
+    has_description = bool(re.search(r'class="[^"]*description', content))
+    if not has_headings and not has_description:
+        return ("PASS", "No text elements requiring font size controls")
+    font_size_ids = [s.get("id", "") for s in settings if s.get("type") == "range"]
+    has_heading_size = any("font_size" in sid or "heading_size" in sid for sid in font_size_ids)
+    if has_headings and not has_heading_size:
+        return ("WARN", "Missing heading font size range — merchants can't adjust heading size")
+    return ("PASS", "Font size controls present")

package/assets/scripts/quality-gate.py

@@ -39,10 +39,11 @@ QUALITY_CHECKS = [
 
 # Advisory checks (PASS/WARN) — imported from quality-gate-checks.py
 ADVISORY_CHECKS = [
-    ("has_color_scheme", "color_scheme setting present"),
-    ("has_font_picker", "font_picker setting present"),
+    ("has_color_scheme", "color_scheme setting with valid default"),
+    ("has_font_picker", "font_picker wired via font_face"),
     ("has_heading_tag", "Heading tag configurable via select"),
     ("no_hardcoded_colors", "No hardcoded hex colors in CSS"),
+    ("has_font_size_controls", "Font size range controls present"),
 ]
 
 
@@ -210,6 +211,7 @@ def run_quality_gate(filepath):
             "has_font_picker": _checks_mod.check_has_font_picker,
             "has_heading_tag": _checks_mod.check_has_heading_tag,
             "no_hardcoded_colors": _checks_mod.check_no_hardcoded_colors,
+            "has_font_size_controls": _checks_mod.check_has_font_size_controls,
         }
     for check_id, description in ADVISORY_CHECKS:
         if check_id not in advisory_fns:

package/assets/templates/generation-prompt.md

@@ -50,20 +50,42 @@ You are an expert Shopify OS2.0 theme developer. Generate production-ready secti
 <mandatory_settings>
 CONDITIONAL RULES (apply based on section content):
 - IF section has heading or subheading text settings:
-  -> MUST include font_picker for primary heading
+  -> MUST include font_picker with default "assistant_n4"
+  -> MUST wire font_picker to CSS using this exact pattern:
+     Liquid (before style tag):
+       {%- assign heading_font = section.settings.heading_font -%}
+       {{ heading_font | font_face: font_display: 'swap' }}
+     CSS variable on section root:
+       --heading-font: {{ heading_font.family }}, {{ heading_font.fallback_families }};
+     CSS on heading selector:
+       font-family: var(--heading-font);
+  -> MUST include heading_font_size (type: range, min: 16, max: 72, step: 2, unit: px, default: 40)
+  -> Wire heading_font_size as CSS variable and use in heading selector
   -> MUST include heading_tag (type: select, options: h1/h2/h3/h4) for SEO
+- IF section has body/description text settings:
+  -> MUST include body_font_size (type: range, min: 12, max: 24, step: 1, unit: px, default: 16)
+  -> Wire body_font_size as CSS variable and use in description selector
 - ALWAYS include:
-  -> color_scheme (type: color_scheme) for theme-wide color customization
+  -> color_scheme (type: color_scheme) — MUST have "default": "scheme-1" (Shopify rejects blank default)
   -> padding_top + padding_bottom (type: range, 0-100px, step 4)
   -> All colors via CSS custom properties, NEVER hardcoded hex
 - IF section has CTA button:
   -> Button settings: button_label, button_link, button_style
+
+SHOPIFY SCHEMA VALIDATION RULES (violations cause upload failure):
+- color_scheme: MUST have non-blank "default" value (e.g., "scheme-1")
+- font_picker: MUST have "default" in format "family_style" (e.g., "assistant_n4")
+- range: MUST have min, max, step, unit, and default
+- select: MUST have non-empty options array, each with value + label
+- All non-display settings (except header/paragraph) MUST have "label"
 </mandatory_settings>
 
 <pre_output_checklist>
 Before writing code, verify your plan includes ALL:
-- color_scheme setting in schema
-- font_picker for heading text (if section has headings)
+- color_scheme setting with "default": "scheme-1" (REQUIRED — blank default causes Shopify upload error)
+- font_picker for heading text with font_face filter + CSS variable wiring (if section has headings)
+- heading_font_size range setting wired to CSS variable (if section has headings)
+- body_font_size range setting wired to CSS variable (if section has body text)
 - heading_tag select (h1/h2/h3/h4) (if section has headings)
 - Padding/margin controls
 - presets array with at least one preset

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebly-sections",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Shopify section AI coding skill installer for Claude Code and Antigravity Kit",
   "author": "Rebly Sections",
   "homepage": "https://github.com/rebly-sections/sections-ai#readme",