ether-code 0.3.8 → 0.4.0

package/generators/css-generator.js

@@ -103,209 +103,86 @@ class CSSGenerator {
 
   translateProperty(prop) {
     const lower = prop.toLowerCase()
-    return this.propertyMap[lower] || this.translateGeneric(prop)
+    if (this.propertyMap && this.propertyMap[lower]) {
+      return this.propertyMap[lower]
+    }
+    return this.translateGeneric(prop)
   }
 
   translateValue(val) {
     if (typeof val !== 'string') return val
-    const lower = val.toLowerCase()
     
-    if (this.colorMap[lower]) {
-      return this.colorMap[lower]
-    }
+    let result = val
+    result = this.translateFunctions(result)
+    result = this.translateColors(result)
+    result = this.translateKeywords(result)
+    
+    return result
+  }
+
+  translateFunctions(val) {
+    let result = val
+    
+    result = result.replace(/utiliser:\s*([\w\u00C0-\u024F\-]+)/gi, (match, varName) => {
+      return `var(--${varName})`
+    })
     
-    if (this.valueMap[lower]) {
-      const mapped = this.valueMap[lower]
-      if (typeof mapped === 'object' && mapped.type === 'animation') {
-        return mapped
+    result = result.replace(/dégradé linéaire:\s*/gi, 'linear-gradient(')
+    result = result.replace(/degrade lineaire:\s*/gi, 'linear-gradient(')
+    result = result.replace(/dégradé radial:\s*/gi, 'radial-gradient(')
+    result = result.replace(/degrade radial:\s*/gi, 'radial-gradient(')
+    result = result.replace(/dégradé conique:\s*/gi, 'conic-gradient(')
+    result = result.replace(/degrade conique:\s*/gi, 'conic-gradient(')
+    
+    result = result.replace(/rgba:\s*(\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)/gi, 'rgba($1, $2, $3, $4)')
+    result = result.replace(/rgb:\s*(\d+),\s*(\d+),\s*(\d+)/gi, 'rgb($1, $2, $3)')
+    result = result.replace(/hsl:\s*(\d+),\s*([\d.]+%?),\s*([\d.]+%?)/gi, 'hsl($1, $2, $3)')
+    result = result.replace(/hsla:\s*(\d+),\s*([\d.]+%?),\s*([\d.]+%?),\s*([\d.]+)/gi, 'hsla($1, $2, $3, $4)')
+    
+    result = result.replace(/flou:\s*([\d.]+\w*)/gi, 'blur($1)')
+    result = result.replace(/luminosité:\s*([\d.]+%?)/gi, 'brightness($1)')
+    result = result.replace(/luminosite:\s*([\d.]+%?)/gi, 'brightness($1)')
+    result = result.replace(/contraste:\s*([\d.]+%?)/gi, 'contrast($1)')
+    result = result.replace(/niveaux-gris:\s*([\d.]+%?)/gi, 'grayscale($1)')
+    result = result.replace(/niveaux gris:\s*([\d.]+%?)/gi, 'grayscale($1)')
+    result = result.replace(/inverser:\s*([\d.]+%?)/gi, 'invert($1)')
+    result = result.replace(/saturation:\s*([\d.]+%?)/gi, 'saturate($1)')
+    result = result.replace(/sépia:\s*([\d.]+%?)/gi, 'sepia($1)')
+    result = result.replace(/sepia:\s*([\d.]+%?)/gi, 'sepia($1)')
+    result = result.replace(/teinte:\s*([\d.]+\w*)/gi, 'hue-rotate($1)')
+    
+    result = result.replace(/déplacer-y:\s*([\d.\-]+\w*)/gi, 'translateY($1)')
+    result = result.replace(/deplacer-y:\s*([\d.\-]+\w*)/gi, 'translateY($1)')
+    result = result.replace(/déplacer-x:\s*([\d.\-]+\w*)/gi, 'translateX($1)')
+    result = result.replace(/deplacer-x:\s*([\d.\-]+\w*)/gi, 'translateX($1)')
+    result = result.replace(/déplacer:\s*([\d.\-]+\w*),?\s*([\d.\-]+\w*)?/gi, (match, x, y) => {
+      if (y) return `translate(${x}, ${y})`
+      return `translate(${x})`
+    })
+    result = result.replace(/rotation:\s*([\d.\-]+\w*)/gi, 'rotate($1)')
+    result = result.replace(/échelle:\s*([\d.]+)/gi, 'scale($1)')
+    result = result.replace(/echelle:\s*([\d.]+)/gi, 'scale($1)')
+    
+    result = result.replace(/répéter:\s*([^,]+),\s*minmax:\s*([^,]+),\s*([^\s\)]+)/gi, 'repeat($1, minmax($2, $3))')
+    result = result.replace(/repeter:\s*([^,]+),\s*minmax:\s*([^,]+),\s*([^\s\)]+)/gi, 'repeat($1, minmax($2, $3))')
+    result = result.replace(/minmax:\s*([^,]+),\s*([^\s\)]+)/gi, 'minmax($1, $2)')
+    
+    result = result.replace(/calcul:\s*(.+)/gi, 'calc($1)')
+    result = result.replace(/minimum:\s*([^,]+),\s*([^\s\)]+)/gi, 'min($1, $2)')
+    result = result.replace(/maximum:\s*([^,]+),\s*([^\s\)]+)/gi, 'max($1, $2)')
+    result = result.replace(/borner:\s*([^,]+),\s*([^,]+),\s*([^\s\)]+)/gi, 'clamp($1, $2, $3)')
+    
+    if (result.includes('linear-gradient(') || result.includes('radial-gradient(') || result.includes('conic-gradient(')) {
+      if (!result.endsWith(')')) {
+        result = result + ')'
       }
-      return mapped
     }
     
