@salesforce/afv-skills 1.8.0 → 1.9.0

package/skills/generating-lwc-components/hooks/scripts/post-tool-validate.py

@@ -0,0 +1,347 @@
+#!/usr/bin/env python3
+"""
+Post-Tool Validation Hook for generating-lwc-components plugin.
+
+This hook runs AFTER Write or Edit tool completes and provides SLDS 2
+validation feedback for LWC files (*.html, *.css, *.js).
+
+Integrates:
+1. Custom 140-point SLDS 2 scoring (7 categories)
+2. Official SLDS Linter (if available via npm)
+3. Salesforce Code Analyzer V5 (ESLint + retire-js engines for JS files)
+
+Hook Input (stdin): JSON with tool_input and tool_response
+Hook Output (stdout): JSON with optional output message
+
+This hook is ADVISORY - it provides feedback but does not block operations.
+"""
+
+import sys
+import os
+import json
+from pathlib import Path
+
+# Add script directory to path for imports
+SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
+sys.path.insert(0, SCRIPT_DIR)
+
+# Find shared modules — try installed path first, then dev repo path
+_CLAUDE_DIR = os.path.join(os.path.expanduser("~"), ".claude")
+_CODE_ANALYZER_CANDIDATES = [
+    os.path.join(_CLAUDE_DIR, "code_analyzer"),           # Installed path
+    os.path.join(SCRIPT_DIR, "..", "..", "..", "..", "shared", "code_analyzer"),  # Dev repo
+]
+for _ca_path in _CODE_ANALYZER_CANDIDATES:
+    _ca_path = os.path.normpath(_ca_path)
+    if os.path.isdir(_ca_path):
+        sys.path.insert(0, os.path.dirname(_ca_path))
+        break
+
+# Also add shared dir for other shared modules
+PLUGIN_ROOT = os.path.dirname(os.path.dirname(SCRIPT_DIR))  # generating-lwc-components/
+SKILLS_ROOT = os.path.dirname(PLUGIN_ROOT)
+SHARED_DIR = os.path.join(SKILLS_ROOT, "shared")
+if os.path.isdir(SHARED_DIR):
+    sys.path.insert(0, SHARED_DIR)
+
+# Supported LWC file extensions
+LWC_EXTENSIONS = {'.html', '.css', '.js'}
+
+
+def is_lwc_file(file_path: str) -> bool:
+    """
+    Check if file is an LWC component file.
+
+    We validate .html (templates), .css (styles), and .js (controllers).
+    """
+    ext = Path(file_path).suffix.lower()
+    return ext in LWC_EXTENSIONS
+
+
+def validate_lwc_file(file_path: str) -> dict:
+    """
+    Run comprehensive SLDS 2 validation on an LWC file.
+
+    Args:
+        file_path: Path to .html, .css, or .js file
+
+    Returns:
+        dict with validation results and output message
+    """
+    output_parts = []
+    file_name = os.path.basename(file_path)
+    ext = Path(file_path).suffix.lower()
+
+    try:
+        # ═══════════════════════════════════════════════════════════════════
+        # PHASE 1: Custom 140-point SLDS 2 validation
+        # ═══════════════════════════════════════════════════════════════════
+        from validate_slds import SLDSValidator
+
+        validator = SLDSValidator(file_path)
+        results = validator.validate()
+
+        score = results.get('score', 0)
+        max_score = results.get('max_score', 140)
+        issues = results.get('issues', [])
+        scores = results.get('scores', {})
+        rating = results.get('rating', '')
+
+        # ═══════════════════════════════════════════════════════════════════
+        # PHASE 1.5: LWC Template Anti-Pattern Validation (for HTML files)
+        # ═══════════════════════════════════════════════════════════════════
+        if ext == '.html':
+            try:
+                from template_validator import LWCTemplateValidator
+                template_validator = LWCTemplateValidator(file_path)
+                template_results = template_validator.validate()
+                template_issues = template_results.get('issues', [])
+
+                # Add template issues to main issues list
+                for tpl_issue in template_issues:
+                    issues.append({
+                        'severity': tpl_issue.get('severity', 'WARNING'),
+                        'category': 'template_' + tpl_issue.get('category', 'pattern'),
+                        'message': tpl_issue.get('message', ''),
+                        'line': tpl_issue.get('line', 0),
+                        'fix': tpl_issue.get('fix', ''),
+                        'source': 'template-validator'
+                    })
+
+                    # Deduct from score for critical template issues
+                    if tpl_issue.get('severity') == 'CRITICAL':
+                        scores['component_structure'] = max(0, scores['component_structure'] - 3)
+            except ImportError:
+                pass  # Template validator not available
+            except Exception:
+                pass  # Don't fail validation on template check errors
+
+        # ═══════════════════════════════════════════════════════════════════
+        # PHASE 2: Official SLDS Linter (if available)
+        # ═══════════════════════════════════════════════════════════════════
+        linter_available = False
+        linter_violations = []
+
+        try:
+            from slds_linter_wrapper import SLDSLinterWrapper
+
+            linter = SLDSLinterWrapper()
+            if linter.is_available() and ext in {'.html', '.css'}:
+                linter_available = True
+                linter_result = linter.lint_file(file_path)
+
+                if linter_result.get('success'):
+                    linter_violations = linter_result.get('violations', [])
+
+                    # Merge linter violations with issues
+                    for v in linter_violations:
+                        issues.append({
+                            'severity': v.get('severity', 'WARNING'),
+                            'category': 'slds_linter',
+                            'message': f"[{v.get('rule', 'slds')}] {v.get('message', '')}",
+                            'line': v.get('line', 0),
+                            'source': 'slds-linter'
+                        })
+        except ImportError:
+            pass
+        except Exception:
+            pass
+
+        # ═══════════════════════════════════════════════════════════════════
+        # PHASE 2.5: Code Analyzer V5 scanning (ESLint + retire-js for JS files)
+        # ═══════════════════════════════════════════════════════════════════
+        ca_violations = []
+        ca_engines_used = []
+        ca_engines_unavailable = []
+        ca_available = False
+        scan_time_ms = 0
+
+        # Only run CA on .js files (ESLint/retire-js don't apply to HTML/CSS)
+        if ext == '.js':
+            try:
+                from code_analyzer.scanner import CodeAnalyzerScanner, SkillType
+
+                scanner = CodeAnalyzerScanner()
+
+                if scanner.is_available():
+                    ca_available = True
+                    scan_result = scanner.scan(file_path, SkillType.LWC)
+
+                    if scan_result.success:
+                        ca_violations = scan_result.violations
+                        ca_engines_used = scan_result.engines_used
+                        ca_engines_unavailable = scan_result.engines_unavailable
+                        scan_time_ms = scan_result.scan_time_ms
+
+                        # Merge CA violations with issues
+                        for v in ca_violations:
+                            issues.append({
+                                'severity': v.get('severity_label', 'WARNING'),
+                                'category': 'code_analyzer',
+                                'message': f"[{v.get('engine', 'CA')}:{v.get('rule', '')}] {v.get('message', '')}",
+                                'line': v.get('line', 0),
+                                'source': f"CA:{v.get('engine', '')}"
+                            })
+                    else:
+                        ca_engines_unavailable = ["Error: " + (scan_result.error_message or "Unknown")]
+                else:
+                    ca_engines_unavailable = ["sf CLI with Code Analyzer not installed"]
+
+            except ImportError as e:
+                ca_engines_unavailable = [f"Module not available: {e}"]
+            except Exception as e:
+                ca_engines_unavailable = [f"Scanner error: {e}"]
+
+        # ═══════════════════════════════════════════════════════════════════
+        # PHASE 3: Calculate rating
+        # ═══════════════════════════════════════════════════════════════════
+        pct = (score / max_score * 100) if max_score > 0 else 0
+        if pct >= 90:
+            rating_stars = 5
+            rating = "Production-ready SLDS 2"
+        elif pct >= 80:
+            rating_stars = 4
+            rating = "Good"
+        elif pct >= 70:
+            rating_stars = 3
+            rating = "Functional"
+        elif pct >= 60:
+            rating_stars = 2
+            rating = "Needs work"
+        else:
+            rating_stars = 1
+            rating = "Critical issues"
+
+        stars = "⭐" * rating_stars + "☆" * (5 - rating_stars)
+
+        # ═══════════════════════════════════════════════════════════════════
+        # PHASE 4: Format output
+        # ═══════════════════════════════════════════════════════════════════
+        output_parts.append("")
+        output_parts.append(f"🎨 SLDS 2 Validation: {file_name}")
+        output_parts.append("═" * 60)
+        output_parts.append(f"📊 Score: {score}/{max_score} {stars} {rating}")
+
+        # Category breakdown
+        if scores:
+            output_parts.append("")
+            output_parts.append("📋 Category Breakdown:")
+            for cat, cat_score in scores.items():
+                max_cat = validator.max_scores.get(cat, 0)
+                if max_cat > 0:
+                    icon = "✅" if cat_score == max_cat else ("⚠️" if cat_score >= max_cat * 0.7 else "❌")
+                    diff = f" (-{max_cat - cat_score})" if cat_score < max_cat else ""
+                    display_name = cat.replace("_", " ").title()
+                    output_parts.append(f"   {icon} {display_name}: {cat_score}/{max_cat}{diff}")
+
+        # SLDS Linter status
+        output_parts.append("")
+        if linter_available:
+            output_parts.append("🔧 SLDS Linter: Active")
+        else:
+            output_parts.append("💡 SLDS Linter: Not installed")
+            output_parts.append("   Install: npm i -g @salesforce-ux/slds-linter")
+
+        # Code Analyzer status (for JS files only)
+        if ext == '.js':
+            output_parts.append("")
+            if ca_engines_used:
+                output_parts.append(f"🔍 Code Analyzer: {', '.join(ca_engines_used)}")
+                if scan_time_ms > 0:
+                    output_parts.append(f"   Scan time: {scan_time_ms}ms")
+            elif ca_available:
+                output_parts.append("🔍 Code Analyzer: No engines ran")
+            else:
+                output_parts.append("💡 Code Analyzer: Not available")
+                if ca_engines_unavailable:
+                    for unavail in ca_engines_unavailable[:2]:
+                        output_parts.append(f"   ⚠️ {unavail}")
+
+        # Issues list
+        if issues:
+            output_parts.append("")
+            output_parts.append(f"⚠️ Issues Found ({len(issues)}):")
+
+            # Sort by severity
+            severity_order = {'CRITICAL': 0, 'HIGH': 1, 'MODERATE': 2, 'WARNING': 3, 'LOW': 4, 'INFO': 5}
+            issues.sort(key=lambda x: severity_order.get(x.get('severity', 'INFO'), 5))
+
+            # Display up to 10 issues
+            for issue in issues[:10]:
+                sev = issue.get('severity', 'INFO')
+                icon = {'CRITICAL': '🔴', 'HIGH': '🟠', 'MODERATE': '🟡', 'WARNING': '🟡', 'LOW': '🔵', 'INFO': '⚪'}.get(sev, '⚪')
+                line_info = f"L{issue.get('line', '?')}" if issue.get('line') else ""
+                message = issue.get('message', '')[:60]
+                output_parts.append(f"   {icon} {line_info} {message}")
+
+                if issue.get('fix'):
+                    fix = issue['fix'][:55] + "..." if len(issue['fix']) > 55 else issue['fix']
+                    output_parts.append(f"      💡 Fix: {fix}")
+
+            if len(issues) > 10:
+                output_parts.append(f"   ... and {len(issues) - 10} more issues")
+        else:
+            output_parts.append("")
+            output_parts.append("✅ No SLDS issues found!")
+
+        output_parts.append("═" * 60)
+
+        return {
+            "continue": True,
+            "output": "\n".join(output_parts)
+        }
+
+    except ImportError as e:
+        return {
+            "continue": True,
+            "output": f"⚠️ SLDS validator not available: {e}"
+        }
+    except Exception as e:
+        return {
+            "continue": True,
+            "output": f"⚠️ SLDS validation error: {e}"
+        }
+
+
+def main():
+    """
+    Main hook entry point.
+
+    Reads hook input from stdin, validates LWC files.
+    """
+    try:
+        # Read hook input from stdin
+        hook_input = json.load(sys.stdin)
+
+        # Extract file path from tool input
+        tool_input = hook_input.get("tool_input", {})
+        file_path = tool_input.get("file_path", "")
+
+        # Check if operation was successful
+        tool_response = hook_input.get("tool_response", {})
+        if not tool_response.get("success", True):
+            print(json.dumps({"continue": True}))
+            return 0
+
+        # Only validate LWC files
+        result = {"continue": True}
+
+        if is_lwc_file(file_path):
+            result = validate_lwc_file(file_path)
+
+        print(json.dumps(result))
+        return 0
+
+    except json.JSONDecodeError:
+        print(json.dumps({"continue": True}))
+        return 0
+    except Exception as e:
+        print(json.dumps({
+            "continue": True,
+            "output": f"⚠️ Hook error: {e}"
+        }))
+        return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

