rebly-sections 1.6.0 → 1.6.1

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

@@ -90,15 +90,24 @@ def check_has_responsive_visibility(content, schema_json):
 
 
 def check_has_section_dimensions(content, schema_json):
-    """Check if section has width and height dimension controls."""
+    """Check if section has width and height dimension controls.
+    Height should use section_height select (vh options), NOT a px-only range.
+    """
     if not schema_json:
         return ("WARN", "No schema to check for section dimensions")
     settings = schema_json.get("settings", [])
     setting_ids = [s.get("id", "") for s in settings]
-    required = ["section_width", "section_width_custom", "section_min_height"]
-    missing = [r for r in required if r not in setting_ids]
-    if missing:
-        return ("WARN", f"Missing section dimension settings: {', '.join(missing)} — merchants can't control section size")
+    # Width: both required
+    for req in ["section_width", "section_width_custom"]:
+        if req not in setting_ids:
+            return ("WARN", f"Missing {req} — merchants can't control section width")
+    # Height: prefer section_height (vh select), accept section_min_height for legacy
+    has_vh = "section_height" in setting_ids
+    has_px = "section_min_height" in setting_ids
+    if not has_vh and not has_px:
+        return ("WARN", "Missing section height setting — add section_height select (auto/50vh/75vh/100vh/custom) for responsive control")
+    if has_px and not has_vh:
+        return ("WARN", "section_min_height (px) is not responsive — replace with section_height select (auto/50vh/75vh/100vh/custom) + section_height_custom range (step:20)")
     return ("PASS", "Section dimension settings present")
 
 
@@ -117,3 +126,58 @@ def check_has_font_size_controls(content, schema_json):
     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")
+
+
+def check_no_overflow_clip_heading(content, schema_json):
+    """Heading selectors must not have max-height + overflow:hidden combo — causes text clipping."""
+    style_match = re.search(r'<style[^>]*>(.*?)</style>', content, re.DOTALL)
+    if not style_match:
+        return ("PASS", "No overflow clipping on heading — no style block")
+    css = style_match.group(1)
+    # Find CSS blocks whose selector contains 'heading'
+    heading_blocks = re.findall(r'[^}]*heading[^{]*\{[^}]+\}', css, re.DOTALL)
+    for block in heading_blocks:
+        has_max_height = bool(re.search(r'max-height\s*:', block))
+        has_overflow = bool(re.search(r'overflow\s*:\s*hidden', block))
+        if has_max_height and has_overflow:
+            return ("WARN", "Heading selector has max-height + overflow:hidden — will clip descenders. Remove max-height or use min-height instead.")
+    return ("PASS", "No heading overflow clipping detected")
+
+
+def check_font_applied_directly(content, schema_json):
+    """font-family must be set directly on the heading selector, not only inherited from parent."""
+    if not schema_json:
+        return ("WARN", "No schema — cannot check font-family specificity")
+    settings = schema_json.get("settings", [])
+    has_font_picker = any(s.get("type") == "font_picker" for s in settings)
+    if not has_font_picker:
+        return ("PASS", "No font_picker — font-family specificity check skipped")
+    style_match = re.search(r'<style[^>]*>(.*?)</style>', content, re.DOTALL)
+    if not style_match:
+        return ("WARN", "font_picker found but no <style> block — font not applied")
+    css = style_match.group(1)
+    # Check that a heading-class selector directly declares font-family (not just parent section)
+    has_heading_font = bool(re.search(
+        r'\.rebly-[\w-]+__heading[\w\s,]*\{[^}]*font-family', css, re.DOTALL
+    ))
+    if not has_heading_font:
+        return ("WARN", "font-family not set directly on __heading selector — theme CSS may override. Declare font-family inside .rebly-{slug}__heading { } rule.")
+    return ("PASS", "font-family applied directly on heading selector")
+
+
+def check_css_vars_in_gradients(content, schema_json):
+    """Gradient stops should use CSS custom properties, not hardcoded high opacity values."""
+    style_match = re.search(r'<style[^>]*>(.*?)</style>', content, re.DOTALL)
+    if not style_match:
+        return ("PASS", "No gradient opacity hardcode — no style block")
+    # Strip Liquid output tags before scanning
+    css_no_liquid = re.sub(r'\{\{.*?\}\}', '', style_match.group(1))
+    # Flag rgba() with literal opacity >= 0.6 that appears inside a gradient (linear/radial)
+    gradient_blocks = re.findall(r'(?:linear|radial)-gradient\([^;]+\)', css_no_liquid, re.DOTALL)
+    hardcoded = []
+    for block in gradient_blocks:
+        hits = re.findall(r'rgba\([^)]+,\s*(0\.[6-9]\d*|1\.0?)\)', block)
+        hardcoded.extend(hits)
+    if hardcoded:
+        return ("WARN", f"Gradient stops with hardcoded high opacity {hardcoded[:3]} — use calc(var(--overlay-opacity) * N) so merchant slider controls the overlay")
+    return ("PASS", "Gradient stops use CSS variables or acceptable opacity values")

