htmlconv 0.1.0
A tool to convert HTML to Twig and CSS to SCSS
License: MIT
Requires Python: >=3.6

# Twig-SCSS-Toolkit

A Python toolkit for converting HTML to Twig templates and CSS to SCSS with variable mapping. This package provides both a command-line interface and a Python API for easy integration into your workflow.

## Features

- Convert HTML files to Twig templates with automatic variable generation
- Convert CSS files to SCSS using existing SCSS variable definitions
- Support for preserving comments in CSS/SCSS files
- Command-line interface for easy usage
- Python API for integration into other projects

## Installation

Install the package using pip:

```bash
pip install twig-scss-toolkit
```

## Usage

### Command Line Interface

#### Converting HTML to Twig

```bash
twig-convert html2twig input.html output.twig
```

#### Converting CSS to SCSS

```bash
twig-convert css2scss input.css variables.scss output.scss
```

### Python API

#### HTML to Twig Conversion

```python
from twig_scss_toolkit import convert_html_to_twig

# Read your HTML content
html_content = """
<div class="container">
    <h1>Hello World</h1>
    <p class="description">This is a test</p>
</div>
"""

# Convert to Twig
twig_content = convert_html_to_twig(html_content)
```

#### CSS to SCSS Conversion

```python
from twig_scss_toolkit import convert_css_to_scss, parse_variable_file

# Your SCSS variables
variables_content = """
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: $primary-color;
"""

# Your CSS content
css_content = """
.button {
    background-color: #007bff;
    color: #ffffff;
}
"""

# Convert to SCSS
variables = parse_variable_file(variables_content)
scss_content = convert_css_to_scss(css_content, variables)
```

## Example Conversions

### HTML to Twig

Input HTML:
```html
<div class="hero">
    <h1>Welcome</h1>
    <p>This is a sample text</p>
</div>
```

Output Twig:
```twig
<!-- `{{ div_content }}`: Content for <div> -->
<!-- `{{ h1_content }}`: Content for <h1> -->
<!-- `{{ p_content }}`: Content for <p> -->

<div class="{{ class_div }}">
    <h1>{{ h1_content }}</h1>
    <p>{{ p_content }}</p>
</div>
```

### CSS to SCSS

SCSS Variables:
```scss
$primary: #007bff;
$text-color: #333333;
$link-color: $primary;
```

Input CSS:
```css
.button {
    background-color: #007bff;
    color: #333333;
}

.link {
    color: #007bff;
}
```

Output SCSS:
```scss
.button {
    background-color: $primary;
    color: $text-color;
}

.link {
    color: $link-color;
}
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Support

If you encounter any problems or have any suggestions, please open an issue on the GitHub repository.