vite-react-stylesheet/README.md

A stylesheet component, which was created in the aim of finding a better solution to CSS in React Vite.

# StyleSheet API for React Web

This package provides a StyleSheet API for React web applications similar to React Native's StyleSheet, with additional responsive design capabilities. It allows you to create and manage styles programmatically with JavaScript, including responsive styles for different screen sizes.

## Features

- Create styles with a syntax similar to React Native's StyleSheet
- Automatically generates unique classnames for styles
- Supports responsive design with predefined breakpoints
- Compose multiple styles together
- Convert JavaScript style objects to proper CSS rules
- Handles camelCase to kebab-case conversion automatically

## Usage

### Basic Usage

```javascript
import StyleSheet from 'react-web-stylesheet';

// Create styles
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 16,
  },
  button: {
    backgroundColor: 'blue',
    color: 'white',
    padding: 10,
    borderRadius: 5,
  }
});

// Use in your component
function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World</h1>
      <button className={styles.button}>Click Me</button>
    </div>
  );
}
```

### Responsive Styles

```javascript
// Method 1: Using breakpoint syntax
const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#f5f5f5',
    '@md': {
      padding: 24,
      backgroundColor: '#e0e0e0',
    },
    '@lg': {
      padding: 32,
      backgroundColor: '#d0d0d0',
    }
  }
});

// Method 2: Using createResponsive
const baseStyles = {
  container: {
    padding: 16,
    backgroundColor: '#f5f5f5',
  }
};

const mediaStyles = {
  md: {
    container: {
      padding: 24,
      backgroundColor: '#e0e0e0',
    }
  },
  lg: {
    container: {
      padding: 32,
      backgroundColor: '#d0d0d0',
    }
  }
};

const styles = StyleSheet.createResponsive(baseStyles, mediaStyles);
```

### Custom Media Queries

```javascript
const styles = StyleSheet.create({
  container: {
    padding: 16,
    media: {
      '(prefers-color-scheme: dark)': {
        backgroundColor: '#333',
        color: 'white',
      },
      '(orientation: landscape)': {
        flexDirection: 'row',
      }
    }
  }
});
```

### Composing Styles

```javascript
import StyleSheet from 'react-web-stylesheet';

const styles = StyleSheet.create({
  base: {
    padding: 10,
    margin: 5,
  },
  primary: {
    backgroundColor: 'blue',
    color: 'white',
  },
  secondary: {
    backgroundColor: 'gray',
    color: 'black',
  },
  large: {
    padding: 20,
    fontSize: 18,
  }
});

function Button({ type, size, disabled }) {
  const className = StyleSheet.compose(
    styles.base,
    type === 'primary' ? styles.primary : styles.secondary,
    size === 'large' && styles.large,
    { [styles.disabled]: disabled }
  );
  
  return <button className={className}>Click Me</button>;
}
```

## API Reference

### StyleSheet.breakpoints

Predefined breakpoints for responsive design:

```javascript
{
  sm: 576,  // Small devices
  md: 768,  // Medium devices
  lg: 992,  // Large devices
  xl: 1200, // Extra large devices
  xxl: 1400 // Extra extra large devices
}
```

### StyleSheet.create(styles)

Creates a style sheet object from a JavaScript object.

- **styles**: An object with style definitions
- **Returns**: An object with generated class names

### StyleSheet.createResponsive(baseStyles, mediaStyles)

Creates a responsive style sheet from base styles and breakpoint-specific styles.

- **baseStyles**: An object with base style definitions
- **mediaStyles**: An object with breakpoint-specific style overrides
- **Returns**: An object with generated class names

### StyleSheet.compose(...args)

Combines multiple styles into a single className string.

- **args**: Any number of style objects, class names, or conditional expressions
- **Returns**: A space-separated string of class names

### StyleSheet.toCSSRules(styles)

Converts a JavaScript style object to CSS rules.

- **styles**: A JavaScript style object
- **Returns**: An object with CSS property names and values