holygrail5 1.0.2

package/config.json

@@ -0,0 +1,365 @@
+{
+  "prefix": "hg",
+  "category": "typo",
+  "fontFamilyMap": {
+    "primary": "arial, sans-serif",
+    "secondary": "\"ms-serif\", serif"
+  },
+  "breakpoints": {
+    "mobile": "0px",
+    "desktop": "992px"
+  },
+  "spacingMap": {
+    "0": "0",
+    "4": "4px",
+    "8": "8px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "32": "32px",
+    "36": "36px",
+    "40": "40px",
+    "64": "64px",
+    "72": "72px",
+    "80": "80px",
+    "88": "88px",
+    "96": "96px",
+    "104": "104px",
+    "112": "112px",
+    "120": "120px",
+    "128": "128px",
+    "136": "136px",
+    "144": "144px",
+    "152": "152px",
+    "160": "160px",
+    "20-percent": "20%",
+    "25-percent": "25%",
+    "33-percent": "33.333333%",
+    "40-percent": "40%",
+    "50-percent": "50%",
+    "60-percent": "60%",
+    "66-percent": "66.666667%",
+    "75-percent": "75%",
+    "100-percent": "100%"
+  },
+  "spacingImportant": ["0"],
+  "colors": {
+    "white": "#ffffff",
+    "black": "#000000",
+    "dark-grey": "#737373",
+    "middle-grey": "#a9a9a9",
+    "light-grey": "#f0f0f0",
+    "primary": "#000000",
+    "error": "#b40016",
+    "info": "#1a32a4",
+    "success": "#76ae4a",
+    "warning": "#ffc700",
+    "feel": "#fb9962",
+    "feel-dark": "#c94c07",
+    "special": "#b99d6b",
+    "bg-light": "#F0F0F0",
+    "c-bg-light": "#000000",
+    "sk-grey": "#e3e3e3",
+    "bg-cream": "#f4f2ed"
+  },
+  "helpers": {
+    "display": {
+      "property": "display",
+      "class": "d",
+      "responsive": true,
+      "description": "Tipo de caja de renderizado",
+      "values": ["contents", "inline", "inline-block", "block", "flex", "inline-flex", "none"]
+    },
+    "flex-direction": {
+      "property": "flex-direction",
+      "class": "flex",
+      "responsive": true,
+      "description": "Dirección del eje principal (horizontal o vertical)",
+      "values": {
+        "row": "row",
+        "column": "column"
+      }
+    },
+    "flex-wrap": {
+      "property": "flex-wrap",
+      "class": "flex",
+      "responsive": true,
+      "description": "Permite o no el ajuste en múltiples líneas",
+      "values": {
+        "nowrap": "nowrap",
+        "wrap": "wrap"
+      }
+    },
+    "flex-grow": {
+      "property": "flex-grow",
+      "class": "grow",
+      "responsive": true,
+      "description": "Capacidad de crecer para ocupar espacio disponible",
+      "values": {
+        "0": "0",
+        "1": "1",
+        "2": "2",
+        "3": "3",
+        "auto": "auto"
+      }
+    },
+    "flex-shrink": {
+      "property": "flex-shrink",
+      "class": "shrink",
+      "responsive": true,
+      "description": "Capacidad de encogerse cuando el espacio es limitado",
+      "values": {
+        "0": "0",
+        "1": "1",
+        "2": "2",
+        "3": "3",
+        "auto": "auto"
+      }
+    },
+    "order": {
+      "property": "order",
+      "class": "order",
+      "responsive": true,
+      "description": "Orden de visualización independiente del HTML",
+      "values": {
+        "3-neg": "-3",
+        "2-neg": "-2",
+        "1-neg": "-1",
+        "0": "0",
+        "1": "1",
+        "2": "2",
+        "3": "3",
+        "first": "-9999",
+        "last": "9999"
+      }
+    },
+    "justify-content": {
+      "property": "justify-content",
+      "class": "justify",
+      "responsive": true,
+      "description": "Alineación en el eje principal",
+      "values": {
+        "stretch": "stretch",
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "between": "space-between",
+        "around": "space-around",
+        "evenly": "space-evenly"
+      }
+    },
+    "justify-items": {
+      "property": "justify-items",
+      "class": "justify-items",
+      "responsive": true,
+      "description": "Alineación horizontal en grid",
+      "values": {
+        "stretch": "stretch",
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "between": "space-between",
+        "around": "space-around",
+        "evenly": "space-evenly"
+      }
+    },
+    "align-content": {
+      "property": "align-content",
+      "class": "content",
+      "responsive": true,
+      "description": "Alineación de líneas en el eje cruzado",
+      "values": {
+        "stretch": "stretch",
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "between": "space-between",
+        "around": "space-around",
+        "evenly": "space-evenly"
+      }
+    },
+    "align-items": {
+      "property": "align-items",
+      "class": "items",
+      "responsive": true,
+      "description": "Alineación en el eje cruzado",
+      "values": {
+        "stretch": "stretch",
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "baseline": "baseline"
+      }
+    },
+    "row-gap": {
+      "property": "row-gap",
+      "class": "gap-y",
+      "responsive": true,
+      "description": "Espacio entre filas",
+      "useSpacing": true
+    },
+    "column-gap": {
+      "property": "column-gap",
+      "class": "gap-x",
+      "responsive": true,
+      "description": "Espacio entre columnas",
+      "useSpacing": true
+    },
+    "gap": {
+      "property": "gap",
+      "class": "gap",
+      "responsive": true,
+      "description": "Espacio entre filas y columnas",
+      "useSpacing": true
+    }
+  },
+
+  "classes": {
+    "h2": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "900",
+      "letterSpacing": "0rem",
+      "textTransform": "none",
+      "mobile": {
+        "fontSize": "18px",
+        "lineHeight": "1.976"
+      },
+      "desktop": {
+        "fontSize": "24px",
+        "lineHeight": "1.2"
+      }
+    },
+    "title-l-b": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "700",
+      "letterSpacing": "0rem",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "14px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "14px",
+        "lineHeight": "1.4"
+      }
+    },
+    "title-s": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "400",
+      "mobile": {
+        "fontSize": "12px",
+        "lineHeight": "1.4"
+      },
+      "desktop": {
+        "fontSize": "12px",
+        "lineHeight": "1.4"
+      }
+    },
+    "suisse-1": {
+      "fontFamily": "\"ms-serif\", serif",
+      "mobile": {
+        "fontSize": "16px",
+        "lineHeight": "1.5"
+      },
+      "desktop": {
+        "fontSize": "20px",
+        "lineHeight": "1.5"
+      }
+    },
+    "suisse-2": {
+      "fontFamily": "\"ms-serif\", serif",
+      "mobile": {
+        "fontSize": "13px",
+        "lineHeight": "1.1"
+      },
+      "desktop": {
+        "fontSize": "14px",
+        "lineHeight": "1.1"
+      }
+    },
+    "suisse-body": {
+      "fontFamily": "\"ms-serif\", serif",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.1"
+      },
+      "desktop": {
+        "fontSize": "12px",
+        "lineHeight": "1.1"
+      }
+    },
+    "p-tag": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "8px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "8px",
+        "lineHeight": "1"
+      }
+    },
+    "semantic": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "13px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "13px",
+        "lineHeight": "1"
+      }
+    },
+    "title-l": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "14px",
+        "lineHeight": "1.4"
+      },
+      "desktop": {
+        "fontSize": "14px",
+        "lineHeight": "1.4"
+      }
+    },
+    "title-m": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "12px",
+        "lineHeight": "1.4"
+      },
+      "desktop": {
+        "fontSize": "12px",
+        "lineHeight": "1.4"
+      }
+    },
+    "text-m": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "12px",
+        "lineHeight": "1.5"
+      },
+      "desktop": {
+        "fontSize": "13px",
+        "lineHeight": "1.5"
+      }
+    },
+    "text-l": {
+      "fontFamily": "arial, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "12px",
+        "lineHeight": "1.5"
+      },
+      "desktop": {
+        "fontSize": "12px",
+        "lineHeight": "1.5"
+      }
+    }
+  }
+}