package/skills/generating-lwc-components/hooks/scripts/slds_data/deprecated_patterns.json

@@ -0,0 +1,74 @@
+{
+  "tokens": {
+    "$color-background": "--slds-g-color-surface-1",
+    "$color-background-alt": "--slds-g-color-surface-2",
+    "$color-background-dark": "--slds-g-color-surface-3",
+    "$color-background-inverse": "--slds-g-color-neutral-base-1",
+    "$color-text-default": "--slds-g-color-on-surface",
+    "$color-text-inverse": "--slds-g-color-on-neutral",
+    "$color-text-weak": "--slds-g-color-neutral-2",
+    "$color-text-label": "--slds-g-color-neutral-2",
+    "$color-border": "--slds-g-color-border-1",
+    "$color-border-primary": "--slds-g-color-border-brand-1",
+    "$spacing-none": "--slds-g-spacing-0",
+    "$spacing-xxx-small": "--slds-g-spacing-1",
+    "$spacing-xx-small": "--slds-g-spacing-2",
+    "$spacing-x-small": "--slds-g-spacing-3",
+    "$spacing-small": "--slds-g-spacing-4",
+    "$spacing-medium": "--slds-g-spacing-5",
+    "$spacing-large": "--slds-g-spacing-6",
+    "$spacing-x-large": "--slds-g-spacing-7",
+    "$spacing-xx-large": "--slds-g-spacing-8",
+    "$font-size-1": "--slds-g-font-size-1",
+    "$font-size-2": "--slds-g-font-size-2",
+    "$font-size-3": "--slds-g-font-size-3",
+    "$font-size-4": "--slds-g-font-size-4",
+    "$font-size-5": "--slds-g-font-size-5",
+    "$font-size-6": "--slds-g-font-size-6",
+    "$font-size-7": "--slds-g-font-size-7",
+    "$border-radius-small": "--slds-g-radius-border-1",
+    "$border-radius-medium": "--slds-g-radius-border-2",
+    "$border-radius-large": "--slds-g-radius-border-3",
+    "--lwc-colorBackground": "--slds-g-color-surface-1",
+    "--lwc-colorBackgroundAlt": "--slds-g-color-surface-2",
+    "--lwc-colorTextDefault": "--slds-g-color-on-surface",
+    "--lwc-colorTextWeak": "--slds-g-color-neutral-2",
+    "--lwc-colorBorder": "--slds-g-color-border-1",
+    "--lwc-colorBorderPrimary": "--slds-g-color-border-brand-1",
+    "--lwc-spacingXxSmall": "--slds-g-spacing-2",
+    "--lwc-spacingXSmall": "--slds-g-spacing-3",
+    "--lwc-spacingSmall": "--slds-g-spacing-4",
+    "--lwc-spacingMedium": "--slds-g-spacing-5",
+    "--lwc-spacingLarge": "--slds-g-spacing-6",
+    "--lwc-spacingXLarge": "--slds-g-spacing-7",
+    "--lwc-borderRadiusSmall": "--slds-g-radius-border-1",
+    "--lwc-borderRadiusMedium": "--slds-g-radius-border-2",
+    "--lwc-fontSize1": "--slds-g-font-size-1",
+    "--lwc-fontSize2": "--slds-g-font-size-2",
+    "--lwc-fontSize3": "--slds-g-font-size-3",
+    "--lwc-fontSize4": "--slds-g-font-size-4",
+    "--lwc-fontSize5": "--slds-g-font-size-5"
+  },
+  "classes": {
+    "slds-text-color_inverse": "Use --slds-g-color-on-neutral CSS variable for better dark mode support",
+    "slds-text-color_inverse-weak": "Use --slds-g-color-neutral-2 CSS variable instead",
+    "slds-color-background": "Use --slds-g-color-surface-* CSS variables instead of background utility classes"
+  },
+  "patterns": {
+    "hardcoded_white": {
+      "pattern": "#fff|#ffffff|rgb\\(255,\\s*255,\\s*255\\)",
+      "message": "Hardcoded white color - use --slds-g-color-surface-1 or --slds-g-color-neutral-10",
+      "severity": "HIGH"
+    },
+    "hardcoded_black": {
+      "pattern": "#000|#000000|rgb\\(0,\\s*0,\\s*0\\)",
+      "message": "Hardcoded black color - use --slds-g-color-on-surface or --slds-g-color-neutral-base-1",
+      "severity": "HIGH"
+    },
+    "sass_import": {
+      "pattern": "@import\\s+['\"].*slds.*['\"]",
+      "message": "SLDS Sass imports are deprecated - use CSS custom properties",
+      "severity": "MODERATE"
+    }
+  }
+}

