ether-code 0.3.2 → 0.3.4

package/cli/ether.js

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

package/ether-parser.js

@@ -434,6 +434,8 @@ class EtherParser {
         valueParts.push('%')
       } else if (current.type === TokenType.SLASH) {
         valueParts.push('/')
+      } else if (current.type === TokenType.MINUS) {
+        valueParts.push('-')
       } else {
         break
       }
@@ -444,7 +446,13 @@ class EtherParser {
     return {
       type: 'Declaration',
       property: property,
-      value: valueParts.join(' ').replace(/\s+/g, ' ').trim()
+      value: valueParts.join(' ')
+        .replace(/\(\s+/g, '(')
+        .replace(/\s+\)/g, ')')
+        .replace(/\s+,/g, ',')
+        .replace(/-\s+/g, '-')
+        .replace(/\s+/g, ' ')
+        .trim()
     }
   }
 

package/generators/css-generator.js

@@ -127,6 +127,140 @@ class CSSGenerator {
 
   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',
@@ -135,7 +269,7 @@ class CSSGenerator {
       'style': 'font-style',
       'alignement': 'text-align',
       'decoration': 'text-decoration',
-      'transformation': 'text-transform',
+      'transformation': 'transform',
       'debordement': 'overflow',
       'largeur': 'width',
       'hauteur': 'height',
@@ -144,7 +278,6 @@ class CSSGenerator {
       'bordure': 'border',
       'arrondi': 'border-radius',
       'ombre': 'box-shadow',
-      'ombre texte': 'text-shadow',
       'affichage': 'display',
       'position': 'position',
       'haut': 'top',
@@ -167,6 +300,7 @@ class CSSGenerator {
       'lignes': 'grid-template-rows',
       'zone': 'grid-area',
       'ecart': 'gap',
+      'espace': 'gap',
       'direction': 'flex-direction',
       'envelopper': 'flex-wrap',
       'justifier': 'justify-content',
@@ -221,10 +355,10 @@ class CSSGenerator {
       'contenir': 'contain',
       'remplir': 'fill',
       'bloc': 'block',
-      'en ligne': 'inline',
-      'flex': 'flex',
-      'grille': 'grid',
-      'aucun': 'none'
+      'en-ligne': 'inline',
+      'bloc-en-ligne': 'inline-block',
+      'flex-en-ligne': 'inline-flex',
+      'grille-en-ligne': 'inline-grid'
     }
 
     const lower = text.toLowerCase()
@@ -477,10 +611,18 @@ class CSSGenerator {
     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')
@@ -567,4 +709,4 @@ class CSSGenerator {
 
 module.exports = {
   CSSGenerator
-}
+}

package/package.json

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