package/generator.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+// Orquestador principal - Genera CSS y HTML desde JSON
+
+const path = require('path');
+const { loadConfig } = require('./src/config');
+const { generateCSS } = require('./src/parser');
+const { generateHTML } = require('./src/guide');
+const { writeFile } = require('./src/utils');
+
+// Ejecución principal
+if (require.main === module) {
+  try {
+    // Parsear argumentos de línea de comandos
+    const args = process.argv.slice(2);
+    const configPath = args.find(arg => arg.startsWith('--config='))?.split('=')[1] || path.join(__dirname, 'config.json');
+    const outputPath = args.find(arg => arg.startsWith('--output='))?.split('=')[1] || path.join(__dirname, 'dist', 'output.css');
+    const htmlPath = args.find(arg => arg.startsWith('--html='))?.split('=')[1] || path.join(__dirname, 'dist', 'index.html');
+    
+    // Cargar configuración
+    const configData = loadConfig(configPath);
+    
+    // Generar CSS
+    const cssContent = generateCSS(configData);
+    writeFile(outputPath, cssContent, 'CSS');
+    
+    // Generar HTML (ajustar ruta del CSS en el HTML si está en carpeta diferente)
+    let htmlContent = generateHTML(configData);
+    
+    // Si el HTML y CSS están en carpetas diferentes, ajustar la ruta del CSS
+    const outputDir = path.dirname(outputPath);
+    const htmlDir = path.dirname(htmlPath);
+    
+    // Si el HTML y CSS están en carpetas diferentes, ajustar la ruta del CSS
+    // Si están en la misma carpeta (dist/), usar ruta relativa simple
+    if (outputDir !== htmlDir) {
+      // Calcular ruta relativa del HTML al CSS
+      const relativePath = path.relative(htmlDir, outputDir);
+      const cssFileName = path.basename(outputPath);
+      const cssRelativePath = path.join(relativePath, cssFileName).replace(/\\/g, '/');
+      // Reemplazar href con o sin query string
+      htmlContent = htmlContent.replace(/href="output\.css[^"]*"/, `href="${cssRelativePath}"`);
+    } else {
+      // Si están en la misma carpeta, usar solo el nombre del archivo
+      htmlContent = htmlContent.replace(/href="output\.css[^"]*"/, `href="output.css"`);
+    }
+    
+    writeFile(htmlPath, htmlContent, 'HTML');
+    
+    console.log('\n🎉 Generación completada exitosamente!');
+  } catch (error) {
+    console.error('❌ Error:', error.message);
+    process.exit(1);
+  }
+}
+
+// Exportar funciones
+module.exports = { generateCSS, generateHTML };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "holygrail5",
+  "version": "1.0.2",
+  "description": "Framework CSS generator con Node.js - Genera CSS optimizado con variables CSS desde un archivo JSON de configuración",
+  "main": "generator.js",
+  "bin": {
+    "holygrail5": "./generator.js"
+  },
+  "scripts": {
+    "generate": "node generator.js",
+    "start": "node generator.js && NODE_NO_WARNINGS=1 npx http-server dist -p 3000 -o index.html",
+    "dev": "node src/dev.js",
+    "watch": "node src/watch.js",
+    "serve": "NODE_NO_WARNINGS=1 npx http-server dist -p 3000 -o index.html",
+    "test": "node tests/run-all.js",
+    "prepublishOnly": "npm run generate",
+    "vars:list": "node src/cli-variables.js list",
+    "vars:report": "node src/cli-variables.js report",
+    "vars:remove": "node src/cli-variables.js remove",
+    "vars:remove-all-unused": "node src/cli-variables.js remove-all-unused",
+    "vars:show-all": "node src/cli-variables.js show-all"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "generator",
+    "css-variables",
+    "responsive",
+    "typography",
+    "css-framework",
+    "design-tokens"
+  ],
+  "author": "HolyGrail CSS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/holygrailcss/holygrail5.git"
+  },
+  "files": [
+    "generator.js",
+    "config.json",
+    "README.md",
+    "src/**/*"
+  ],
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

