# CSS Class Name Normalization & Layout Improvements
## Problem Fixed
The original generated HTML had **invalid CSS class names** containing colons (`:`) which don't work in CSS selectors. For example:
- ❌ `.text-2166:5847` (invalid)
- ✅ `.text-2166-5847` (valid)
Additionally, the layout was broken because Figma uses absolute positioning, but we weren't applying any positioning styles.
## Changes Made
### 1. **Class Name Normalization**
Added `normalizeClassName()` function that replaces invalid characters:
- Colons (`:`) → Dashes (`-`)
- Semicolons (`;`) → Dashes (`-`)
- Periods (`.`) → Dashes (`-`)
```typescript
function normalizeClassName(id: string): string {
return id.replace(/:/g, '-').replace(/;/g, '-').replace(/\./g, '-');
}
```
### 2. **Improved CSS Generation**
Enhanced the `generateCSS()` function to include:
**Layout & Positioning:**
- Added `position: relative` to containers (FRAME, GROUP, COMPONENT)
- Added padding (`10px`) to frames with children
- Added bottom margin (`20px`) for better spacing
**Typography Improvements:**
- Added `line-height` calculation (default 1.2x font size)
- Added `white-space: pre-wrap` for proper text wrapping
- Added `word-wrap: break-word` for long words
**Visual Polish:**
- Rounded dimensions (using `Math.round()`)
- Check for visibility flags (`visible !== false`)
- Check for alpha transparency (`a > 0`)
- Only apply `border-radius` when greater than 0
**Better CSS Reset:**
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
padding: 20px;
background: #f5f5f5;
}
```
### 3. **Enhanced Node Type Support**
Added proper handling for additional Figma node types:
- `VECTOR` nodes
- `INSTANCE` nodes (Figma components)
## Files Modified
1. **src/index.ts** - Main MCP server
2. **test-tool.ts** - Test script for standalone generation
## Result
✅ **Valid CSS** - All class names are now valid CSS selectors
✅ **Better Layout** - Proper positioning and spacing
✅ **Improved Typography** - Better text rendering with line-height and wrapping
✅ **Cleaner Code** - Rounded dimensions and conditional styling
✅ **Professional Look** - Better CSS reset and body styles
## Testing
Run the following to regenerate output:
```bash
npm run build
npx tsx test-tool.ts
```
Open `output.html` in a browser to see the improved layout!