-    return this.translateGeneric(val)
+    return result
   }
 
-  translateGeneric(text) {
-    const translations = {
-      'couleur-fond': 'background-color',
-      'couleur-texte': 'color',
-      'couleur-bordure': 'border-color',
-      'couleur-primaire': '--color-primary',
-      'couleur-secondaire': '--color-secondary',
-      'couleur-accent': '--color-accent',
-      'couleur-surface': '--color-surface',
-      'couleur-texte-pale': '--color-text-muted',
-      'famille-police': 'font-family',
-      'taille-police': 'font-size',
-      'poids-police': 'font-weight',
-      'style-police': 'font-style',
-      'hauteur-ligne': 'line-height',
-      'espacement-lettres': 'letter-spacing',
-      'espacement-mots': 'word-spacing',
-      'texte-aligne': 'text-align',
-      'alignement-texte': 'text-align',
-      'decoration-texte': 'text-decoration',
-      'transformation-texte': 'text-transform',
-      'retrait-texte': 'text-indent',
-      'ombre-texte': 'text-shadow',
-      'debordement-texte': 'text-overflow',
-      'coupure-mot': 'word-break',
-      'retour-ligne': 'word-wrap',
-      'espace-blanc': 'white-space',
-      'marge-haut': 'margin-top',
-      'marge-bas': 'margin-bottom',
-      'marge-gauche': 'margin-left',
-      'marge-droite': 'margin-right',
-      'marge-bloc': 'margin-block',
-      'marge-en-ligne': 'margin-inline',
-      'remplissage-haut': 'padding-top',
-      'remplissage-bas': 'padding-bottom',
-      'remplissage-gauche': 'padding-left',
-      'remplissage-droite': 'padding-right',
-      'remplissage-bloc': 'padding-block',
-      'remplissage-en-ligne': 'padding-inline',
-      'bordure-haut': 'border-top',
-      'bordure-bas': 'border-bottom',
-      'bordure-gauche': 'border-left',
-      'bordure-droite': 'border-right',
-      'largeur-bordure': 'border-width',
-      'style-bordure': 'border-style',
-      'rayon-bordure': 'border-radius',
-      'rayon-haut-gauche': 'border-top-left-radius',
-      'rayon-haut-droite': 'border-top-right-radius',
-      'rayon-bas-gauche': 'border-bottom-left-radius',
-      'rayon-bas-droite': 'border-bottom-right-radius',
-      'ombre-boite': 'box-shadow',
-      'modele-boite': 'box-sizing',
-      'max-largeur': 'max-width',
-      'min-largeur': 'min-width',
-      'max-hauteur': 'max-height',
-      'min-hauteur': 'min-height',
-      'ajustement-objet': 'object-fit',
-      'position-objet': 'object-position',
-      'debordement-x': 'overflow-x',
-      'debordement-y': 'overflow-y',
-      'comportement-defilement': 'scroll-behavior',
-      'justifier-contenu': 'justify-content',
-      'aligner-elements': 'align-items',
-      'aligner-contenu': 'align-content',
-      'aligner-soi': 'align-self',
-      'justifier-soi': 'justify-self',
-      'justifier-elements': 'justify-items',
-      'direction-flex': 'flex-direction',
-      'enveloppe-flex': 'flex-wrap',
-      'flux-flex': 'flex-flow',
-      'croissance-flex': 'flex-grow',
-      'retrecissement-flex': 'flex-shrink',
-      'base-flex': 'flex-basis',
-      'ordre': 'order',
-      'colonnes-grille': 'grid-template-columns',
-      'lignes-grille': 'grid-template-rows',
-      'zones-grille': 'grid-template-areas',
-      'colonne-grille': 'grid-column',
-      'ligne-grille': 'grid-row',
-      'zone-grille': 'grid-area',
-      'ecart-grille': 'grid-gap',
-      'ecart-colonnes': 'column-gap',
-      'ecart-lignes': 'row-gap',
-      'flux-auto-grille': 'grid-auto-flow',
-      'colonnes-auto-grille': 'grid-auto-columns',
-      'lignes-auto-grille': 'grid-auto-rows',
-      'z-index': 'z-index',
-      'index-z': 'z-index',
-      'liste-style': 'list-style',
-      'type-liste': 'list-style-type',
-      'position-liste': 'list-style-position',
-      'image-liste': 'list-style-image',
-      'duree-transition': 'transition-duration',
-      'delai-transition': 'transition-delay',
-      'propriete-transition': 'transition-property',
-      'fonction-transition': 'transition-timing-function',
-      'nom-animation': 'animation-name',
-      'duree-animation': 'animation-duration',
-      'delai-animation': 'animation-delay',
-      'fonction-animation': 'animation-timing-function',
-      'iteration-animation': 'animation-iteration-count',
-      'direction-animation': 'animation-direction',
-      'remplissage-animation': 'animation-fill-mode',
-      'etat-animation': 'animation-play-state',
-      'origine-transformation': 'transform-origin',
-      'style-transformation': 'transform-style',
-      'perspective': 'perspective',
-      'origine-perspective': 'perspective-origin',
-      'face-arriere': 'backface-visibility',
-      'flou-fond': 'backdrop-filter',
-      'mode-melange': 'mix-blend-mode',
-      'mode-melange-fond': 'background-blend-mode',
-      'image-fond': 'background-image',
-      'position-fond': 'background-position',
-      'taille-fond': 'background-size',
-      'repetition-fond': 'background-repeat',
-      'attachement-fond': 'background-attachment',
-      'origine-fond': 'background-origin',
-      'decoupe-fond': 'background-clip',
-      'selection-utilisateur': 'user-select',
-      'evenements-pointeur': 'pointer-events',
-      'accrochage-defilement': 'scroll-snap-type',
-      'alignement-accrochage': 'scroll-snap-align',
-      'redimensionnement': 'resize',
-      'apparence': 'appearance',
-      'contour': 'outline',
-      'largeur-contour': 'outline-width',
-      'style-contour': 'outline-style',
-      'couleur-contour': 'outline-color',
-      'decalage-contour': 'outline-offset',
-      'compteur-reset': 'counter-reset',
-      'compteur-increment': 'counter-increment',
-      'guillemets': 'quotes',
-      'coupure-colonne': 'break-inside',
-      'orphelins': 'orphans',
-      'veuves': 'widows',
-      'fond': 'background',
-      'couleur': 'color',
-      'police': 'font-family',
-      'taille': 'font-size',
-      'poids': 'font-weight',
-      'style': 'font-style',
-      'alignement': 'text-align',
-      'decoration': 'text-decoration',
-      'transformation': 'transform',
-      'debordement': 'overflow',
-      'largeur': 'width',
-      'hauteur': 'height',
-      'marge': 'margin',
-      'remplissage': 'padding',
-      'bordure': 'border',
-      'arrondi': 'border-radius',
-      'ombre': 'box-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': 'user-select',
-      'redimensionner': 'resize',
-      'visibilite': 'visibility',
-      'flex': 'flex',
-      'grille': 'grid',
-      'colonnes': 'grid-template-columns',
-      'lignes': 'grid-template-rows',
-      'zone': 'grid-area',
-      'ecart': 'gap',
-      'espace': 'gap',
-      'direction': 'flex-direction',
-      'envelopper': 'flex-wrap',
-      'justifier': 'justify-content',
-      'aligner': 'align-items',
-      'contenu': 'content',
+  translateColors(val) {
+    const colorMap = {
       'blanc': 'white',
       'noir': 'black',
       'rouge': 'red',
@@ -316,55 +193,301 @@ class CSSGenerator {
       'violet': 'purple',
       'rose': 'pink',
       'gris': 'gray',
-      'transparent': 'transparent',
-      'heriter': 'inherit',
-      'initial': 'initial',
+      'cyan': 'cyan',
+      'magenta': 'magenta',
+      'turquoise': 'turquoise',
+      'beige': 'beige',
+      'or': 'gold',
+      'argent': 'silver',
+      'corail': 'coral',
+      'saumon': 'salmon',
+      'olive': 'olive',
+      'marine': 'navy',
+      'bordeaux': 'maroon',
+      'kaki': 'khaki',
+      'ivoire': 'ivory',
+      'indigo': 'indigo',
+      'lavande': 'lavender',
+      'prune': 'plum',
+      'chocolat': 'chocolate',
+      'transparent': 'transparent'
+    }
+
+    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
+  }
+
+  translateKeywords(val) {
+    const keywords = {
       'aucun': 'none',
+      'aucune': 'none',
       'auto': 'auto',
+      'hériter': 'inherit',
+      'heriter': 'inherit',
+      'initial': 'initial',
+      'caché': 'hidden',
       'cache': 'hidden',
       'visible': 'visible',
+      'défiler': 'scroll',
       'defiler': 'scroll',
       'fixe': 'fixed',
+      'fixée': 'fixed',
+      'fixee': 'fixed',
+      'absolue': 'absolute',
       'absolu': 'absolute',
+      'relative': 'relative',
       'relatif': 'relative',
       'statique': 'static',
       'collant': 'sticky',
+      'collante': 'sticky',
       'centre': 'center',
+      'centré': 'center',
+      'début': 'flex-start',
       'debut': 'flex-start',
       'fin': 'flex-end',
-      'entre': 'space-between',
-      'autour': 'space-around',
-      'egal': 'space-evenly',
+      'espace-entre': 'space-between',
+      'espace entre': 'space-between',
+      'espace-autour': 'space-around',
+      'espace autour': 'space-around',
+      'espace-égal': 'space-evenly',
+      'espace egal': 'space-evenly',
+      'étirer': 'stretch',
       'etirer': 'stretch',
       'ligne': 'row',
       'colonne': 'column',
-      'inverser': 'reverse',
+      'ligne-inverse': 'row-reverse',
+      'ligne inverse': 'row-reverse',
+      'colonne-inverse': 'column-reverse',
+      'colonne inverse': 'column-reverse',
+      'envelopper': 'wrap',
+      'sans-retour': 'nowrap',
+      'sans retour': 'nowrap',
       'gras': 'bold',
       'normal': 'normal',
       'italique': 'italic',
+      'souligné': 'underline',
       'souligne': 'underline',
+      'barré': 'line-through',
       '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',
+      'en ligne': 'inline',
       'bloc-en-ligne': 'inline-block',
+      'bloc en ligne': 'inline-block',
       'flex-en-ligne': 'inline-flex',
+      'flex en ligne': 'inline-flex',
+      'grille': 'grid',
       'grille-en-ligne': 'inline-grid',
-      'espace-blanc': 'white-space',
-      'blanc-espace': 'white-space',
-      'pre': 'pre',
+      'grille en ligne': 'inline-grid',
+      'préservé': 'pre',
+      'preserve': 'pre',
+      'pré-ligne': 'pre-line',
       'pre-ligne': 'pre-line',
+      'pré-enveloppe': 'pre-wrap',
       'pre-enveloppe': 'pre-wrap',
-      'sans-retour': 'nowrap'
+      'solide': 'solid',
+      'pointillée': 'dotted',
+      'pointillee': 'dotted',
+      'tirets': 'dashed',
+      'double': 'double',
+      'tout': 'all',
+      'ease': 'ease',
+      'ease-in': 'ease-in',
+      'ease-out': 'ease-out',
+      'ease-in-out': 'ease-in-out',
+      'linéaire': 'linear',
+      'lineaire': 'linear'
+    }
+
+    let result = val
+    
+    const varPlaceholders = []
+    result = result.replace(/var\(--[\w\u00C0-\u024F\-]+\)/gi, (match) => {
+      varPlaceholders.push(match)
+      return `__VAR_PLACEHOLDER_${varPlaceholders.length - 1}__`
+    })
+    
+    for (const [fr, en] of Object.entries(keywords)) {
+      const regex = new RegExp(`\\b${fr}\\b`, 'gi')
+      result = result.replace(regex, en)
+    }
+    
+    if (result === val) {
+      const lower = val.toLowerCase()
+      if (lower === 'texte') return 'text'
+    }
+    
+    for (let i = 0; i < varPlaceholders.length; i++) {
+      result = result.replace(`__VAR_PLACEHOLDER_${i}__`, varPlaceholders[i])
+    }
+    
+    return result
+  }
+
+  translateGeneric(text) {
+    const translations = {
+      'couleur': 'color',
+      'fond': 'background',
+      'police': 'font-family',
+      'taille police': 'font-size',
+      'taille-police': 'font-size',
+      'poids police': 'font-weight',
+      'poids-police': 'font-weight',
+      'style police': 'font-style',
+      'style-police': 'font-style',
+      'hauteur ligne': 'line-height',
+      'hauteur-ligne': 'line-height',
+      'espacement-lettres': 'letter-spacing',
+      'espacement lettres': 'letter-spacing',
+      'alignement-texte': 'text-align',
+      'alignement texte': 'text-align',
+      'décoration-texte': 'text-decoration',
+      'décoration texte': 'text-decoration',
+      'decoration-texte': 'text-decoration',
+      'decoration texte': 'text-decoration',
+      'transformation-texte': 'text-transform',
+      'transformation texte': 'text-transform',
+      'ombre-texte': 'text-shadow',
+      'ombre texte': 'text-shadow',
+      'marge': 'margin',
+      'marge haut': 'margin-top',
+      'marge-haut': 'margin-top',
+      'marge bas': 'margin-bottom',
+      'marge-bas': 'margin-bottom',
+      'marge gauche': 'margin-left',
+      'marge-gauche': 'margin-left',
+      'marge droite': 'margin-right',
+      'marge-droite': 'margin-right',
+      'marge dedans': 'padding',
+      'marge-dedans': 'padding',
+      'marge dedans haut': 'padding-top',
+      'marge-dedans-haut': 'padding-top',
+      'marge dedans bas': 'padding-bottom',
+      'marge-dedans-bas': 'padding-bottom',
+      'marge dedans gauche': 'padding-left',
+      'marge-dedans-gauche': 'padding-left',
+      'marge dedans droite': 'padding-right',
+      'marge-dedans-droite': 'padding-right',
+      'bordure': 'border',
+      'bordure haut': 'border-top',
+      'bordure-haut': 'border-top',
+      'bordure bas': 'border-bottom',
+      'bordure-bas': 'border-bottom',
+      'bordure gauche': 'border-left',
+      'bordure-gauche': 'border-left',
+      'bordure droite': 'border-right',
+      'bordure-droite': 'border-right',
+      'couleur-bordure': 'border-color',
+      'couleur bordure': 'border-color',
+      'arrondi': 'border-radius',
+      'largeur': 'width',
+      'hauteur': 'height',
+      'largeur minimum': 'min-width',
+      'largeur-minimum': 'min-width',
+      'largeur maximum': 'max-width',
+      'largeur-maximum': 'max-width',
+      'hauteur minimum': 'min-height',
+      'hauteur-minimum': 'min-height',
+      'hauteur maximum': 'max-height',
+      'hauteur-maximum': 'max-height',
+      'affichage': 'display',
+      'position': 'position',
+      'haut': 'top',
+      'bas': 'bottom',
+      'gauche': 'left',
+      'droite': 'right',
+      'index-z': 'z-index',
+      'z-index': 'z-index',
+      'débordement': 'overflow',
+      'debordement': 'overflow',
+      'débordement-x': 'overflow-x',
+      'debordement-x': 'overflow-x',
+      'débordement-y': 'overflow-y',
+      'debordement-y': 'overflow-y',
+      'opacité': 'opacity',
+      'opacite': 'opacity',
+      'curseur': 'cursor',
+      'transition': 'transition',
+      'animation': 'animation',
+      'transformation': 'transform',
+      'filtre': 'filter',
+      'filtre-fond': 'backdrop-filter',
+      'filtre fond': 'backdrop-filter',
+      'ombre-boîte': 'box-shadow',
+      'ombre-boite': 'box-shadow',
+      'ombre boîte': 'box-shadow',
+      'ombre boite': 'box-shadow',
+      'modèle-boîte': 'box-sizing',
+      'modele-boite': 'box-sizing',
+      'modèle boîte': 'box-sizing',
+      'modele boite': 'box-sizing',
+      'espace': 'gap',
+      'espace ligne': 'row-gap',
+      'espace-ligne': 'row-gap',
+      'espace colonne': 'column-gap',
+      'espace-colonne': 'column-gap',
+      'justifier-contenu': 'justify-content',
+      'justifier contenu': 'justify-content',
+      'aligner-éléments': 'align-items',
+      'aligner-elements': 'align-items',
+      'aligner éléments': 'align-items',
+      'aligner elements': 'align-items',
+      'aligner-contenu': 'align-content',
+      'aligner contenu': 'align-content',
+      'direction-flex': 'flex-direction',
+      'direction flex': 'flex-direction',
+      'enveloppe-flex': 'flex-wrap',
+      'enveloppe flex': 'flex-wrap',
+      'flex': 'flex',
+      'grille': 'display',
+      'colonnes-grille': 'grid-template-columns',
+      'colonnes grille': 'grid-template-columns',
+      'lignes-grille': 'grid-template-rows',
+      'lignes grille': 'grid-template-rows',
+      'style-liste': 'list-style',
+      'style liste': 'list-style',
+      'contenu': 'content',
+      'évènements-pointeur': 'pointer-events',
+      'evenements-pointeur': 'pointer-events',
+      'évènements pointeur': 'pointer-events',
+      'evenements pointeur': 'pointer-events',
+      'découpe-fond': 'background-clip',
+      'decoupe-fond': 'background-clip',
+      'découpe fond': 'background-clip',
+      'decoupe fond': 'background-clip',
+      'couleur-remplissage-texte': '-webkit-text-fill-color',
+      'couleur remplissage texte': '-webkit-text-fill-color',
+      'espace-blanc': 'white-space',
+      'espace blanc': 'white-space',
+      'taille': 'font-size',
+      'poids': 'font-weight',
+      'style': 'font-style',
+      'alignement': 'text-align',
+      'decoration': 'text-decoration',
+      'ombre': 'box-shadow',
+      'ecart': 'gap',
+      'direction': 'flex-direction',
+      'envelopper': 'flex-wrap',
+      'justifier': 'justify-content',
+      'aligner': 'align-items',
+      'visibilite': 'visibility',
+      'visibilité': 'visibility',
+      'redimensionnement': 'resize',
+      'apparence': 'appearance',
+      'contour': 'outline'
     }
 
     const lower = text.toLowerCase()
@@ -374,30 +497,91 @@ class CSSGenerator {
   translateSelector(selector) {
     let result = selector
 
-    result = result.replace(/au survol/gi, ':hover')
-    result = result.replace(/au clic/gi, ':active')
-    result = result.replace(/au focus/gi, ':focus')
-    result = result.replace(/au focus dans/gi, ':focus-within')
-    result = result.replace(/visite/gi, ':visited')
-    result = result.replace(/premier enfant/gi, ':first-child')
-    result = result.replace(/dernier enfant/gi, ':last-child')
-    result = result.replace(/enfant impair/gi, ':nth-child(odd)')
-    result = result.replace(/enfant pair/gi, ':nth-child(even)')
-    result = result.replace(/avant/gi, '::before')
-    result = result.replace(/apres/gi, '::after')
-    result = result.replace(/selection/gi, '::selection')
-    result = result.replace(/placeholder/gi, '::placeholder')
-    result = result.replace(/premiere lettre/gi, '::first-letter')
-    result = result.replace(/premiere ligne/gi, '::first-line')
-    result = result.replace(/coche/gi, ':checked')
-    result = result.replace(/desactive/gi, ':disabled')
-    result = result.replace(/active/gi, ':enabled')
-    result = result.replace(/requis/gi, ':required')
-    result = result.replace(/optionnel/gi, ':optional')
-    result = result.replace(/valide/gi, ':valid')
-    result = result.replace(/invalide/gi, ':invalid')
-    result = result.replace(/vide/gi, ':empty')
-    result = result.replace(/racine/gi, ':root')
+    result = result.replace(/:racine\b/gi, ':root')
+    result = result.replace(/::avant\b/gi, '::before')
+    result = result.replace(/::après\b/gi, '::after')
+    result = result.replace(/::apres\b/gi, '::after')
+    result = result.replace(/::première-lettre\b/gi, '::first-letter')
+    result = result.replace(/::premiere-lettre\b/gi, '::first-letter')
+    result = result.replace(/::première-ligne\b/gi, '::first-line')
+    result = result.replace(/::premiere-ligne\b/gi, '::first-line')
+    result = result.replace(/::sélection\b/gi, '::selection')
+    result = result.replace(/::selection\b/gi, '::selection')
+    result = result.replace(/::marqueur\b/gi, '::marker')
+    
+    result = result.replace(/\bau survol\b/gi, ':hover')
+    result = result.replace(/\bquand survolé\b/gi, ':hover')
+    result = result.replace(/\bquand survole\b/gi, ':hover')
+    result = result.replace(/\ben survol\b/gi, ':hover')
+    result = result.replace(/\bau clic\b/gi, ':active')
+    result = result.replace(/\bquand cliqué\b/gi, ':active')
+    result = result.replace(/\bquand clique\b/gi, ':active')
+    result = result.replace(/\ben clic\b/gi, ':active')
+    result = result.replace(/\bactif\b/gi, ':active')
+    result = result.replace(/\bau focus\b/gi, ':focus')
+    result = result.replace(/\bquand focalisé\b/gi, ':focus')
+    result = result.replace(/\bquand focalise\b/gi, ':focus')
+    result = result.replace(/\ben focus\b/gi, ':focus')
+    result = result.replace(/\bau focus dans\b/gi, ':focus-within')
+    result = result.replace(/\bvisité\b/gi, ':visited')
+    result = result.replace(/\bvisite\b/gi, ':visited')
+    
+    result = result.replace(/\s+(:hover|:active|:focus|:focus-within|:visited|:checked|:disabled|:enabled|:required|:optional|:valid|:invalid|:empty|:target)/gi, '$1')
+    result = result.replace(/\bpremier enfant\b/gi, ':first-child')
+    result = result.replace(/\bdernier enfant\b/gi, ':last-child')
+    result = result.replace(/\benfant impair\b/gi, ':nth-child(odd)')
+    result = result.replace(/\benfant pair\b/gi, ':nth-child(even)')
+    result = result.replace(/\bpremier de type\b/gi, ':first-of-type')
+    result = result.replace(/\bdernier de type\b/gi, ':last-of-type')
+    result = result.replace(/\benfant unique\b/gi, ':only-child')
+    result = result.replace(/\bunique de type\b/gi, ':only-of-type')
+    result = result.replace(/\bvide\b/gi, ':empty')
+    result = result.replace(/\bcible\b/gi, ':target')
+    result = result.replace(/\bcoché\b/gi, ':checked')
+    result = result.replace(/\bcoche\b/gi, ':checked')
+    result = result.replace(/\bdésactivé\b/gi, ':disabled')
+    result = result.replace(/\bdesactive\b/gi, ':disabled')
+    result = result.replace(/\bactivé\b/gi, ':enabled')
+    result = result.replace(/\brequis\b/gi, ':required')
+    result = result.replace(/\boptionnel\b/gi, ':optional')
+    result = result.replace(/\bvalide\b/gi, ':valid')
+    result = result.replace(/\binvalide\b/gi, ':invalid')
+
+    result = result.replace(/\bcorps\b/gi, 'body')
+    result = result.replace(/\btête\b/gi, 'head')
+    result = result.replace(/\btete\b/gi, 'head')
+    result = result.replace(/\btitre1\b/gi, 'h1')
+    result = result.replace(/\btitre2\b/gi, 'h2')
+    result = result.replace(/\btitre3\b/gi, 'h3')
+    result = result.replace(/\btitre4\b/gi, 'h4')
+    result = result.replace(/\btitre5\b/gi, 'h5')
+    result = result.replace(/\btitre6\b/gi, 'h6')
+    result = result.replace(/\bparagraphe\b/gi, 'p')
+    result = result.replace(/\blien\b/gi, 'a')
+    result = result.replace(/\bimage\b/gi, 'img')
+    result = result.replace(/\bbouton\b/gi, 'button')
+    result = result.replace(/\bformulaire\b/gi, 'form')
+    result = result.replace(/\bchamp\b/gi, 'input')
+    result = result.replace(/\bliste\b/gi, 'ul')
+    result = result.replace(/\bliste-ordonnée\b/gi, 'ol')
+    result = result.replace(/\bliste-ordonnee\b/gi, 'ol')
+    result = result.replace(/\bélément-liste\b/gi, 'li')
+    result = result.replace(/\belement-liste\b/gi, 'li')
+    result = result.replace(/\btableau\b/gi, 'table')
+    result = result.replace(/\bligne-tableau\b/gi, 'tr')
+    result = result.replace(/\bcellule\b/gi, 'td')
+    result = result.replace(/\bentête\b/gi, 'header')
+    result = result.replace(/\bentete\b/gi, 'header')
+    result = result.replace(/\bpied\b/gi, 'footer')
+    result = result.replace(/\bnavigation\b/gi, 'nav')
+    result = result.replace(/\bsection\b/gi, 'section')
+    result = result.replace(/\barticle\b/gi, 'article')
+    result = result.replace(/\bcôté\b/gi, 'aside')
+    result = result.replace(/\bcote\b/gi, 'aside')
+    result = result.replace(/\bprincipal\b/gi, 'main')
+    result = result.replace(/\bdivision\b/gi, 'div')
+    result = result.replace(/\bportée\b/gi, 'span')
+    result = result.replace(/\bportee\b/gi, 'span')
 
     return result
   }
@@ -427,12 +611,13 @@ class CSSGenerator {
       'fr': 'fr'
     }
 
+    let result = value
     for (const [fr, css] of Object.entries(unitMap)) {
       const regex = new RegExp(`(\\d+(?:\\.\\d+)?)\\s*${fr}\\b`, 'gi')
-      value = value.replace(regex, `$1${css}`)
+      result = result.replace(regex, `$1${css}`)
     }
 
-    return value
+    return result
   }
 
   generate(ast) {
@@ -482,6 +667,10 @@ class CSSGenerator {
       case 'mediaQuery':
         this.generateMediaQuery(node)
         break
+      case 'Condition':
+      case 'condition':
+        this.generateCondition(node)
+        break
       case 'FontFace':
       case 'fontFace':
         this.generateFontFace(node)
@@ -537,7 +726,7 @@ class CSSGenerator {
     let value = decl.value
 
     if (isRoot) {
-      property = '--' + property.toLowerCase()
+      property = '--' + property.toLowerCase().replace(/\s+/g, '-')
     } else {
       property = this.translateProperty(property)
     }
@@ -554,6 +743,18 @@ class CSSGenerator {
       value += ' !important'
     }
 
+    const needsWebkitPrefix = [
+      'background-clip',
+      'box-decoration-break',
+      'text-stroke',
+      'text-stroke-width',
+      'text-stroke-color'
+    ]
+
+    if (needsWebkitPrefix.includes(property) && !property.startsWith('-webkit-')) {
+      this.writeLine(`-webkit-${property}: ${value};`)
+    }
+
     this.writeLine(`${property}: ${value};`)
   }
 
@@ -620,27 +821,79 @@ class CSSGenerator {
   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 min/gi, 'min-width')
-    query = query.replace(/largeur-max/gi, 'max-width')
-    query = query.replace(/largeur max/gi, 'max-width')
-    query = query.replace(/max-largeur/gi, 'max-width')
-    query = query.replace(/min-largeur/gi, 'min-width')
-    query = query.replace(/hauteur-min/gi, 'min-height')
-    query = query.replace(/hauteur min/gi, 'min-height')
-    query = query.replace(/hauteur-max/gi, 'max-height')
-    query = query.replace(/hauteur max/gi, 'max-height')
-    query = query.replace(/max-hauteur/gi, 'max-height')
-    query = query.replace(/min-hauteur/gi, 'min-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')
+    query = this.translateMediaQuery(query)
+
+    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('')
+  }
+
+  translateMediaQuery(query) {
+    let result = query
+
+    result = result.replace(/écran/gi, 'screen')
+    result = result.replace(/ecran/gi, 'screen')
+    result = result.replace(/imprimante/gi, 'print')
+    result = result.replace(/tous/gi, 'all')
+    result = result.replace(/largeur-min/gi, 'min-width')
+    result = result.replace(/largeur min/gi, 'min-width')
+    result = result.replace(/largeur-max/gi, 'max-width')
+    result = result.replace(/largeur max/gi, 'max-width')
+    result = result.replace(/max-largeur/gi, 'max-width')
+    result = result.replace(/min-largeur/gi, 'min-width')
+    result = result.replace(/hauteur-min/gi, 'min-height')
+    result = result.replace(/hauteur min/gi, 'min-height')
+    result = result.replace(/hauteur-max/gi, 'max-height')
+    result = result.replace(/hauteur max/gi, 'max-height')
+    result = result.replace(/max-hauteur/gi, 'max-height')
+    result = result.replace(/min-hauteur/gi, 'min-height')
+    result = result.replace(/orientation/gi, 'orientation')
+    result = result.replace(/paysage/gi, 'landscape')
+    result = result.replace(/portrait/gi, 'portrait')
+    result = result.replace(/\bet\b/gi, 'and')
+    result = result.replace(/\bou\b/gi, 'or')
+    result = result.replace(/\bpas\b/gi, 'not')
+
+    return result
+  }
+
+  generateCondition(node) {
+    let condition = node.condition || ''
+    let query = ''
+
+    const plusPetitMatch = condition.match(/plus petit que\s+([\d.]+\w*)/i)
+    const plusGrandMatch = condition.match(/plus grand que\s+([\d.]+\w*)/i)
+    const inferieurMatch = condition.match(/inférieur[e]?\s+à\s+([\d.]+\w*)/i) || condition.match(/inferieur[e]?\s+a\s+([\d.]+\w*)/i)
+    const superieurMatch = condition.match(/supérieur[e]?\s+à\s+([\d.]+\w*)/i) || condition.match(/superieur[e]?\s+a\s+([\d.]+\w*)/i)
+    const egalMatch = condition.match(/égal[e]?\s+à\s+([\d.]+\w*)/i) || condition.match(/egal[e]?\s+a\s+([\d.]+\w*)/i)
+    const simpleInfMatch = condition.match(/<\s*([\d.]+\w*)/i)
+    const simpleSupMatch = condition.match(/>\s*([\d.]+\w*)/i)
+
+    if (plusPetitMatch) {
+      query = `(max-width: ${plusPetitMatch[1]})`
+    } else if (plusGrandMatch) {
+      query = `(min-width: ${plusGrandMatch[1]})`
+    } else if (inferieurMatch) {
+      query = `(max-width: ${inferieurMatch[1]})`
+    } else if (superieurMatch) {
+      query = `(min-width: ${superieurMatch[1]})`
+    } else if (egalMatch) {
+      query = `(width: ${egalMatch[1]})`
+    } else if (simpleInfMatch) {
+      query = `(max-width: ${simpleInfMatch[1]})`
+    } else if (simpleSupMatch) {
+      query = `(min-width: ${simpleSupMatch[1]})`
+    } else {
+      query = this.translateMediaQuery(condition)
+    }
 
     this.writeLine(`@media ${query} {`)
     this.indent++