package/src/cli-variables.js

@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+
+// CLI para gestionar variables CSS
+// Permite listar variables no usadas y eliminar variables del historial
+
+const { 
+  listUnusedVariables, 
+  showVariablesReport, 
+  getAllHistoricalVariables,
+  removeVariableFromHistory,
+  removeVariablesFromHistory,
+  loadHistoricalVariables
+} = require('./variables-manager');
+
+const path = require('path');
+
+// Función para mostrar ayuda
+function showHelp() {
+  console.log(`
+📦 Gestor de Variables CSS
+
+Uso:
+  node src/cli-variables.js <comando> [opciones]
+
+Comandos:
+  list                    Lista todas las variables no usadas
+  report                  Muestra un reporte completo de variables
+  remove <variable>       Elimina una variable específica del historial
+  remove-all-unused       Elimina todas las variables no usadas del historial
+  show-all                Muestra todas las variables históricas almacenadas
+
+Opciones:
+  --css=<ruta>            Ruta al archivo CSS (por defecto: dist/output.css)
+  --history=<ruta>         Ruta al archivo de variables históricas (por defecto: .data/.historical-variables.json)
+
+Ejemplos:
+  node src/cli-variables.js list
+  node src/cli-variables.js report
+  node src/cli-variables.js remove --hg-typo-font-size-18
+  node src/cli-variables.js remove-all-unused
+  node src/cli-variables.js show-all
+`);
+}
+
+// Función principal
+function main() {
+  const args = process.argv.slice(2);
+  
+  if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
+    showHelp();
+    return;
+  }
+  
+  const command = args[0];
+  const cssPath = args.find(arg => arg.startsWith('--css='))?.split('=')[1] || null;
+  const historyPath = args.find(arg => arg.startsWith('--history='))?.split('=')[1] || null;
+  
+  try {
+    switch (command) {
+      case 'list':
+        {
+          const unused = listUnusedVariables(cssPath, historyPath);
+          if (unused.length === 0) {
+            console.log('\n✅ No hay variables no usadas. Todas las variables están en uso.\n');
+          } else {
+            console.log(`\n⚠️  Variables no usadas (${unused.length}):\n`);
+            unused.forEach((varName, index) => {
+              console.log(`   ${index + 1}. ${varName}`);
+            });
+            console.log('\n💡 Usa "remove-all-unused" para eliminarlas del historial\n');
+          }
+        }
+        break;
+        
+      case 'report':
+        showVariablesReport(cssPath, historyPath);
+        break;
+        
+      case 'remove':
+        {
+          const varName = args[1];
+          if (!varName) {
+            console.error('❌ Error: Debes especificar el nombre de la variable a eliminar');
+            console.log('   Ejemplo: node src/cli-variables.js remove --hg-typo-font-size-18');
+            process.exit(1);
+          }
+          
+          const removed = removeVariableFromHistory(varName, historyPath);
+          if (removed) {
+            console.log(`\n✅ Variable "${varName}" eliminada del historial\n`);
+          } else {
+            console.log(`\n⚠️  Variable "${varName}" no encontrada en el historial\n`);
+          }
+        }
+        break;
+        
+      case 'remove-all-unused':
+        {
+          const unused = listUnusedVariables(cssPath, historyPath);
+          if (unused.length === 0) {
+            console.log('\n✅ No hay variables no usadas para eliminar\n');
+          } else {
+            console.log(`\n⚠️  Eliminando ${unused.length} variables no usadas del historial...\n`);
+            const removedCount = removeVariablesFromHistory(unused, historyPath);
+            console.log(`✅ ${removedCount} variables eliminadas del historial\n`);
+            console.log('💡 Ejecuta "node generator.js" para regenerar el CSS sin estas variables\n');
+          }
+        }
+        break;
+        
+      case 'show-all':
+        {
+          const historicalVars = loadHistoricalVariables(historyPath);
+          const allVars = getAllHistoricalVariables(historicalVars);
+          
+          if (allVars.length === 0) {
+            console.log('\n📚 No hay variables históricas almacenadas\n');
+          } else {
+            console.log(`\n📚 Variables históricas (${allVars.length}):\n`);
+            allVars.forEach((varData, index) => {
+              console.log(`   ${index + 1}. ${varData.varName}`);
+              console.log(`      Categoría: ${varData.category}`);
+              console.log(`      Valor: ${varData.value}`);
+              console.log('');
+            });
+          }
+        }
+        break;
+        
+      default:
+        console.error(`❌ Comando desconocido: ${command}`);
+        showHelp();
+        process.exit(1);
+    }
+  } catch (error) {
+    console.error('❌ Error:', error.message);
+    process.exit(1);
+  }
+}
+
+// Ejecutar si es el módulo principal
+if (require.main === module) {
+  main();
+}
+
+module.exports = { main };
+