package/skills/generating-lwc-components/hooks/scripts/slds_data/styling_hooks.json

@@ -0,0 +1,111 @@
+{
+  "colors_surface": [
+    "--slds-g-color-surface-1",
+    "--slds-g-color-surface-2",
+    "--slds-g-color-surface-3",
+    "--slds-g-color-surface-4",
+    "--slds-g-color-surface-container-1",
+    "--slds-g-color-surface-container-2",
+    "--slds-g-color-surface-container-3"
+  ],
+  "colors_on_surface": [
+    "--slds-g-color-on-surface",
+    "--slds-g-color-on-surface-1",
+    "--slds-g-color-on-surface-2"
+  ],
+  "colors_border": [
+    "--slds-g-color-border-1",
+    "--slds-g-color-border-2",
+    "--slds-g-color-border-brand-1",
+    "--slds-g-color-border-brand-2",
+    "--slds-g-color-border-error-1",
+    "--slds-g-color-border-success-1",
+    "--slds-g-color-border-warning-1"
+  ],
+  "colors_brand": [
+    "--slds-g-color-brand-1",
+    "--slds-g-color-brand-2",
+    "--slds-g-color-brand-base-1",
+    "--slds-g-color-brand-base-2",
+    "--slds-g-color-on-brand",
+    "--slds-g-color-on-brand-1"
+  ],
+  "colors_neutral": [
+    "--slds-g-color-neutral-1",
+    "--slds-g-color-neutral-2",
+    "--slds-g-color-neutral-3",
+    "--slds-g-color-neutral-base-1",
+    "--slds-g-color-neutral-base-2",
+    "--slds-g-color-on-neutral",
+    "--slds-g-color-on-neutral-1"
+  ],
+  "colors_status": [
+    "--slds-g-color-error-1",
+    "--slds-g-color-error-2",
+    "--slds-g-color-error-base-1",
+    "--slds-g-color-on-error",
+    "--slds-g-color-success-1",
+    "--slds-g-color-success-2",
+    "--slds-g-color-success-base-1",
+    "--slds-g-color-on-success",
+    "--slds-g-color-warning-1",
+    "--slds-g-color-warning-2",
+    "--slds-g-color-warning-base-1",
+    "--slds-g-color-on-warning"
+  ],
+  "spacing": [
+    "--slds-g-spacing-0",
+    "--slds-g-spacing-1",
+    "--slds-g-spacing-2",
+    "--slds-g-spacing-3",
+    "--slds-g-spacing-4",
+    "--slds-g-spacing-5",
+    "--slds-g-spacing-6",
+    "--slds-g-spacing-7",
+    "--slds-g-spacing-8",
+    "--slds-g-spacing-9",
+    "--slds-g-spacing-10",
+    "--slds-g-spacing-11",
+    "--slds-g-spacing-12"
+  ],
+  "radius": [
+    "--slds-g-radius-border-1",
+    "--slds-g-radius-border-2",
+    "--slds-g-radius-border-3",
+    "--slds-g-radius-border-4",
+    "--slds-g-radius-border-circle"
+  ],
+  "font_size": [
+    "--slds-g-font-size-1",
+    "--slds-g-font-size-2",
+    "--slds-g-font-size-3",
+    "--slds-g-font-size-4",
+    "--slds-g-font-size-5",
+    "--slds-g-font-size-6",
+    "--slds-g-font-size-7",
+    "--slds-g-font-size-8",
+    "--slds-g-font-size-9",
+    "--slds-g-font-size-10"
+  ],
+  "font_weight": [
+    "--slds-g-font-weight-light",
+    "--slds-g-font-weight-regular",
+    "--slds-g-font-weight-bold"
+  ],
+  "line_height": [
+    "--slds-g-font-line-height-heading",
+    "--slds-g-font-line-height-body",
+    "--slds-g-font-line-height-label"
+  ],
+  "shadow": [
+    "--slds-g-shadow-1",
+    "--slds-g-shadow-2",
+    "--slds-g-shadow-3",
+    "--slds-g-shadow-4"
+  ],
+  "sizing": [
+    "--slds-g-sizing-border-1",
+    "--slds-g-sizing-border-2",
+    "--slds-g-sizing-border-3"
+  ]
+}

