hyva-alpine-component

SKILL.md

Hyvä Alpine Component

Overview

This skill provides guidance for writing CSP-compatible Alpine.js components in Hyvä themes. Alpine CSP is a specialized Alpine.js build that operates without the unsafe-eval CSP directive, which is required for PCI-DSS 4.0 compliance on payment-related pages (mandatory from April 1, 2025).

Key principle: CSP-compatible code functions in both standard and Alpine CSP builds. Write all Alpine code using CSP patterns for future-proofing.

CSP Constraints Summary

Capability
Standard Alpine
Alpine CSP

Property reads
x-show="open"
Same

Negation
x-show="!open"
Method: x-show="isNotOpen"

Mutations
@click="open = false"
Method: @click="close"

Method args
@click="setTab('info')"
Dataset: @click="setTab" data-tab="info"

x-model
Available
Not supported - use :value + @input

Range iteration
x-for="i in 10"
Not supported