package/src/config.js

@@ -0,0 +1,62 @@
+// Carga y validación de configuración
+
+const fs = require('fs');
+const path = require('path');
+
+const BREAKPOINTS = ['mobile', 'desktop'];
+
+function loadConfig(configPath = path.join(__dirname, '..', 'config.json')) {
+  try {
+    if (!fs.existsSync(configPath)) {
+      throw new Error(`Archivo de configuración no encontrado: ${configPath}`);
+    }
+    
+    const configContent = fs.readFileSync(configPath, 'utf8');
+    const config = JSON.parse(configContent);
+    
+    // Validar estructura básica
+    if (!config.classes || typeof config.classes !== 'object') {
+      throw new Error('La configuración debe tener un objeto "classes"');
+    }
+    
+    if (!config.breakpoints || typeof config.breakpoints !== 'object') {
+      throw new Error('La configuración debe tener un objeto "breakpoints"');
+    }
+    
+    if (!config.breakpoints.mobile || !config.breakpoints.desktop) {
+      throw new Error('Los breakpoints deben tener propiedades "mobile" y "desktop"');
+    }
+    
+    // Validar clases
+    Object.entries(config.classes).forEach(([className, cls]) => {
+      if (!cls || typeof cls !== 'object') {
+        throw new Error(`La clase "${className}" debe ser un objeto`);
+      }
+      
+      // Validar que tenga al menos un breakpoint
+      if (!cls.mobile && !cls.desktop) {
+        throw new Error(`La clase "${className}" debe tener al menos un breakpoint (mobile o desktop)`);
+      }
+      
+      // Validar propiedades de breakpoints
+      BREAKPOINTS.forEach(bp => {
+        if (cls[bp] && (!cls[bp].fontSize && !cls[bp].lineHeight)) {
+          console.warn(`Advertencia: La clase "${className}" tiene breakpoint "${bp}" sin fontSize ni lineHeight`);
+        }
+      });
+    });
+    
+    return config;
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      throw new Error(`Error al parsear JSON: ${error.message}`);
+    }
+    throw error;
+  }
+}
+
+module.exports = {
+  loadConfig,
+  BREAKPOINTS
+};
+