ether-code 0.1.0

package/generators/css-generator.js

@@ -0,0 +1,583 @@
+const fs = require('fs')
+
+class CSSGenerator {
+  constructor(i18nPath = null) {
+    this.i18n = null
+    this.indent = 0
+    this.output = ''
+    this.propertyMap = {}
+    this.valueMap = {}
+    this.unitMap = {}
+    this.colorMap = {}
+    this.selectorMap = {}
+    
+    if (i18nPath) {
+      this.loadI18n(i18nPath)
+    }
+  }
+
+  loadI18n(filePath) {
+    const content = fs.readFileSync(filePath, 'utf-8')
+    this.i18n = JSON.parse(content)
+    this.buildMaps()
+  }
+
+  buildMaps() {
+    this.propertyMap = {}
+    this.valueMap = {}
+    this.unitMap = {}
+    this.colorMap = {}
+    this.selectorMap = {}
+    
+    if (!this.i18n) return
+
+    const addToMap = (map, section) => {
+      if (!section) return
+      for (const [key, translations] of Object.entries(section)) {
+        if (translations && translations.fr && translations.css) {
+          map[translations.fr.toLowerCase()] = translations.css
+        }
+      }
+    }
+
+    addToMap(this.propertyMap, this.i18n.fontFamily)
+    addToMap(this.propertyMap, this.i18n.fontSize)
+    addToMap(this.propertyMap, this.i18n.fontWeight)
+    addToMap(this.propertyMap, this.i18n.fontStyle)
+    addToMap(this.propertyMap, this.i18n.textAlign)
+    addToMap(this.propertyMap, this.i18n.textDecoration)
+    addToMap(this.propertyMap, this.i18n.textTransform)
+    addToMap(this.propertyMap, this.i18n.textOverflow)
+    addToMap(this.propertyMap, this.i18n.background)
+    addToMap(this.propertyMap, this.i18n.backgroundValues)
+    addToMap(this.propertyMap, this.i18n.borderWidth)
+    addToMap(this.propertyMap, this.i18n.borderStyle)
+    addToMap(this.propertyMap, this.i18n.borderRadius)
+    addToMap(this.propertyMap, this.i18n.dimensions)
+    addToMap(this.propertyMap, this.i18n.dimensionValues)
+    addToMap(this.propertyMap, this.i18n.spacing)
+    addToMap(this.propertyMap, this.i18n.display)
+    addToMap(this.propertyMap, this.i18n.flexbox)
+    addToMap(this.propertyMap, this.i18n.grid)
+    addToMap(this.propertyMap, this.i18n.position)
+    addToMap(this.propertyMap, this.i18n.positioning)
+    addToMap(this.propertyMap, this.i18n.overflow)
+    addToMap(this.propertyMap, this.i18n.opacity)
+    addToMap(this.propertyMap, this.i18n.cursor)
+    addToMap(this.propertyMap, this.i18n.transition)
+    addToMap(this.propertyMap, this.i18n.animation)
+    addToMap(this.propertyMap, this.i18n.transform)
+    addToMap(this.propertyMap, this.i18n.filter)
+    addToMap(this.propertyMap, this.i18n.objectFit)
+    addToMap(this.propertyMap, this.i18n.userSelect)
+    addToMap(this.propertyMap, this.i18n.resize)
+    addToMap(this.propertyMap, this.i18n.visibility)
+    addToMap(this.propertyMap, this.i18n.zIndex)
+    addToMap(this.propertyMap, this.i18n.boxShadow)
+    addToMap(this.propertyMap, this.i18n.textShadow)
+
+    addToMap(this.valueMap, this.i18n.alignment)
+    addToMap(this.valueMap, this.i18n.direction)
+    addToMap(this.valueMap, this.i18n.wrap)
+    addToMap(this.valueMap, this.i18n.blendMode)
+
+    addToMap(this.unitMap, this.i18n.unitsAbsolute)
+    addToMap(this.unitMap, this.i18n.unitsRelative)
+    addToMap(this.unitMap, this.i18n.unitsViewport)
+    addToMap(this.unitMap, this.i18n.angleUnits)
+    addToMap(this.unitMap, this.i18n.timeUnits)
+
+    addToMap(this.colorMap, this.i18n.colors)
+
+    if (this.i18n.shadow) {
+      for (const [key, val] of Object.entries(this.i18n.shadow)) {
+        if (val && val.fr && val.value) {
+          this.valueMap[val.fr.toLowerCase()] = val.value
+        }
+      }
+    }
+
+    if (this.i18n.predefinedAnimations) {
+      for (const [key, val] of Object.entries(this.i18n.predefinedAnimations)) {
+        if (val && val.fr && val.keyframes) {
+          this.valueMap[val.fr.toLowerCase()] = { type: 'animation', keyframes: val.keyframes }
+        }
+      }
+    }
+  }
+
+  translateProperty(prop) {
+    const lower = prop.toLowerCase()
+    return this.propertyMap[lower] || this.translateGeneric(prop)
+  }
+
+  translateValue(val) {
+    if (typeof val !== 'string') return val
+    const lower = val.toLowerCase()
+    
+    if (this.colorMap[lower]) {
+      return this.colorMap[lower]
+    }
+    
+    if (this.valueMap[lower]) {
+      const mapped = this.valueMap[lower]
+      if (typeof mapped === 'object' && mapped.type === 'animation') {
+        return mapped
+      }
+      return mapped
+    }
+    
+    let result = this.translateGeneric(val)
+    result = this.translateColorsInValue(result)
+    return result
+  }
+
+  translateColorsInValue(val) {
+    if (typeof val !== 'string') return val
+    
+    const colorMap = {
+      'blanc': 'white', 'noir': 'black', 'rouge': 'red', 'vert': 'green',
+      'bleu': 'blue', 'jaune': 'yellow', 'orange': 'orange', 'violet': 'purple',
+      'rose': 'pink', 'gris': 'gray', 'cyan': 'cyan', 'magenta': 'magenta',
+      'marron': 'brown', 'beige': 'beige', 'or': 'gold', 'argent': 'silver'
+    }
+    
+    let result = val
+    for (const [fr, en] of Object.entries(colorMap)) {
+      const regex = new RegExp(`\\b${fr}\\b`, 'gi')
+      result = result.replace(regex, en)
+    }
+    return result
+  }
+
+  translateGeneric(text) {
+    const translations = {
+      'fond': 'background',
+      'couleur': 'color',
+      'police': 'font-family',
+      'taille': 'font-size',
+      'poids': 'font-weight',
+      'style': 'font-style',
+      'alignement': 'text-align',
+      'decoration': 'text-decoration',
+      'transformation texte': 'text-transform',
+      'transformation': 'transform',
+      'debordement': 'overflow',
+      'largeur': 'width',
+      'hauteur': 'height',
+      'marge': 'margin',
+      'remplissage': 'padding',
+      'bordure': 'border',
+      'arrondi': 'border-radius',
+      'ombre': 'box-shadow',
+      'ombre texte': 'text-shadow',
+      'affichage': 'display',
+      'position': 'position',
+      'haut': 'top',
+      'bas': 'bottom',
+      'gauche': 'left',
+      'droite': 'right',
+      'z': 'z-index',
+      'opacite': 'opacity',
+      'curseur': 'cursor',
+      'transition': 'transition',
+      'animation': 'animation',
+      'filtre': 'filter',
+      'ajustement': 'object-fit',
+      'selection utilisateur': 'user-select',
+      'selection': 'user-select',
+      'redimensionner': 'resize',
+      'visibilite': 'visibility',
+      'flex': 'flex',
+      'grille': 'grid',
+      'colonnes': 'grid-template-columns',
+      'lignes': 'grid-template-rows',
+      'zone': 'grid-area',
+      'ecart': 'gap',
+      'direction': 'flex-direction',
+      'envelopper': 'flex-wrap',
+      'justifier': 'justify-content',
+      'aligner': 'align-items',
+      'contenu': 'content',
+      'blanc': 'white',
+      'noir': 'black',
+      'rouge': 'red',
+      'vert': 'green',
+      'bleu': 'blue',
+      'jaune': 'yellow',
+      'orange': 'orange',
+      'violet': 'purple',
+      'rose': 'pink',
+      'gris': 'gray',
+      'transparent': 'transparent',
+      'hériter': 'inherit',
+      'initial': 'initial',
+      'aucun': 'none',
+      'auto': 'auto',
+      'cache': 'hidden',
+      'visible': 'visible',
+      'defiler': 'scroll',
+      'fixe': 'fixed',
+      'absolu': 'absolute',
+      'relatif': 'relative',
+      'statique': 'static',
+      'collant': 'sticky',
+      'centre': 'center',
+      'début': 'flex-start',
+      'fin': 'flex-end',
+      'entre': 'space-between',
+      'autour': 'space-around',
+      'egal': 'space-evenly',
+      'etirer': 'stretch',
+      'ligne': 'row',
+      'colonne': 'column',
+      'inverser': 'reverse',
+      'gras': 'bold',
+      'normal': 'normal',
+      'italique': 'italic',
+      'souligne': 'underline',
+      'barre': 'line-through',
+      'majuscules': 'uppercase',
+      'minuscules': 'lowercase',
+      'capitaliser': 'capitalize',
+      'pointeur': 'pointer',
+      'attente': 'wait',
+      'texte': 'text',
+      'interdit': 'not-allowed',
+      'couvrir': 'cover',
+      'contenir': 'contain',
+      'remplir': 'fill',
+      'bloc': 'block',
+      'en ligne': 'inline',
+      'flex': 'flex',
+      'grille': 'grid',
+      'aucun': 'none'
+    }
+
+    const lower = text.toLowerCase()
+    return translations[lower] || text
+  }
+
+  translateSelector(selector) {
+    if (!selector) return selector
+    let result = selector
+
+    result = result.replace(/\s+au survol/gi, ':hover')
+    result = result.replace(/\s+au clic/gi, ':active')
+    result = result.replace(/\s+au focus/gi, ':focus')
+    result = result.replace(/\s+au focus dans/gi, ':focus-within')
+    result = result.replace(/\s+visite/gi, ':visited')
+    result = result.replace(/\s+premier enfant/gi, ':first-child')
+    result = result.replace(/\s+dernier enfant/gi, ':last-child')
+    result = result.replace(/\s+enfant impair/gi, ':nth-child(odd)')
+    result = result.replace(/\s+enfant pair/gi, ':nth-child(even)')
+    result = result.replace(/\s+avant/gi, '::before')
+    result = result.replace(/\s+apres/gi, '::after')
+    result = result.replace(/\s+selection/gi, '::selection')
+    result = result.replace(/\s+placeholder/gi, '::placeholder')
+    result = result.replace(/\s+premiere lettre/gi, '::first-letter')
+    result = result.replace(/\s+premiere ligne/gi, '::first-line')
+    result = result.replace(/\s+coche/gi, ':checked')
+    result = result.replace(/\s+desactive/gi, ':disabled')
+    result = result.replace(/\s+requis/gi, ':required')
+    result = result.replace(/\s+optionnel/gi, ':optional')
+    result = result.replace(/\s+valide/gi, ':valid')
+    result = result.replace(/\s+invalide/gi, ':invalid')
+    result = result.replace(/\s+vide/gi, ':empty')
+    result = result.replace(/^racine$/gi, ':root')
+
+    return result
+  }
+
+  translateUnit(value) {
+    if (typeof value !== 'string') return value
+
+    const unitMap = {
+      'px': 'px',
+      'em': 'em',
+      'rem': 'rem',
+      'pourcent': '%',
+      '%': '%',
+      'vw': 'vw',
+      'vh': 'vh',
+      'vmin': 'vmin',
+      'vmax': 'vmax',
+      'ch': 'ch',
+      'ex': 'ex',
+      'cm': 'cm',
+      'mm': 'mm',
+      'pt': 'pt',
+      'pc': 'pc',
+      'deg': 'deg',
+      's': 's',
+      'ms': 'ms',
+      'fr': 'fr'
+    }
+
+    for (const [fr, css] of Object.entries(unitMap)) {
+      const regex = new RegExp(`(\\d+(?:\\.\\d+)?)\\s*${fr}\\b`, 'gi')
+      value = value.replace(regex, `$1${css}`)
+    }
+
+    return value
+  }
+
+  generate(ast) {
+    this.output = ''
+    this.indent = 0
+
+    if (Array.isArray(ast)) {
+      for (const node of ast) {
+        this.generateNode(node)
+      }
+    } else if (ast && ast.type) {
+      this.generateNode(ast)
+    } else if (ast && ast.rules) {
+      for (const rule of ast.rules) {
+        this.generateNode(rule)
+      }
+    }
+
+    return this.output.trim()
+  }
+
+  generateNode(node) {
+    if (!node) return
+
+    switch (node.type) {
+      case 'Rule':
+      case 'rule':
+        this.generateRule(node)
+        break
+      case 'AtRule':
+      case 'atRule':
+        this.generateAtRule(node)
+        break
+      case 'Keyframes':
+      case 'keyframes':
+        this.generateKeyframes(node)
+        break
+      case 'MediaQuery':
+      case 'mediaQuery':
+        this.generateMediaQuery(node)
+        break
+      case 'FontFace':
+      case 'fontFace':
+        this.generateFontFace(node)
+        break
+      case 'Import':
+      case 'import':
+        this.generateImport(node)
+        break
+      case 'Comment':
+      case 'comment':
+        break
+      default:
+        if (node.selector || node.selectors) {
+          this.generateRule(node)
+        }
+    }
+  }
+
+  generateRule(node) {
+    const selectors = node.selectors || [node.selector]
+    const translatedSelectors = selectors.map(s => this.translateSelector(s))
+
+    this.writeLine(`${translatedSelectors.join(', ')} {`)
+    this.indent++
+
+    const declarations = node.declarations || node.properties || []
+    for (const decl of declarations) {
+      this.generateDeclaration(decl)
+    }
+
+    if (node.children) {
+      for (const child of node.children) {
+        this.generateNode(child)
+      }
+    }
+
+    this.indent--
+    this.writeLine('}')
+    this.writeLine('')
+  }
+
+  generateDeclaration(decl) {
+    if (!decl) return
+
+    let property = decl.property || decl.name
+    let value = decl.value
+
+    property = this.translateProperty(property)
+    value = this.translateValue(value)
+    
+    if (typeof value === 'object' && value.type === 'animation') {
+      return
+    }
+
+    value = this.translateUnit(String(value))
+
+    if (decl.important) {
+      value += ' !important'
+    }
+
+    this.writeLine(`${property}: ${value};`)
+  }
+
+  generateAtRule(node) {
+    const name = node.name || node.rule
+    const params = node.params || node.value || ''
+
+    if (node.declarations || node.rules || node.children) {
+      this.writeLine(`@${name} ${params} {`)
+      this.indent++
+
+      if (node.declarations) {
+        for (const decl of node.declarations) {
+          this.generateDeclaration(decl)
+        }
+      }
+
+      if (node.rules) {
+        for (const rule of node.rules) {
+          this.generateNode(rule)
+        }
+      }
+
+      if (node.children) {
+        for (const child of node.children) {
+          this.generateNode(child)
+        }
+      }
+
+      this.indent--
+      this.writeLine('}')
+    } else {
+      this.writeLine(`@${name} ${params};`)
+    }
+    this.writeLine('')
+  }
+
+  generateKeyframes(node) {
+    const name = node.name || node.identifier
+
+    this.writeLine(`@keyframes ${name} {`)
+    this.indent++
+
+    const frames = node.frames || node.keyframes || []
+    for (const frame of frames) {
+      const selector = frame.selector || frame.offset || frame.percentage
+      this.writeLine(`${selector} {`)
+      this.indent++
+
+      const declarations = frame.declarations || frame.properties || []
+      for (const decl of declarations) {
+        this.generateDeclaration(decl)
+      }
+
+      this.indent--
+      this.writeLine('}')
+    }
+
+    this.indent--
+    this.writeLine('}')
+    this.writeLine('')
+  }
+
+  generateMediaQuery(node) {
+    let query = node.query || node.condition || ''
+
+    query = query.replace(/ecran/gi, 'screen')
+    query = query.replace(/imprimante/gi, 'print')
+    query = query.replace(/tous/gi, 'all')
+    query = query.replace(/largeur min/gi, 'min-width')
+    query = query.replace(/largeur max/gi, 'max-width')
+    query = query.replace(/hauteur min/gi, 'min-height')
+    query = query.replace(/hauteur max/gi, 'max-height')
+    query = query.replace(/orientation/gi, 'orientation')
+    query = query.replace(/paysage/gi, 'landscape')
+    query = query.replace(/portrait/gi, 'portrait')
+    query = query.replace(/et/gi, 'and')
+    query = query.replace(/ou/gi, 'or')
+    query = query.replace(/pas/gi, 'not')
+
+    this.writeLine(`@media ${query} {`)
+    this.indent++
+
+    const rules = node.rules || node.children || []
+    for (const rule of rules) {
+      this.generateNode(rule)
+    }
+
+    this.indent--
+    this.writeLine('}')
+    this.writeLine('')
+  }
+
+  generateFontFace(node) {
+    this.writeLine('@font-face {')
+    this.indent++
+
+    const declarations = node.declarations || node.properties || []
+    for (const decl of declarations) {
+      let property = decl.property || decl.name
+      let value = decl.value
+
+      property = property.replace(/famille/gi, 'font-family')
+      property = property.replace(/source/gi, 'src')
+      property = property.replace(/poids/gi, 'font-weight')
+      property = property.replace(/style/gi, 'font-style')
+      property = property.replace(/affichage/gi, 'font-display')
+
+      this.writeLine(`${property}: ${value};`)
+    }
+
+    this.indent--
+    this.writeLine('}')
+    this.writeLine('')
+  }
+
+  generateImport(node) {
+    const url = node.url || node.path
+    const media = node.media || ''
+
+    if (media) {
+      this.writeLine(`@import url("${url}") ${media};`)
+    } else {
+      this.writeLine(`@import url("${url}");`)
+    }
+  }
+
+  writeLine(text) {
+    const indentation = '  '.repeat(this.indent)
+    this.output += indentation + text + '\n'
+  }
+
+  generateFromSimple(rules) {
+    this.output = ''
+    this.indent = 0
+
+    for (const [selector, properties] of Object.entries(rules)) {
+      const translatedSelector = this.translateSelector(selector)
+      this.writeLine(`${translatedSelector} {`)
+      this.indent++
+
+      for (const [prop, val] of Object.entries(properties)) {
+        const translatedProp = this.translateProperty(prop)
+        let translatedVal = this.translateValue(val)
+        translatedVal = this.translateUnit(String(translatedVal))
+        this.writeLine(`${translatedProp}: ${translatedVal};`)
+      }
+
+      this.indent--
+      this.writeLine('}')
+      this.writeLine('')
+    }
+
+    return this.output.trim()
+  }
+}
+
+module.exports = {
+  CSSGenerator
+}