package/skills/generating-lwc-components/hooks/scripts/slds_data/valid_slds_classes.json

@@ -0,0 +1,127 @@
+{
+  "spacing_padding": [
+    "slds-p-around_none", "slds-p-around_xxx-small", "slds-p-around_xx-small",
+    "slds-p-around_x-small", "slds-p-around_small", "slds-p-around_medium",
+    "slds-p-around_large", "slds-p-around_x-large", "slds-p-around_xx-large",
+    "slds-p-horizontal_none", "slds-p-horizontal_xxx-small", "slds-p-horizontal_xx-small",
+    "slds-p-horizontal_x-small", "slds-p-horizontal_small", "slds-p-horizontal_medium",
+    "slds-p-horizontal_large", "slds-p-horizontal_x-large", "slds-p-horizontal_xx-large",
+    "slds-p-vertical_none", "slds-p-vertical_xxx-small", "slds-p-vertical_xx-small",
+    "slds-p-vertical_x-small", "slds-p-vertical_small", "slds-p-vertical_medium",
+    "slds-p-vertical_large", "slds-p-vertical_x-large", "slds-p-vertical_xx-large",
+    "slds-p-top_none", "slds-p-top_xxx-small", "slds-p-top_xx-small",
+    "slds-p-top_x-small", "slds-p-top_small", "slds-p-top_medium",
+    "slds-p-top_large", "slds-p-top_x-large", "slds-p-top_xx-large",
+    "slds-p-bottom_none", "slds-p-bottom_xxx-small", "slds-p-bottom_xx-small",
+    "slds-p-bottom_x-small", "slds-p-bottom_small", "slds-p-bottom_medium",
+    "slds-p-bottom_large", "slds-p-bottom_x-large", "slds-p-bottom_xx-large",
+    "slds-p-left_none", "slds-p-left_xxx-small", "slds-p-left_xx-small",
+    "slds-p-left_x-small", "slds-p-left_small", "slds-p-left_medium",
+    "slds-p-left_large", "slds-p-left_x-large", "slds-p-left_xx-large",
+    "slds-p-right_none", "slds-p-right_xxx-small", "slds-p-right_xx-small",
+    "slds-p-right_x-small", "slds-p-right_small", "slds-p-right_medium",
+    "slds-p-right_large", "slds-p-right_x-large", "slds-p-right_xx-large"
+  ],
+  "spacing_margin": [
+    "slds-m-around_none", "slds-m-around_xxx-small", "slds-m-around_xx-small",
+    "slds-m-around_x-small", "slds-m-around_small", "slds-m-around_medium",
+    "slds-m-around_large", "slds-m-around_x-large", "slds-m-around_xx-large",
+    "slds-m-horizontal_none", "slds-m-horizontal_xxx-small", "slds-m-horizontal_xx-small",
+    "slds-m-horizontal_x-small", "slds-m-horizontal_small", "slds-m-horizontal_medium",
+    "slds-m-horizontal_large", "slds-m-horizontal_x-large", "slds-m-horizontal_xx-large",
+    "slds-m-vertical_none", "slds-m-vertical_xxx-small", "slds-m-vertical_xx-small",
+    "slds-m-vertical_x-small", "slds-m-vertical_small", "slds-m-vertical_medium",
+    "slds-m-vertical_large", "slds-m-vertical_x-large", "slds-m-vertical_xx-large",
+    "slds-m-top_none", "slds-m-top_xxx-small", "slds-m-top_xx-small",
+    "slds-m-top_x-small", "slds-m-top_small", "slds-m-top_medium",
+    "slds-m-top_large", "slds-m-top_x-large", "slds-m-top_xx-large",
+    "slds-m-bottom_none", "slds-m-bottom_xxx-small", "slds-m-bottom_xx-small",
+    "slds-m-bottom_x-small", "slds-m-bottom_small", "slds-m-bottom_medium",
+    "slds-m-bottom_large", "slds-m-bottom_x-large", "slds-m-bottom_xx-large",
+    "slds-m-left_none", "slds-m-left_xxx-small", "slds-m-left_xx-small",
+    "slds-m-left_x-small", "slds-m-left_small", "slds-m-left_medium",
+    "slds-m-left_large", "slds-m-left_x-large", "slds-m-left_xx-large",
+    "slds-m-right_none", "slds-m-right_xxx-small", "slds-m-right_xx-small",
+    "slds-m-right_x-small", "slds-m-right_small", "slds-m-right_medium",
+    "slds-m-right_large", "slds-m-right_x-large", "slds-m-right_xx-large"
+  ],
+  "grid": [
+    "slds-grid", "slds-grid_align-center", "slds-grid_align-spread",
+    "slds-grid_align-space", "slds-grid_align-end", "slds-grid_vertical",
+    "slds-grid_vertical-reverse", "slds-grid_reverse", "slds-grid_pull-padded",
+    "slds-grid_pull-padded-medium", "slds-grid_pull-padded-large",
+    "slds-col", "slds-col_padded", "slds-col_padded-medium", "slds-col_padded-large",
+    "slds-col_bump-left", "slds-col_bump-right", "slds-col_bump-top", "slds-col_bump-bottom",
+    "slds-wrap", "slds-nowrap", "slds-gutters", "slds-gutters_small",
+    "slds-gutters_medium", "slds-gutters_large", "slds-gutters_x-large"
+  ],
+  "text": [
+    "slds-text-heading_small", "slds-text-heading_medium", "slds-text-heading_large",
+    "slds-text-title", "slds-text-title_caps", "slds-text-title_bold",
+    "slds-text-body_regular", "slds-text-body_small",
+    "slds-text-color_default", "slds-text-color_weak", "slds-text-color_error",
+    "slds-text-color_success", "slds-text-color_inverse", "slds-text-color_inverse-weak",
+    "slds-text-align_left", "slds-text-align_center", "slds-text-align_right",
+    "slds-text-longform", "slds-text-link", "slds-text-link_reset",
+    "slds-truncate", "slds-truncate_container_50", "slds-truncate_container_75",
+    "slds-hyphenate", "slds-line-clamp", "slds-line-clamp_x-small",
+    "slds-line-clamp_small", "slds-line-clamp_medium", "slds-line-clamp_large"
+  ],
+  "visibility": [
+    "slds-hide", "slds-show", "slds-hidden", "slds-visible",
+    "slds-assistive-text", "slds-is-collapsed", "slds-is-expanded",
+    "slds-transition-hide", "slds-transition-show"
+  ],
+  "interaction": [
+    "slds-is-active", "slds-is-selected", "slds-is-disabled",
+    "slds-is-hovered", "slds-is-focused", "slds-is-open", "slds-is-closed",
+    "slds-has-error", "slds-has-focus", "slds-has-input-focus"
+  ],
+  "components": [
+    "slds-button", "slds-button_neutral", "slds-button_brand", "slds-button_destructive",
+    "slds-button_outline-brand", "slds-button_success", "slds-button_text-destructive",
+    "slds-button_icon", "slds-button_icon-inverse", "slds-button_icon-border",
+    "slds-button_stretch", "slds-button_first", "slds-button_middle", "slds-button_last",
+    "slds-input", "slds-input_bare", "slds-input_counter",
+    "slds-select", "slds-select_container", "slds-textarea",
+    "slds-checkbox", "slds-checkbox_toggle", "slds-radio",
+    "slds-form", "slds-form_compound", "slds-form_stacked", "slds-form_horizontal",
+    "slds-form-element", "slds-form-element__label", "slds-form-element__control",
+    "slds-form-element__help", "slds-form-element__icon",
+    "slds-card", "slds-card_boundary", "slds-card__header", "slds-card__body",
+    "slds-card__body_inner", "slds-card__footer",
+    "slds-modal", "slds-modal_large", "slds-modal_medium", "slds-modal__container",
+    "slds-modal__header", "slds-modal__content", "slds-modal__footer",
+    "slds-notify", "slds-notify_container", "slds-notify_toast",
+    "slds-notify__content", "slds-notify__close",
+    "slds-table", "slds-table_bordered", "slds-table_col-bordered",
+    "slds-table_striped", "slds-table_fixed-layout", "slds-table_resizable-cols",
+    "slds-table__cell", "slds-table__header",
+    "slds-tile", "slds-tile_board", "slds-tile__detail", "slds-tile__title",
+    "slds-item", "slds-item_detail"
+  ],
+  "positioning": [
+    "slds-is-relative", "slds-is-absolute", "slds-is-fixed", "slds-is-static",
+    "slds-float_left", "slds-float_right", "slds-float_none", "slds-clearfix",
+    "slds-align_absolute-center", "slds-align-middle"
+  ],
+  "borders": [
+    "slds-border_bottom", "slds-border_left", "slds-border_right", "slds-border_top",
+    "slds-box", "slds-box_x-small", "slds-box_small", "slds-box_medium", "slds-box_large"
+  ],
+  "illustrations": [
+    "slds-illustration", "slds-illustration_small", "slds-illustration_large"
+  ],
+  "alerts": [
+    "slds-alert", "slds-alert_error", "slds-alert_warning", "slds-alert_info",
+    "slds-alert_offline", "slds-alert_texture"
+  ],
+  "badges": [
+    "slds-badge", "slds-badge_inverse", "slds-badge_lightest"
+  ],
+  "spinners": [
+    "slds-spinner", "slds-spinner_brand", "slds-spinner_inverse",
+    "slds-spinner_x-small", "slds-spinner_small", "slds-spinner_medium", "slds-spinner_large",
+    "slds-spinner_container", "slds-spinner_delayed"
+  ]
+}