Styles Build

A React styling library that helps you organize your CSS with a styled-components-like API.

Installation

npm i styles-build@latest

yarn add styles-build@latest

pnpm add styles-build@latest

Features

• 🎨 Styled components with clean syntax
• ✨ Animation support out of the box
• 🔄 Dynamic styles with props
• 📦 TypeScript support
• 🎯 Zero dependencies

Basic Usage

JavaScript Example

import { styled } from 'styles-build';

// Simple styled component
const Button = styled('button')({
  styles: `
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
  `
});

// With animations
const AnimatedButton = styled('button')({
  styles: `
    background-color: purple;
    color: white;
    padding: 10px 20px;
  `,
  animation: {
    animationStyle: `
      @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      }
    `,
    duration: '1s',
    infinite: true
  }
});

// Dynamic styles with props
const DynamicButton = styled('button')({
  styles: (props) => `
    background-color: ${props.primary ? 'blue' : 'gray'};
    color: white;
  `
});

TypeScript Example

import { styled } from 'styles-build';

interface StyledProps {
  primary?: boolean;
}

const Button = styled('button')<StyledProps>({
  styles: `
    background-color: ${(props) => props.primary ? 'blue' : 'gray'};
    color: white;
    padding: 10px 20px;
  `
});

const AnimatedHeading = styled('h1')({
  animation: {
    duration: '2s',
    timingFunction: 'ease-in-out',
    infinite: true,
    animationStyle: `
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }
    `
  },
  styles: `
    color: #333;
    font-size: 2rem;
  `
});

Animation Options

{
  animationStyle: string;      // @keyframes definition
  duration?: string;           // Default: '2s'
  timingFunction?: string;     // Default: 'linear'
  delay?: string;             // Default: '0s'
  infinite?: boolean;         // Default: false
  iterationCount?: number;    // Default: 1
}