@strato-css/svelte

Svelte integration for Strato CSS framework. Provides utilities and actions for using Strato CSS in Svelte applications.

Installation

pnpm add @strato-css/svelte

Usage

strato Action

Use the strato action to apply utilities dynamically:

<script>
  import { strato } from '@strato-css/svelte';

  let utilities = 'p-4 bg-white rounded';
</script>

<div use:strato={utilities}>Hello Strato CSS!</div>

Dynamic utilities:

<script>
  import { strato } from '@strato-css/svelte';

  let isActive = false;
  $: classes = isActive ? 'bg-primary text-white' : 'bg-gray-200';
</script>

<div use:strato={classes}>Dynamic classes</div>

useStrato Function

Generate utilities programmatically:

<script>
  import { useStrato } from '@strato-css/svelte';

  const classes = useStrato('p-4 bg-white rounded');
</script>

<div class={classes}>Content</div>

Examples

Button Component

<script lang="ts">
  import { useStrato } from '@strato-css/svelte';

  export let variant: 'primary' | 'secondary' = 'primary';
  export let size: 'sm' | 'md' | 'lg' = 'md';

  $: buttonClasses = useStrato([
    'px-4 py-2 rounded font-semibold transition',
    variant === 'primary' && 'bg-primary text-white hover:bg-primary-600',
    variant === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    size === 'sm' && 'text-sm px-3 py-1',
    size === 'lg' && 'text-lg px-6 py-3'
  ].filter(Boolean));
</script>

<button class={buttonClasses}>
  <slot />
</button>

Dynamic Card

<script lang="ts">
  import { strato } from '@strato-css/svelte';

  export let title: string;
  export let isHovered = false;

  let cardElement: HTMLDivElement;

  $: cardClasses = [
    'bg-white rounded-lg shadow-md p-6 transition',
    isHovered && 'shadow-lg scale-105'
  ].join(' ');

  // Apply classes when cardClasses changes
  $: if (cardElement) {
    cardElement.className = cardClasses;
  }
</script>

<div bind:this={cardElement}>
  <h2 class="text-xl font-bold mb-2">{title}</h2>
  <slot />
</div>

Development

Testing

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

Build

# Build the package
pnpm build

# Build in watch mode
pnpm dev

Type Checking

# Run TypeScript type checking
pnpm typecheck

License

MIT