Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
282
demo/tools/ingest/css.py
Normal file
282
demo/tools/ingest/css.py
Normal file
@@ -0,0 +1,282 @@
|
||||
"""
|
||||
CSS Token Source
|
||||
|
||||
Extracts design tokens from CSS custom properties (CSS variables).
|
||||
Parses :root declarations and other CSS variable definitions.
|
||||
"""
|
||||
|
||||
import re
|
||||
from pathlib import Path
|
||||
from typing import List, Optional, Tuple
|
||||
from .base import DesignToken, TokenCollection, TokenSource, TokenType, TokenCategory
|
||||
|
||||
|
||||
class CSSTokenSource(TokenSource):
|
||||
"""
|
||||
Extract tokens from CSS files.
|
||||
|
||||
Parses CSS custom properties defined in :root or other selectors.
|
||||
Supports:
|
||||
- :root { --color-primary: #3B82F6; }
|
||||
- [data-theme="dark"] { --color-primary: #60A5FA; }
|
||||
- Comments as descriptions
|
||||
"""
|
||||
|
||||
@property
|
||||
def source_type(self) -> str:
|
||||
return "css"
|
||||
|
||||
async def extract(self, source: str) -> TokenCollection:
|
||||
"""
|
||||
Extract tokens from CSS file or content.
|
||||
|
||||
Args:
|
||||
source: File path or CSS content string
|
||||
|
||||
Returns:
|
||||
TokenCollection with extracted tokens
|
||||
"""
|
||||
# Determine if source is file path or content
|
||||
if self._is_file_path(source):
|
||||
file_path = Path(source)
|
||||
if not file_path.exists():
|
||||
raise FileNotFoundError(f"CSS file not found: {source}")
|
||||
content = file_path.read_text(encoding="utf-8")
|
||||
source_file = str(file_path.absolute())
|
||||
else:
|
||||
content = source
|
||||
source_file = "<inline>"
|
||||
|
||||
tokens = self._parse_css(content, source_file)
|
||||
|
||||
return TokenCollection(
|
||||
tokens=tokens,
|
||||
name=f"CSS Tokens from {Path(source_file).name if source_file != '<inline>' else 'inline'}",
|
||||
sources=[self._create_source_id(source_file)],
|
||||
)
|
||||
|
||||
def _is_file_path(self, source: str) -> bool:
|
||||
"""Check if source looks like a file path."""
|
||||
# If it contains CSS syntax, it's content
|
||||
if '{' in source or ':' in source and ';' in source:
|
||||
return False
|
||||
# If it ends with .css, it's a file
|
||||
if source.endswith('.css'):
|
||||
return True
|
||||
# If path exists, it's a file
|
||||
return Path(source).exists()
|
||||
|
||||
def _parse_css(self, content: str, source_file: str) -> List[DesignToken]:
|
||||
"""Parse CSS content and extract custom properties."""
|
||||
tokens = []
|
||||
|
||||
# Track line numbers
|
||||
lines = content.split('\n')
|
||||
line_map = self._build_line_map(content)
|
||||
|
||||
# Find all CSS variable declarations
|
||||
# Pattern matches: --var-name: value;
|
||||
var_pattern = re.compile(
|
||||
r'(\/\*[^*]*\*\/\s*)?' # Optional preceding comment
|
||||
r'(--[\w-]+)\s*:\s*' # Variable name
|
||||
r'([^;]+);', # Value
|
||||
re.MULTILINE
|
||||
)
|
||||
|
||||
# Find variables in all rule blocks
|
||||
for match in var_pattern.finditer(content):
|
||||
comment = match.group(1)
|
||||
var_name = match.group(2)
|
||||
var_value = match.group(3).strip()
|
||||
|
||||
# Get line number
|
||||
pos = match.start()
|
||||
line_num = self._get_line_number(pos, line_map)
|
||||
|
||||
# Extract description from comment
|
||||
description = ""
|
||||
if comment:
|
||||
description = self._clean_comment(comment)
|
||||
|
||||
# Get context (selector)
|
||||
context = self._get_selector_context(content, pos)
|
||||
|
||||
# Create token
|
||||
token = DesignToken(
|
||||
name=self._normalize_var_name(var_name),
|
||||
value=var_value,
|
||||
description=description,
|
||||
source=self._create_source_id(source_file, line_num),
|
||||
source_file=source_file,
|
||||
source_line=line_num,
|
||||
original_name=var_name,
|
||||
original_value=var_value,
|
||||
)
|
||||
|
||||
# Add context as tag if not :root
|
||||
if context and context != ":root":
|
||||
token.tags.append(f"context:{context}")
|
||||
|
||||
tokens.append(token)
|
||||
|
||||
return tokens
|
||||
|
||||
def _build_line_map(self, content: str) -> List[int]:
|
||||
"""Build map of character positions to line numbers."""
|
||||
line_map = []
|
||||
pos = 0
|
||||
for i, line in enumerate(content.split('\n'), 1):
|
||||
line_map.append(pos)
|
||||
pos += len(line) + 1 # +1 for newline
|
||||
return line_map
|
||||
|
||||
def _get_line_number(self, pos: int, line_map: List[int]) -> int:
|
||||
"""Get line number for character position."""
|
||||
for i, line_start in enumerate(line_map):
|
||||
if i + 1 < len(line_map):
|
||||
if line_start <= pos < line_map[i + 1]:
|
||||
return i + 1
|
||||
else:
|
||||
return i + 1
|
||||
return 1
|
||||
|
||||
def _normalize_var_name(self, var_name: str) -> str:
|
||||
"""Convert CSS variable name to token name."""
|
||||
# Remove -- prefix
|
||||
name = var_name.lstrip('-')
|
||||
# Convert kebab-case to dot notation
|
||||
name = name.replace('-', '.')
|
||||
return name
|
||||
|
||||
def _clean_comment(self, comment: str) -> str:
|
||||
"""Extract text from CSS comment."""
|
||||
if not comment:
|
||||
return ""
|
||||
# Remove /* and */
|
||||
text = re.sub(r'/\*|\*/', '', comment)
|
||||
# Clean whitespace
|
||||
text = ' '.join(text.split())
|
||||
return text.strip()
|
||||
|
||||
def _get_selector_context(self, content: str, pos: int) -> str:
|
||||
"""Get the CSS selector context for a variable."""
|
||||
# Find the opening brace before this position
|
||||
before = content[:pos]
|
||||
last_open = before.rfind('{')
|
||||
if last_open == -1:
|
||||
return ""
|
||||
|
||||
# Find the selector before the brace
|
||||
selector_part = before[:last_open]
|
||||
# Get last selector (after } or start)
|
||||
last_close = selector_part.rfind('}')
|
||||
if last_close != -1:
|
||||
selector_part = selector_part[last_close + 1:]
|
||||
|
||||
# Clean up
|
||||
selector = selector_part.strip()
|
||||
# Handle multi-line selectors
|
||||
selector = ' '.join(selector.split())
|
||||
return selector
|
||||
|
||||
|
||||
class CSSInlineExtractor:
|
||||
"""
|
||||
Extract inline styles from HTML/JSX for token candidate identification.
|
||||
|
||||
Finds style="" attributes and extracts values that could become tokens.
|
||||
"""
|
||||
|
||||
# Patterns for extracting inline styles
|
||||
STYLE_ATTR_PATTERN = re.compile(
|
||||
r'style\s*=\s*["\']([^"\']+)["\']',
|
||||
re.IGNORECASE
|
||||
)
|
||||
|
||||
# JSX style object pattern
|
||||
JSX_STYLE_PATTERN = re.compile(
|
||||
r'style\s*=\s*\{\{([^}]+)\}\}',
|
||||
re.MULTILINE
|
||||
)
|
||||
|
||||
async def extract_candidates(self, source: str) -> List[Tuple[str, str, int]]:
|
||||
"""
|
||||
Extract inline style values as token candidates.
|
||||
|
||||
Returns list of (property, value, line_number) tuples.
|
||||
"""
|
||||
candidates = []
|
||||
|
||||
# Determine if file or content
|
||||
if Path(source).exists():
|
||||
content = Path(source).read_text(encoding="utf-8")
|
||||
else:
|
||||
content = source
|
||||
|
||||
lines = content.split('\n')
|
||||
|
||||
for i, line in enumerate(lines, 1):
|
||||
# Check HTML style attribute
|
||||
for match in self.STYLE_ATTR_PATTERN.finditer(line):
|
||||
style_content = match.group(1)
|
||||
for prop, value in self._parse_style_string(style_content):
|
||||
if self._is_token_candidate(value):
|
||||
candidates.append((prop, value, i))
|
||||
|
||||
# Check JSX style object
|
||||
for match in self.JSX_STYLE_PATTERN.finditer(line):
|
||||
style_content = match.group(1)
|
||||
for prop, value in self._parse_jsx_style(style_content):
|
||||
if self._is_token_candidate(value):
|
||||
candidates.append((prop, value, i))
|
||||
|
||||
return candidates
|
||||
|
||||
def _parse_style_string(self, style: str) -> List[Tuple[str, str]]:
|
||||
"""Parse CSS style string into property-value pairs."""
|
||||
pairs = []
|
||||
for declaration in style.split(';'):
|
||||
if ':' in declaration:
|
||||
prop, value = declaration.split(':', 1)
|
||||
pairs.append((prop.strip(), value.strip()))
|
||||
return pairs
|
||||
|
||||
def _parse_jsx_style(self, style: str) -> List[Tuple[str, str]]:
|
||||
"""Parse JSX style object into property-value pairs."""
|
||||
pairs = []
|
||||
# Simple parsing for common cases
|
||||
for part in style.split(','):
|
||||
if ':' in part:
|
||||
prop, value = part.split(':', 1)
|
||||
prop = prop.strip().strip('"\'')
|
||||
value = value.strip().strip('"\'')
|
||||
# Convert camelCase to kebab-case
|
||||
prop = re.sub(r'([a-z])([A-Z])', r'\1-\2', prop).lower()
|
||||
pairs.append((prop, value))
|
||||
return pairs
|
||||
|
||||
def _is_token_candidate(self, value: str) -> bool:
|
||||
"""Check if value should be extracted as a token."""
|
||||
value = value.strip().lower()
|
||||
|
||||
# Colors are always candidates
|
||||
if re.match(r'^#[0-9a-f]{3,8}$', value):
|
||||
return True
|
||||
if re.match(r'^rgb[a]?\s*\(', value):
|
||||
return True
|
||||
if re.match(r'^hsl[a]?\s*\(', value):
|
||||
return True
|
||||
|
||||
# Dimensions with common units
|
||||
if re.match(r'^\d+(\.\d+)?(px|rem|em|%)$', value):
|
||||
return True
|
||||
|
||||
# Skip variable references
|
||||
if value.startswith('var('):
|
||||
return False
|
||||
|
||||
# Skip inherit/initial/etc
|
||||
if value in ('inherit', 'initial', 'unset', 'auto', 'none'):
|
||||
return False
|
||||
|
||||
return False
|
||||
Reference in New Issue
Block a user