Contributing to Transform to Tailwind CSS Core

Thank you for your interest in contributing to Transform to Tailwind CSS Core! We welcome contributions from everyone.

🚀 Getting Started

1. Fork the repository on GitHub
2. Clone your fork locally:

   git clone https://github.com/your-username/transform-to-tailwindcss-core.git
   cd transform-to-tailwindcss-core
   

3. Install dependencies:

   pnpm install
   

4. Create a new branch for your feature or bugfix:

   git checkout -b feature/your-feature-name
   

🛠️ Development

Project Structure

src/
├── index.ts                      # Main entry point
├── transformStyleToTailwindcss.ts # Core transformation function
├── toTailwindcss.ts             # CSS to Tailwind mapping logic
├── transformer.ts               # Style preprocessing
├── utils.ts                     # Utility functions
└── [property].ts                # Individual CSS property handlers

Running Tests

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests in watch mode
pnpm test --watch

Building

# Build the project
pnpm build

# Build and watch for changes
pnpm dev

Code Quality

# Lint code
pnpm lint

# Fix linting issues
pnpm lint:fix

# Format code
pnpm format

# Type checking
pnpm typecheck

# Run all checks
pnpm ci

📝 Writing Tests

We use Vitest for testing. When adding new features or fixing bugs, please include tests:

1. Create test files in the test/ directory
2. Follow the naming convention: [feature].test.ts
3. Test both successful conversions and edge cases

Example test structure:

import { describe, expect, it } from 'vitest'
import { transformStyleToTailwindcss } from '../src'

describe('feature description', () => {
  it('should convert basic styles', () => {
    const [result, unconverted] = transformStyleToTailwindcss('color: red')
    expect(result).toBe('text-red-500')
    expect(unconverted).toEqual([])
  })
})

🔧 Adding New CSS Properties

To add support for a new CSS property:

1. Create a new handler file in src/[property].ts
2. Export the handler function that matches the property
3. Import and register the handler in src/toTailwindcss.ts
4. Add comprehensive tests in test/[property].test.ts

Example handler structure:

// src/newProperty.ts
export function transformNewProperty(key: string, value: string): string {
  // Transform logic here
  return tailwindClass
}

📋 Pull Request Guidelines

Before submitting a pull request:

1. Ensure all tests pass: pnpm test
2. Run the full CI check: pnpm ci
3. Update documentation if needed
4. Add tests for new features
5. Follow commit message conventions

Commit Message Format

We follow conventional commits:

• feat: new features
• fix: bug fixes
• docs: documentation changes
• test: test additions or updates
• refactor: code refactoring
• chore: maintenance tasks

Example: feat: add support for CSS grid properties

🐛 Reporting Issues

When reporting bugs, please include:

1. Clear description of the issue
2. Steps to reproduce
3. Expected vs actual behavior
4. CSS input that caused the issue
5. Environment details (Node.js version, etc.)

💡 Feature Requests

For new features:

1. Check existing issues to avoid duplicates
2. Describe the use case clearly
3. Provide examples of desired input/output
4. Consider backward compatibility

🤝 Code of Conduct

Please be respectful and constructive in all interactions. We're here to build something great together!

📞 Getting Help

• GitHub Issues: For bugs and feature requests
• GitHub Discussions: For questions and general discussion
• Discord: Join our community (if available)

Thank you for contributing! 🎉