@strato-css/solid

Solid.js integration for Strato CSS framework. provides utilities and directives for using Strato CSS in Solid applications.

Installation

pnpm add @strato-css/solid

Usage

useStrato Hook

Generate CSS classes dynamically in Solid components.

import { useStrato } from '@strato-css/solid';

function Component() {
  const classes = useStrato('p-4 bg-white rounded');

  return <div class={classes()}>Hello Strato CSS!</div>;
}

Dynamic utilities:

import { useStrato } from '@strato-css/solid';
import { createSignal } from 'solid-js';

function Button() {
  const [isActive, setIsActive] = createSignal(false);

  const classes = useStrato(() => [
    'px-4 py-2 rounded',
    isActive() ? 'bg-primary text-white' : 'bg-gray-200'
  ]);

  return (
    <button
      class={classes()}
      onClick={() => setIsActive(!isActive())}
    >
      Click me
    </button>
  );
}

strato Directive

Apply utilities using Solid's use: directive syntax.

import { strato } from '@strato-css/solid';

function Component() {
  return <div use:strato="p-4 bg-white rounded">Content</div>;
}

Examples

Dynamic Button

import { useStrato } from '@strato-css/solid';
import { createSignal } from 'solid-js';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

export function Button(props: ButtonProps) {
  const [variant, setVariant] = createSignal(props.variant || 'primary');
  const [size, setSize] = createSignal(props.size || 'md');

  const classes = 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'
  ]);

  return (
    <button class={classes()}>
      {props.children}
    </button>
  );
}

Card Component

import { useStrato } from '@strato-css/solid';

interface CardProps {
  title: string;
}

export function Card(props: CardProps) {
  const classes = useStrato('bg-white rounded-lg shadow-md p-6');

  return (
    <div class={classes()}>
      <h2 class="text-xl font-bold mb-2">{props.title}</h2>
      {props.children}
    </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