ether-code 0.4.9 → 0.5.1

package/cli/ether.js

@@ -6,7 +6,7 @@ const http = require('http')
 const { EtherCompiler } = require('./compiler')
 const { Watcher } = require('./watcher')
 
-const VERSION = '0.4.9'
+const VERSION = '0.5.1'
 
 const COLORS = {
   reset: '\x1b[0m',

package/ether-parser.js

@@ -651,6 +651,8 @@ class EtherParser {
       'titre6': 'h6',
       'paragraphe': 'p',
       'lien': 'a',
+      'ressource': 'link',
+      'lien externe': 'link',
       'image': 'img',
       'bouton': 'button',
       'formulaire': 'form',
@@ -680,9 +682,61 @@ class EtherParser {
     const token = this.current()
     if (!token || token.type !== TokenType.IDENTIFIER) return null
     
-    const property = token.value
+    const compoundProperties = {
+      'marge': ['dedans', 'autour', 'haut', 'bas', 'gauche', 'droite'],
+      'marge dedans': ['haut', 'bas', 'gauche', 'droite'],
+      'marge autour': ['haut', 'bas', 'gauche', 'droite'],
+      'remplissage': ['haut', 'bas', 'gauche', 'droite'],
+      'taille': ['police'],
+      'poids': ['police'],
+      'style': ['police', 'liste'],
+      'hauteur': ['ligne', 'min', 'max', 'minimum', 'maximum'],
+      'largeur': ['min', 'max', 'minimum', 'maximum'],
+      'alignement': ['texte'],
+      'decoration': ['texte'],
+      'transformation': ['texte'],
+      'ombre': ['texte', 'boite', 'boîte'],
+      'espacement': ['lettres'],
+      'bordure': ['haut', 'bas', 'gauche', 'droite', 'couleur', 'style', 'largeur', 'arrondi'],
+      'couleur': ['bordure', 'fond', 'texte', 'remplissage'],
+      'arrondi': ['haut', 'bas'],
+      'arrondi haut': ['gauche', 'droite'],
+      'arrondi bas': ['gauche', 'droite'],
+      'fond': ['couleur', 'image', 'position', 'taille', 'repetition', 'attachement'],
+      'direction': ['flex'],
+      'enveloppe': ['flex'],
+      'justifier': ['contenu'],
+      'aligner': ['elements', 'éléments', 'contenu'],
+      'colonnes': ['grille'],
+      'lignes': ['grille'],
+      'espace': ['ligne', 'colonne', 'blanc'],
+      'débordement': ['x', 'y'],
+      'debordement': ['x', 'y'],
+      'événements': ['pointeur'],
+      'evenements': ['pointeur'],
+      'modèle': ['boite', 'boîte'],
+      'modele': ['boite', 'boîte'],
+      'filtre': ['fond'],
+      'decoupe': ['fond'],
+      'découpe': ['fond'],
+      'origine': ['transformation', 'perspective']
+    }
+    
+    let property = token.value
     this.advance()
     
+    let nextToken = this.current()
+    while (nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const propLower = property.toLowerCase()
+      if (compoundProperties[propLower] && compoundProperties[propLower].includes(nextToken.value.toLowerCase())) {
+        property = property + ' ' + nextToken.value
+        this.advance()
+        nextToken = this.current()
+      } else {
+        break
+      }
+    }
+    
     let hasColon = this.match(TokenType.COLON)
     let hasEquals = !hasColon && this.match(TokenType.EQUALS)
     
@@ -710,6 +764,15 @@ class EtherParser {
         needsSpace = false
       }
       
+      if (lastType === TokenType.NUMBER || lastType === TokenType.INTEGER || lastType === TokenType.FLOAT) {
+        if (current.type === TokenType.IDENTIFIER) {
+          const units = ['px', 'em', 'rem', '%', 'vw', 'vh', 'vmin', 'vmax', 'ch', 'ex', 'cm', 'mm', 'in', 'pt', 'pc', 'deg', 'rad', 'turn', 'ms', 's', 'fr', 'cqw', 'cqh']
+          if (units.includes(current.value.toLowerCase())) {
+            needsSpace = false
+          }
+        }
+      }
+      
       if (current.type === TokenType.IDENTIFIER) {
         if (needsSpace) valueParts.push(' ')
         valueParts.push(current.value)
@@ -738,12 +801,14 @@ class EtherParser {
         if (needsSpace) valueParts.push(' ')
         valueParts.push('/')
       } else if (current.type === TokenType.MINUS) {
-        if (lastType === TokenType.LPAREN || lastType === TokenType.MINUS) {
-          valueParts.push('-')
+        if (current.value === '--') {
+          valueParts.push('--')
+        } else if (lastType === TokenType.LPAREN || lastType === TokenType.MINUS) {
+          valueParts.push(current.value)
         } else if (needsSpace) {
-          valueParts.push(' -')
+          valueParts.push(' ' + current.value)
         } else {
-          valueParts.push('-')
+          valueParts.push(current.value)
         }
       } else if (current.type === TokenType.COLON) {
         valueParts.push(':')
@@ -854,7 +919,7 @@ class EtherParser {
     const name = nameToken.value.toLowerCase()
     this.advance()
     
-    if (name === 'media' || name === 'requete media' || name === 'ecran') {
+    if (name === 'media' || name === 'requete media' || name === 'ecran' || name === 'si') {
       return this.parseCSSMediaQuery()
     }
     
@@ -916,20 +981,30 @@ class EtherParser {
   }
 
   translateMediaQuery(query) {
-    return query
+    let result = query
+    
+    result = result.replace(/ecran\s+tres\s+petit/gi, 'screen and (max-width: 480px)')
+    result = result.replace(/ecran\s+petit/gi, 'screen and (max-width: 768px)')
+    result = result.replace(/ecran\s+moyen/gi, 'screen and (max-width: 1024px)')
+    result = result.replace(/ecran\s+large/gi, 'screen and (min-width: 1025px) and (max-width: 1280px)')
+    result = result.replace(/ecran\s+tres\s+large/gi, 'screen and (min-width: 1281px)')
+    
+    result = result
       .replace(/ecran/gi, 'screen')
       .replace(/imprimante/gi, 'print')
       .replace(/tous/gi, 'all')
-      .replace(/largeur min/gi, 'min-width')
-      .replace(/largeur max/gi, 'max-width')
-      .replace(/hauteur min/gi, 'min-height')
-      .replace(/hauteur max/gi, 'max-height')
+      .replace(/largeur\s+min/gi, 'min-width')
+      .replace(/largeur\s+max/gi, 'max-width')
+      .replace(/hauteur\s+min/gi, 'min-height')
+      .replace(/hauteur\s+max/gi, 'max-height')
       .replace(/orientation/gi, 'orientation')
       .replace(/paysage/gi, 'landscape')
       .replace(/portrait/gi, 'portrait')
-      .replace(/et/gi, 'and')
-      .replace(/ou/gi, 'or')
-      .replace(/pas/gi, 'not')
+      .replace(/\bet\b/gi, 'and')
+      .replace(/\bou\b/gi, 'or')
+      .replace(/\bpas\b/gi, 'not')
+    
+    return result
   }
 
   parseCSSKeyframes() {
@@ -1101,12 +1176,237 @@ class EtherParser {
 
   parseHTMLElement() {
     const tagToken = this.current()
-    const tag = this.translateHTMLTag(tagToken.value)
+    let tagName = tagToken.value.toLowerCase()
     this.advance()
     
+    const nextToken = this.current()
+    if ((tagName === 'titre' || tagName === 'heading') && nextToken && (nextToken.type === TokenType.NUMBER || nextToken.type === TokenType.INTEGER)) {
+      const num = parseInt(nextToken.value)
+      if (num >= 1 && num <= 6) {
+        tagName = `titre${num}`
+        this.advance()
+      }
+    }
+    
+    if ((tagName === 'liste' || tagName === 'list') && nextToken) {
+      if (nextToken.type === TokenType.IDENTIFIER) {
+        const nextVal = nextToken.value.toLowerCase()
+        if (nextVal === 'ordonnee' || nextVal === 'ordered') {
+          tagName = 'liste ordonnee'
+          this.advance()
+        } else if (nextVal === 'non') {
+          this.advance()
+          const thirdToken = this.current()
+          if (thirdToken && thirdToken.type === TokenType.IDENTIFIER && thirdToken.value.toLowerCase() === 'ordonnee') {
+            tagName = 'liste non ordonnee'
+            this.advance()
+          }
+        }
+      }
+    }
+    
+    if ((tagName === 'element' || tagName === 'item') && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      if (nextToken.value.toLowerCase() === 'liste' || nextToken.value.toLowerCase() === 'list') {
+        tagName = 'element liste'
+        this.advance()
+      }
+    }
+    
+    if ((tagName === 'zone' || tagName === 'area') && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      if (nextToken.value.toLowerCase() === 'texte' || nextToken.value.toLowerCase() === 'text') {
+        tagName = 'zone texte'
+        this.advance()
+      }
+    }
+    
+    if ((tagName === 'retour' || tagName === 'saut') && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      if (nextToken.value.toLowerCase() === 'ligne' || nextToken.value.toLowerCase() === 'line') {
+        tagName = 'retour ligne'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'ligne' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      if (nextToken.value.toLowerCase() === 'horizontale') {
+        tagName = 'ligne horizontale'
+        this.advance()
+      }
+    }
+    
+    if ((tagName === 'cellule' || tagName === 'cell') && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      if (nextToken.value.toLowerCase() === 'entete' || nextToken.value.toLowerCase() === 'header') {
+        tagName = 'entete cellule'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'groupe' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'titres') {
+        tagName = 'groupe titres'
+        this.advance()
+      } else if (next === 'options') {
+        tagName = 'groupe options'
+        this.advance()
+      } else if (next === 'colonnes') {
+        tagName = 'groupe colonnes'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'entete' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'tableau' || next === 'table') {
+        tagName = 'entete tableau'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'corps' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'tableau' || next === 'table') {
+        tagName = 'corps tableau'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'pied' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'tableau' || next === 'table') {
+        tagName = 'pied tableau'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'legende' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'tableau' || next === 'table') {
+        tagName = 'legende tableau'
+        this.advance()
+      } else if (next === 'figure') {
+        tagName = 'legende figure'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'ensemble' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'champs' || next === 'fields') {
+        tagName = 'ensemble champs'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'liste' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'donnees' || next === 'data') {
+        tagName = 'liste donnees'
+        this.advance()
+      } else if (next === 'description') {
+        tagName = 'liste description'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'image' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'reactive' || next === 'responsive') {
+        tagName = 'image reactive'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'cadre' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'en') {
+        this.advance()
+        const thirdToken = this.current()
+        if (thirdToken && thirdToken.type === TokenType.IDENTIFIER && thirdToken.value.toLowerCase() === 'ligne') {
+          tagName = 'cadre en ligne'
+          this.advance()
+        }
+      }
+    }
+    
+    if (tagName === 'citation' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'bloc' || next === 'block') {
+        tagName = 'citation bloc'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'reference' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'citation') {
+        tagName = 'reference citation'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'sans' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'script') {
+        tagName = 'sans script'
+        this.advance()
+      }
+    }
+    
+    if ((tagName === 'texte' || tagName === 'text') && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'alternatif' || next === 'alt') {
+        tagName = 'texte alternatif'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'entree' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'clavier') {
+        tagName = 'entree clavier'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'sortie' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'exemple') {
+        tagName = 'sortie exemple'
+        this.advance()
+      }
+    }
+    
+    if (tagName === 'definition' && nextToken && nextToken.type === TokenType.IDENTIFIER) {
+      const next = nextToken.value.toLowerCase()
+      if (next === 'description') {
+        tagName = 'definition description'
+        this.advance()
+      }
+    }
+    
+    const tag = this.translateHTMLTag(tagName)
+    
     const attributes = {}
     let inlineText = null
     
+    const compoundAttrs = {
+      'texte': ['alternatif'],
+      'longueur': ['max', 'min'],
+      'valeur': ['max', 'min'],
+      'zone': ['depot'],
+      'mode': ['saisie'],
+      'verification': ['orthographe'],
+      'ordre': ['tabulation'],
+      'action': ['formulaire'],
+      'methode': ['formulaire'],
+      'encodage': ['formulaire'],
+      'validation': ['formulaire', 'auto'],
+      'cible': ['formulaire', 'popover'],
+      'lecture': ['seule'],
+      'nouvelle': ['fenetre'],
+      'a': ['popup']
+    }
+    
     while (!this.isAtEnd()) {
       const current = this.current()
       
@@ -1122,18 +1422,30 @@ class EtherParser {
       }
       
       if (current.type === TokenType.IDENTIFIER) {
-        const attrName = current.value
-        const nextToken = this.peek(1)
+        let attrName = current.value.toLowerCase()
+        this.advance()
+        
+        if (compoundAttrs[attrName]) {
+          const nextTok = this.current()
+          if (nextTok && nextTok.type === TokenType.IDENTIFIER) {
+            const nextVal = nextTok.value.toLowerCase()
+            if (compoundAttrs[attrName].includes(nextVal)) {
+              attrName = attrName + ' ' + nextVal
+              this.advance()
+            }
+          }
+        }
+        
+        const nextToken = this.current()
         
         if (nextToken && (nextToken.type === TokenType.EQUALS || nextToken.type === TokenType.COLON)) {
-          this.advance()
           this.advance()
           const valueToken = this.current()
           if (valueToken) {
             if (valueToken.type === TokenType.STRING) {
               attributes[attrName] = valueToken.value.replace(/^["']|["']$/g, '')
             } else if (valueToken.type === TokenType.IDENTIFIER || 
-                       valueToken.type === TokenType.NUMBER) {
+                       valueToken.type === TokenType.NUMBER || valueToken.type === TokenType.INTEGER) {
               attributes[attrName] = valueToken.value
             }
             this.advance()
@@ -1144,7 +1456,6 @@ class EtherParser {
           }
         } else {
           attributes[attrName] = true
-          this.advance()
           
           if (this.current() && this.current().type === TokenType.COMMA) {
             this.advance()
@@ -1221,6 +1532,20 @@ class EtherParser {
       'titre4': 'h4',
       'titre5': 'h5',
       'titre6': 'h6',
+      'titre 1': 'h1',
+      'titre 2': 'h2',
+      'titre 3': 'h3',
+      'titre 4': 'h4',
+      'titre 5': 'h5',
+      'titre 6': 'h6',
+      'heading 1': 'h1',
+      'heading 2': 'h2',
+      'heading 3': 'h3',
+      'heading 4': 'h4',
+      'heading 5': 'h5',
+      'heading 6': 'h6',
+      'groupe titres': 'hgroup',
+      'heading group': 'hgroup',
       'sous titre': 'h2',
       'paragraphe': 'p',
       'texte': 'span',
@@ -1229,6 +1554,8 @@ class EtherParser {
       'bloc': 'div',
       'span': 'span',
       'lien': 'a',
+      'ressource': 'link',
+      'lien externe': 'link',
       'image': 'img',
       'liste': 'ul',
       'liste ordonnee': 'ol',
@@ -1241,6 +1568,8 @@ class EtherParser {
       'entete cellule': 'th',
       'formulaire': 'form',
       'champ': 'input',
+      'entree': 'input',
+      'input': 'input',
       'zone texte': 'textarea',
       'bouton': 'button',
       'selection': 'select',
@@ -1268,7 +1597,58 @@ class EtherParser {
       'canvas': 'canvas',
       'toile': 'canvas',
       'figure': 'figure',
-      'legende': 'figcaption',
+      'legende': 'legend',
+      'legende figure': 'figcaption',
+      'legende tableau': 'caption',
+      'legende ensemble': 'legend',
+      'figure caption': 'figcaption',
+      'table caption': 'caption',
+      'entete tableau': 'thead',
+      'table header': 'thead',
+      'corps tableau': 'tbody',
+      'table body': 'tbody',
+      'pied tableau': 'tfoot',
+      'table footer': 'tfoot',
+      'ensemble champs': 'fieldset',
+      'fieldset': 'fieldset',
+      'liste donnees': 'datalist',
+      'datalist': 'datalist',
+      'liste description': 'dl',
+      'description list': 'dl',
+      'definition description': 'dd',
+      'image reactive': 'picture',
+      'picture': 'picture',
+      'cadre en ligne': 'iframe',
+      'inline frame': 'iframe',
+      'iframe': 'iframe',
+      'citation bloc': 'blockquote',
+      'blockquote': 'blockquote',
+      'reference citation': 'cite',
+      'groupe options': 'optgroup',
+      'option group': 'optgroup',
+      'groupe colonnes': 'colgroup',
+      'column group': 'colgroup',
+      'colonne': 'col',
+      'column': 'col',
+      'entree clavier': 'kbd',
+      'keyboard input': 'kbd',
+      'sortie exemple': 'samp',
+      'sample output': 'samp',
+      'texte alternatif': 'alt',
+      'resultat': 'output',
+      'result': 'output',
+      'piste': 'track',
+      'track': 'track',
+      'insere': 'ins',
+      'inserted': 'ins',
+      'supprime': 'del',
+      'deleted': 'del',
+      'donnee': 'data',
+      'retour ligne possible': 'wbr',
+      'word break': 'wbr',
+      'carte image': 'map',
+      'image map': 'map',
+      'script': 'script',
       'details': 'details',
       'resume': 'summary',
       'dialogue': 'dialog',

package/generators/css-generator.js

@@ -215,10 +215,78 @@ class CSSGenerator {
       'lavande': 'lavender',
       'prune': 'plum',
       'chocolat': 'chocolate',
-      'transparent': 'transparent'
+      'transparent': 'transparent',
+      'marron': 'brown'
+    }
+
+    const shadeMap = {
+      'bleu clair': 'lightblue',
+      'bleu fonce': 'darkblue',
+      'bleu foncé': 'darkblue',
+      'bleu tres clair': 'lightcyan',
+      'bleu très clair': 'lightcyan',
+      'bleu tres fonce': '#00008B',
+      'bleu très foncé': '#00008B',
+      'bleu pale': 'lightsteelblue',
+      'bleu pâle': 'lightsteelblue',
+      'bleu vif': 'royalblue',
+      'vert clair': 'lightgreen',
+      'vert fonce': 'darkgreen',
+      'vert foncé': 'darkgreen',
+      'vert tres clair': 'palegreen',
+      'vert très clair': 'palegreen',
+      'vert tres fonce': '#006400',
+      'vert très foncé': '#006400',
+      'vert pale': 'palegreen',
+      'vert pâle': 'palegreen',
+      'vert vif': 'limegreen',
+      'rouge clair': 'lightcoral',
+      'rouge fonce': 'darkred',
+      'rouge foncé': 'darkred',
+      'rouge tres clair': 'mistyrose',
+      'rouge très clair': 'mistyrose',
+      'rouge tres fonce': '#8B0000',
+      'rouge très foncé': '#8B0000',
+      'rouge pale': 'lightpink',
+      'rouge pâle': 'lightpink',
+      'rouge vif': 'crimson',
+      'jaune clair': 'lightyellow',
+      'jaune fonce': 'darkgoldenrod',
+      'jaune foncé': 'darkgoldenrod',
+      'jaune pale': 'lemonchiffon',
+      'jaune pâle': 'lemonchiffon',
+      'jaune vif': 'gold',
+      'gris clair': 'lightgray',
+      'gris fonce': 'darkgray',
+      'gris foncé': 'darkgray',
+      'gris tres clair': 'whitesmoke',
+      'gris très clair': 'whitesmoke',
+      'gris tres fonce': 'dimgray',
+      'gris très foncé': 'dimgray',
+      'violet clair': 'plum',
+      'violet fonce': 'darkviolet',
+      'violet foncé': 'darkviolet',
+      'violet vif': 'blueviolet',
+      'orange clair': 'lightsalmon',
+      'orange fonce': 'darkorange',
+      'orange foncé': 'darkorange',
+      'orange vif': 'orangered',
+      'rose clair': 'lightpink',
+      'rose fonce': 'hotpink',
+      'rose foncé': 'hotpink',
+      'rose vif': 'deeppink',
+      'cyan clair': 'lightcyan',
+      'cyan fonce': 'darkcyan',
+      'cyan foncé': 'darkcyan'
     }
 
     let result = val
+    
+    for (const [fr, en] of Object.entries(shadeMap)) {
+      const regex = new RegExp(`\\b${fr}\\b`, 'gi')
+      result = result.replace(regex, en)
+    }
+    
     for (const [fr, en] of Object.entries(colorMap)) {
       const regex = new RegExp(`\\b${fr}\\b`, 'gi')
       result = result.replace(regex, en)
@@ -314,7 +382,47 @@ class CSSGenerator {
       'ease-out': 'ease-out',
       'ease-in-out': 'ease-in-out',
       'linéaire': 'linear',
-      'lineaire': 'linear'
+      'lineaire': 'linear',
+      'infini': 'infinite',
+      'alternatif': 'alternate',
+      'inverse': 'reverse',
+      'alternatif inverse': 'alternate-reverse',
+      'en avant': 'forwards',
+      'en arriere': 'backwards',
+      'les deux': 'both',
+      'en pause': 'paused',
+      'en cours': 'running',
+      'ombre': 'box-shadow',
+      'transformation': 'transform',
+      'fond': 'background',
+      'couleur': 'color',
+      'opacite': 'opacity',
+      'opacité': 'opacity',
+      'bordure': 'border',
+      'largeur': 'width',
+      'hauteur': 'height',
+      'marge': 'margin',
+      'remplissage': 'padding'
+    }
+
+    const filterFunctions = {
+      'flou': 'blur',
+      'luminosite': 'brightness',
+      'luminosité': 'brightness',
+      'contraste': 'contrast',
+      'saturation': 'saturate',
+      'niveaux de gris': 'grayscale',
+      'niveaux-de-gris': 'grayscale',
+      'sepia': 'sepia',
+      'sépia': 'sepia',
+      'inverser': 'invert',
+      'teinte rotation': 'hue-rotate',
+      'teinte-rotation': 'hue-rotate',
+      'opacite': 'opacity',
+      'opacité': 'opacity',
+      'ombre portee': 'drop-shadow',
+      'ombre-portee': 'drop-shadow',
+      'ombre portée': 'drop-shadow'
     }
 
     let result = val
@@ -325,6 +433,11 @@ class CSSGenerator {
       return `__VAR_PLACEHOLDER_${varPlaceholders.length - 1}__`
     })
     
+    for (const [fr, en] of Object.entries(filterFunctions)) {
+      const regex = new RegExp(`${fr}\\s*\\(`, 'gi')
+      result = result.replace(regex, `${en}(`)
+    }
+    
     for (const [fr, en] of Object.entries(keywords)) {
       const regex = new RegExp(`\\b${fr}\\b`, 'gi')
       result = result.replace(regex, en)
@@ -368,6 +481,16 @@ class CSSGenerator {
       'ombre-texte': 'text-shadow',
       'ombre texte': 'text-shadow',
       'marge': 'margin',
+      'marge autour': 'margin',
+      'marge-autour': 'margin',
+      'marge autour haut': 'margin-top',
+      'marge-autour-haut': 'margin-top',
+      'marge autour bas': 'margin-bottom',
+      'marge-autour-bas': 'margin-bottom',
+      'marge autour gauche': 'margin-left',
+      'marge-autour-gauche': 'margin-left',
+      'marge autour droite': 'margin-right',
+      'marge-autour-droite': 'margin-right',
       'marge haut': 'margin-top',
       'marge-haut': 'margin-top',
       'marge bas': 'margin-bottom',
@@ -378,6 +501,15 @@ class CSSGenerator {
       'marge-droite': 'margin-right',
       'marge dedans': 'padding',
       'marge-dedans': 'padding',
+      'remplissage': 'padding',
+      'remplissage haut': 'padding-top',
+      'remplissage-haut': 'padding-top',
+      'remplissage bas': 'padding-bottom',
+      'remplissage-bas': 'padding-bottom',
+      'remplissage gauche': 'padding-left',
+      'remplissage-gauche': 'padding-left',
+      'remplissage droite': 'padding-right',
+      'remplissage-droite': 'padding-right',
       'marge dedans haut': 'padding-top',
       'marge-dedans-haut': 'padding-top',
       'marge dedans bas': 'padding-bottom',
@@ -397,6 +529,8 @@ class CSSGenerator {
       'bordure-droite': 'border-right',
       'couleur-bordure': 'border-color',
       'couleur bordure': 'border-color',
+      'bordure couleur': 'border-color',
+      'bordure-couleur': 'border-color',
       'arrondi': 'border-radius',
       'largeur': 'width',
       'hauteur': 'height',
@@ -428,6 +562,13 @@ class CSSGenerator {
       'transition': 'transition',
       'animation': 'animation',
       'transformation': 'transform',
+      'origine transformation': 'transform-origin',
+      'origine-transformation': 'transform-origin',
+      'style transformation': 'transform-style',
+      'style-transformation': 'transform-style',
+      'perspective': 'perspective',
+      'origine perspective': 'perspective-origin',
+      'origine-perspective': 'perspective-origin',
       'filtre': 'filter',
       'filtre-fond': 'backdrop-filter',
       'filtre fond': 'backdrop-filter',

package/generators/html-generator.js

@@ -5,6 +5,9 @@ class HTMLGenerator {
     this.i18n = null
     this.indent = 0
     this.output = ''
+    this.tagMap = {}
+    this.attrMap = {}
+    this.eventMap = {}
     this.voidElements = [
       'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
       'link', 'meta', 'param', 'source', 'track', 'wbr'
@@ -239,6 +242,7 @@ class HTMLGenerator {
       'source': 'src',
       'alt': 'alt',
       'alternatif': 'alt',
+      'texte alternatif': 'alt',
       'largeur': 'width',
       'hauteur': 'height',
       'chargement': 'loading',
@@ -247,7 +251,10 @@ class HTMLGenerator {
       'methode': 'method',
       'type': 'type',
       'nom': 'name',
+      'contenu': 'content',
       'valeur': 'value',
+      'valeur min': 'min',
+      'valeur max': 'max',
       'placeholder': 'placeholder',
       'indicateur': 'placeholder',
       'requis': 'required',
@@ -278,6 +285,7 @@ class HTMLGenerator {
       'fusion colonnes': 'colspan',
       'portee': 'scope',
       'pour': 'for',
+      'etiquette': 'label',
       'accept': 'accept',
       'accepter': 'accept',
       'enctype': 'enctype',
@@ -672,4 +680,4 @@ class HTMLGenerator {
 
 module.exports = {
   HTMLGenerator
-}
+}

package/lexer/ether-lexer.js

@@ -274,10 +274,18 @@ class EtherLexer {
       this.advance()
     }
 
-    if (this.isAtEnd() || this.peek() === '\n' || this.peek() === '#') {
+    if (this.isAtEnd() || this.peek() === '\n') {
       this.atLineStart = false
       return
     }
+    
+    if (this.peek() === '#') {
+      const next = this.peek(1)
+      if (!next || (!this.isAlpha(next) && !this.isHexDigit(next))) {
+        this.atLineStart = false
+        return
+      }
+    }
 
     if (this.peek() === '/' && this.peek(1) === '/') {
       this.atLineStart = false
@@ -551,13 +559,16 @@ class EtherLexer {
     }
 
     if (this.peek() === 'e' || this.peek() === 'E') {
-      type = TokenType.FLOAT
-      value += this.advance()
-      if (this.peek() === '+' || this.peek() === '-') {
-        value += this.advance()
-      }
-      while (this.isDigit(this.peek())) {
+      const nextChar = this.peek(1)
+      if (this.isDigit(nextChar) || nextChar === '+' || nextChar === '-') {
+        type = TokenType.FLOAT
         value += this.advance()
+        if (this.peek() === '+' || this.peek() === '-') {
+          value += this.advance()
+        }
+        while (this.isDigit(this.peek())) {
+          value += this.advance()
+        }
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ether-code",
-  "version": "0.4.9",
+  "version": "0.5.1",
   "description": "Ether - Le langage intentionnel",
   "main": "cli/compiler.js",
   "bin": {