ether-code 0.4.0 → 0.4.2

package/cli/ether.js

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

package/ether-parser.js

@@ -436,6 +436,7 @@ class EtherParser {
     }
     
     const valueParts = []
+    let lastType = null
     
     while (!this.isAtEnd()) {
       const current = this.current()
@@ -445,21 +446,31 @@ class EtherParser {
         break
       }
       
+      let needsSpace = valueParts.length > 0
+      
+      if (current.type === TokenType.LPAREN || current.type === TokenType.COMMA ||
+          current.type === TokenType.RPAREN || current.type === TokenType.PERCENT ||
+          lastType === TokenType.LPAREN || lastType === TokenType.MINUS ||
+          lastType === TokenType.HASH || lastType === TokenType.COLON) {
+        needsSpace = false
+      }
+      
       if (current.type === TokenType.IDENTIFIER) {
+        if (needsSpace) valueParts.push(' ')
         valueParts.push(current.value)
       } else if (current.type === TokenType.NUMBER || current.type === TokenType.INTEGER || 
                  current.type === TokenType.FLOAT) {
+        if (needsSpace && lastType !== TokenType.HASH) valueParts.push(' ')
         valueParts.push(current.value)
       } else if (current.type === TokenType.STRING) {
+        if (needsSpace) valueParts.push(' ')
+        valueParts.push('"' + current.value + '"')
+      } else if (current.type === TokenType.HEX) {
+        if (needsSpace) valueParts.push(' ')
         valueParts.push(current.value)
-      } else if (current.type === TokenType.HEX || current.type === TokenType.HASH) {
-        const next = this.peek(1)
-        if (next && (next.type === TokenType.IDENTIFIER || next.type === TokenType.NUMBER)) {
-          this.advance()
-          valueParts.push('#' + next.value)
-        } else {
-          valueParts.push('#')
-        }
+      } else if (current.type === TokenType.HASH) {
+        if (needsSpace) valueParts.push(' ')
+        valueParts.push('#')
       } else if (current.type === TokenType.COMMA) {
         valueParts.push(',')
       } else if (current.type === TokenType.LPAREN) {
@@ -469,25 +480,33 @@ class EtherParser {
       } else if (current.type === TokenType.PERCENT) {
         valueParts.push('%')
       } else if (current.type === TokenType.SLASH) {
+        if (needsSpace) valueParts.push(' ')
         valueParts.push('/')
       } else if (current.type === TokenType.MINUS) {
-        valueParts.push('-')
+        if (lastType === TokenType.LPAREN || lastType === TokenType.MINUS) {
+          valueParts.push('-')
+        } else if (needsSpace) {
+          valueParts.push(' -')
+        } else {
+          valueParts.push('-')
+        }
+      } else if (current.type === TokenType.COLON) {
+        valueParts.push(':')
+      } else if (current.type === TokenType.DOT) {
+        valueParts.push('.')
       } else {
         break
       }
       
+      lastType = current.type
       this.advance()
     }
     
     return {
       type: 'Declaration',
       property: property,
-      value: valueParts.join(' ')
-        .replace(/\(\s+/g, '(')
-        .replace(/\s+\)/g, ')')
-        .replace(/\s+,/g, ',')
-        .replace(/-\s+/g, '-')
-        .replace(/(\d+)\s+(%|px|em|rem|vh|vw|vmin|vmax|fr|s|ms|deg)/gi, '$1$2')
+      value: valueParts.join('')
+        .replace(/,\s*/g, ', ')
         .replace(/\s+/g, ' ')
         .trim()
     }

package/generators/css-generator.js

@@ -70,6 +70,11 @@ class CSSGenerator {
     addToMap(this.propertyMap, this.i18n.zIndex)
     addToMap(this.propertyMap, this.i18n.boxShadow)
     addToMap(this.propertyMap, this.i18n.textShadow)
+    addToMap(this.propertyMap, this.i18n.synonymes)
+    addToMap(this.propertyMap, this.i18n.aliases)
+    addToMap(this.propertyMap, this.i18n.padding)
+    addToMap(this.propertyMap, this.i18n.margin)
+    addToMap(this.propertyMap, this.i18n.border)
 
     addToMap(this.valueMap, this.i18n.alignment)
     addToMap(this.valueMap, this.i18n.direction)
@@ -127,11 +132,11 @@ class CSSGenerator {
       return `var(--${varName})`
     })
     
-    result = result.replace(/dégradé linéaire:\s*/gi, 'linear-gradient(')
+    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(/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(/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)')
@@ -140,30 +145,30 @@ class CSSGenerator {
     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(/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(/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(/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(/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) => {
+    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(/é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(/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)')
     
@@ -226,16 +231,16 @@ class CSSGenerator {
       'aucun': 'none',
       'aucune': 'none',
       'auto': 'auto',
-      'hériter': 'inherit',
+      'hériter': 'inherit',
       'heriter': 'inherit',
       'initial': 'initial',
-      'caché': 'hidden',
+      'caché': 'hidden',
       'cache': 'hidden',
       'visible': 'visible',
-      'défiler': 'scroll',
+      'défiler': 'scroll',
       'defiler': 'scroll',
       'fixe': 'fixed',
-      'fixée': 'fixed',
+      'fixée': 'fixed',
       'fixee': 'fixed',
       'absolue': 'absolute',
       'absolu': 'absolute',
@@ -245,17 +250,17 @@ class CSSGenerator {
       'collant': 'sticky',
       'collante': 'sticky',
       'centre': 'center',
-      'centré': 'center',
-      'début': 'flex-start',
+      'centré': 'center',
+      'début': 'flex-start',
       'debut': 'flex-start',
       'fin': 'flex-end',
       'espace-entre': 'space-between',
       'espace entre': 'space-between',
       'espace-autour': 'space-around',
       'espace autour': 'space-around',
-      'espace-égal': 'space-evenly',
+      'espace-égal': 'space-evenly',
       'espace egal': 'space-evenly',
-      'étirer': 'stretch',
+      'étirer': 'stretch',
       'etirer': 'stretch',
       'ligne': 'row',
       'colonne': 'column',
@@ -269,9 +274,9 @@ class CSSGenerator {
       'gras': 'bold',
       'normal': 'normal',
       'italique': 'italic',
-      'souligné': 'underline',
+      'souligné': 'underline',
       'souligne': 'underline',
-      'barré': 'line-through',
+      'barré': 'line-through',
       'barre': 'line-through',
       'majuscules': 'uppercase',
       'minuscules': 'lowercase',
@@ -292,14 +297,14 @@ class CSSGenerator {
       'grille': 'grid',
       'grille-en-ligne': 'inline-grid',
       'grille en ligne': 'inline-grid',
-      'préservé': 'pre',
+      'préservé': 'pre',
       'preserve': 'pre',
-      'pré-ligne': 'pre-line',
+      'pré-ligne': 'pre-line',
       'pre-ligne': 'pre-line',
-      'pré-enveloppe': 'pre-wrap',
+      'pré-enveloppe': 'pre-wrap',
       'pre-enveloppe': 'pre-wrap',
       'solide': 'solid',
-      'pointillée': 'dotted',
+      'pointillée': 'dotted',
       'pointillee': 'dotted',
       'tirets': 'dashed',
       'double': 'double',
@@ -308,7 +313,7 @@ class CSSGenerator {
       'ease-in': 'ease-in',
       'ease-out': 'ease-out',
       'ease-in-out': 'ease-in-out',
-      'linéaire': 'linear',
+      'linéaire': 'linear',
       'lineaire': 'linear'
     }
 
@@ -354,8 +359,8 @@ class CSSGenerator {
       'espacement lettres': 'letter-spacing',
       'alignement-texte': 'text-align',
       'alignement texte': 'text-align',
-      'décoration-texte': 'text-decoration',
-      'décoration texte': 'text-decoration',
+      'décoration-texte': 'text-decoration',
+      'décoration texte': 'text-decoration',
       'decoration-texte': 'text-decoration',
       'decoration texte': 'text-decoration',
       'transformation-texte': 'text-transform',
@@ -411,13 +416,13 @@ class CSSGenerator {
       'droite': 'right',
       'index-z': 'z-index',
       'z-index': 'z-index',
-      'débordement': 'overflow',
+      'débordement': 'overflow',
       'debordement': 'overflow',
-      'débordement-x': 'overflow-x',
+      'débordement-x': 'overflow-x',
       'debordement-x': 'overflow-x',
-      'débordement-y': 'overflow-y',
+      'débordement-y': 'overflow-y',
       'debordement-y': 'overflow-y',
-      'opacité': 'opacity',
+      'opacité': 'opacity',
       'opacite': 'opacity',
       'curseur': 'cursor',
       'transition': 'transition',
@@ -426,13 +431,13 @@ class CSSGenerator {
       'filtre': 'filter',
       'filtre-fond': 'backdrop-filter',
       'filtre fond': 'backdrop-filter',
-      'ombre-boîte': 'box-shadow',
+      'ombre-boîte': 'box-shadow',
       'ombre-boite': 'box-shadow',
-      'ombre boîte': 'box-shadow',
+      'ombre boîte': 'box-shadow',
       'ombre boite': 'box-shadow',
-      'modèle-boîte': 'box-sizing',
+      'modèle-boîte': 'box-sizing',
       'modele-boite': 'box-sizing',
-      'modèle boîte': 'box-sizing',
+      'modèle boîte': 'box-sizing',
       'modele boite': 'box-sizing',
       'espace': 'gap',
       'espace ligne': 'row-gap',
@@ -441,9 +446,9 @@ class CSSGenerator {
       'espace-colonne': 'column-gap',
       'justifier-contenu': 'justify-content',
       'justifier contenu': 'justify-content',
-      'aligner-éléments': 'align-items',
+      'aligner-éléments': 'align-items',
       'aligner-elements': 'align-items',
-      'aligner éléments': 'align-items',
+      'aligner éléments': 'align-items',
       'aligner elements': 'align-items',
       'aligner-contenu': 'align-content',
       'aligner contenu': 'align-content',
@@ -460,13 +465,13 @@ class CSSGenerator {
       'style-liste': 'list-style',
       'style liste': 'list-style',
       'contenu': 'content',
-      'évènements-pointeur': 'pointer-events',
+      'évènements-pointeur': 'pointer-events',
       'evenements-pointeur': 'pointer-events',
-      'évènements pointeur': 'pointer-events',
+      'évènements pointeur': 'pointer-events',
       'evenements pointeur': 'pointer-events',
-      'découpe-fond': 'background-clip',
+      'découpe-fond': 'background-clip',
       'decoupe-fond': 'background-clip',
-      'découpe 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',
@@ -484,7 +489,7 @@ class CSSGenerator {
       'justifier': 'justify-content',
       'aligner': 'align-items',
       'visibilite': 'visibility',
-      'visibilité': 'visibility',
+      'visibilité': 'visibility',
       'redimensionnement': 'resize',
       'apparence': 'appearance',
       'contour': 'outline'
@@ -499,31 +504,31 @@ class CSSGenerator {
 
     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(/::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(/::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(/::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(/::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 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 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 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(/\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')
@@ -537,18 +542,18 @@ class CSSGenerator {
     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(/\bcoché\b/gi, ':checked')
     result = result.replace(/\bcoche\b/gi, ':checked')
-    result = result.replace(/\bdésactivé\b/gi, ':disabled')
+    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(/\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(/\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')
@@ -563,24 +568,24 @@ class CSSGenerator {
     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-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(/\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(/\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(/\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(/\bportée\b/gi, 'span')
     result = result.replace(/\bportee\b/gi, 'span')
 
     return result
@@ -839,7 +844,7 @@ class CSSGenerator {
   translateMediaQuery(query) {
     let result = query
 
-    result = result.replace(/écran/gi, 'screen')
+    result = result.replace(/écran/gi, 'screen')
     result = result.replace(/ecran/gi, 'screen')
     result = result.replace(/imprimante/gi, 'print')
     result = result.replace(/tous/gi, 'all')
@@ -871,9 +876,9 @@ class CSSGenerator {
 
     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 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)