package/assets/scripts/quality-gate.py

@@ -34,6 +34,7 @@ QUALITY_CHECKS = [
     ("has_section_tag", "Uses <section> HTML element"),
     ("images_lazy_load", "Non-hero images use loading='lazy'"),
     ("settings_have_labels", "All settings have label property"),
+    ("range_steps_valid", "Range settings have at most 101 steps (Shopify limit)"),
     ("text_elements_explicit_color", "Text elements have explicit color in CSS"),
     ("layout_responsive_breakpoints", "Responsive breakpoints (749px/989px) present"),
     ("layout_reduced_motion", "prefers-reduced-motion media query present"),
@@ -50,6 +51,9 @@ ADVISORY_CHECKS = [
     ("has_section_dimensions", "Section dimension settings present"),
     ("naming_rebly_prefix", "Schema name uses Rebly: prefix"),
     ("naming_bem_classes", "CSS classes follow BEM rebly-{component} convention"),
+    ("no_overflow_clip_heading", "Heading has no max-height + overflow:hidden clipping"),
+    ("font_applied_directly", "font-family set directly on heading selector"),
+    ("css_vars_in_gradients", "Gradient stops use CSS vars, not hardcoded opacity"),
 ]
 
 
@@ -145,6 +149,43 @@ def check_settings_have_labels(content):
     return True
 
 
+def check_range_steps_valid(content):
+    """Shopify hard limit: range settings must have at most 101 steps (max-min)/step <= 100.
+    Violation causes upload failure: 'step invalid. Range settings must have at most 101 steps'
+    """
+    schema = extract_schema_json(content)
+    if not schema:
+        return True  # Can't check without valid schema
+    violations = []
+    all_settings = list(schema.get("settings", []))
+    for block in schema.get("blocks", []):
+        all_settings += block.get("settings", [])
+    for s in all_settings:
+        if s.get("type") != "range":
+            continue
+        try:
+            mn = float(s.get("min", 0))
+            mx = float(s.get("max", 100))
+            st = float(s.get("step", 1))
+            if st <= 0:
+                violations.append(f"{s.get('id','?')}: step={st} must be > 0")
+                continue
+            num_steps = (mx - mn) / st
+            if num_steps > 100:
+                violations.append(
+                    f"{s.get('id','?')}: min={mn}, max={mx}, step={st} → {num_steps:.0f} steps (max 100)"
+                )
+        except (TypeError, ValueError):
+            pass
+    if violations:
+        # Print details to help developer fix it
+        import sys
+        for v in violations:
+            print(f"  ✗ Range steps violation: {v}", file=sys.stderr)
+        return False
+    return True
+
+
 def check_text_elements_explicit_color(content):
     """Verify text elements within section scope have explicit color in CSS."""
     style_match = re.search(r'<style[^>]*>(.*?)</style>', content, re.DOTALL)
@@ -228,6 +269,7 @@ CHECK_FUNCTIONS = {
     "has_section_tag": check_has_section_tag,
     "images_lazy_load": check_images_lazy_load,
     "settings_have_labels": check_settings_have_labels,
+    "range_steps_valid": check_range_steps_valid,
     "text_elements_explicit_color": check_text_elements_explicit_color,
     "layout_responsive_breakpoints": check_layout_responsive_breakpoints,
     "layout_reduced_motion": check_layout_reduced_motion,
@@ -274,6 +316,9 @@ def run_quality_gate(filepath):
             "has_font_size_controls": _checks_mod.check_has_font_size_controls,
             "has_responsive_visibility": _checks_mod.check_has_responsive_visibility,
             "has_section_dimensions": _checks_mod.check_has_section_dimensions,
+            "no_overflow_clip_heading": _checks_mod.check_no_overflow_clip_heading,
+            "font_applied_directly": _checks_mod.check_font_applied_directly,
+            "css_vars_in_gradients": _checks_mod.check_css_vars_in_gradients,
         }
     # Built-in naming convention advisory checks (always available)
     advisory_fns.update({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebly-sections",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "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",