ether-code 0.7.8 → 0.8.0

package/parsers/ether-parser-css.js

@@ -0,0 +1,745 @@
+const { EtherParserBase, TokenType } = require('./ether-parser-base')
+
+class EtherParserCSS extends EtherParserBase {
+  constructor(options = {}) {
+    super(options)
+    this.loadI18n(['i18n-css.json'])
+  }
+
+  parse(source) {
+    this.tokenize(source)
+    return this.parseCSS()
+  }
+
+  parseCSS() {
+    const stylesheet = {
+      type: 'StyleSheet',
+      rules: []
+    }
+    
+    this.skipNewlines()
+    
+    while (!this.isAtEnd()) {
+      const startPos = this.pos
+      const rule = this.parseCSSRule()
+      if (rule) {
+        stylesheet.rules.push(rule)
+      }
+      this.skipNewlines()
+      if (this.pos === startPos && !this.isAtEnd()) {
+        this.advance()
+      }
+    }
+    
+    return stylesheet
+  }
+
+  parseCSSRule() {
+    this.skipNewlines()
+    const token = this.current()
+    if (!token || token.type === TokenType.EOF) return null
+    
+    if (token.type === TokenType.AT) {
+      return this.parseCSSAtRule()
+    }
+    
+    const selector = this.parseCSSSelector()
+    if (!selector) return null
+    
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const declarations = []
+    const nestedRules = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      if (current && current.type === TokenType.NEWLINE) {
+        this.advance()
+        continue
+      }
+      
+      if (!current || current.type === TokenType.EOF) break
+      
+      if (current.type === TokenType.IDENTIFIER) {
+        const value = current.value.toLowerCase()
+        
+        if (value.startsWith('au ') || value === 'au survol' || value === 'au clic' || 
+            value === 'au focus' || value === 'actif' || value === 'visite' ||
+            value.startsWith('premier') || value.startsWith('dernier') ||
+            value.startsWith('avant') || value.startsWith('apres')) {
+          const pseudoRule = this.parseCSSPseudoBlock(selector)
+          if (pseudoRule) nestedRules.push(pseudoRule)
+          continue
+        }
+      }
+      
+      const decl = this.parseCSSDeclaration()
+      if (decl) {
+        declarations.push(decl)
+      } else {
+        this.advance()
+      }
+    }
+    
+    return {
+      type: 'Rule',
+      selector: selector,
+      declarations: declarations,
+      nestedRules: nestedRules
+    }
+  }
+
+  parseCSSSelector() {
+    const parts = []
+    
+    while (!this.isAtEnd()) {
+      const token = this.current()
+      
+      if (!token || token.type === TokenType.NEWLINE || token.type === TokenType.INDENT || 
+          token.type === TokenType.EOF) {
+        break
+      }
+      
+      if (token.type === TokenType.DOUBLE_COLON) {
+        this.advance()
+        const pseudoName = this.current()
+        if (pseudoName && pseudoName.type === TokenType.IDENTIFIER) {
+          parts.push('::' + pseudoName.value)
+          this.advance()
+        }
+      } else if (token.type === TokenType.COLON) {
+        this.advance()
+        const next = this.current()
+        if (next && next.type === TokenType.COLON) {
+          this.advance()
+          const pseudoName = this.current()
+          if (pseudoName && pseudoName.type === TokenType.IDENTIFIER) {
+            parts.push('::' + pseudoName.value)
+            this.advance()
+          }
+        } else if (next && next.type === TokenType.IDENTIFIER) {
+          parts.push(':' + next.value)
+          this.advance()
+        } else {
+          break
+        }
+      } else if (token.type === TokenType.DOT) {
+        this.advance()
+        const name = this.current()
+        if (name && name.type === TokenType.IDENTIFIER) {
+          parts.push('.' + name.value)
+          this.advance()
+        }
+      } else if (token.type === TokenType.HASH) {
+        this.advance()
+        const name = this.current()
+        if (name && name.type === TokenType.IDENTIFIER) {
+          parts.push('#' + name.value)
+          this.advance()
+        }
+      } else if (token.type === TokenType.IDENTIFIER) {
+        parts.push(this.translateCSSSelector(token.value))
+        this.advance()
+      } else if (token.type === TokenType.STAR) {
+        parts.push('*')
+        this.advance()
+      } else if (token.type === TokenType.COMMA) {
+        parts.push(',')
+        this.advance()
+      } else if (token.type === TokenType.GT) {
+        parts.push('>')
+        this.advance()
+      } else if (token.type === TokenType.PLUS) {
+        parts.push('+')
+        this.advance()
+      } else if (token.type === TokenType.TILDE) {
+        parts.push('~')
+        this.advance()
+      } else if (token.type === TokenType.LBRACKET) {
+        let attrSelector = '['
+        this.advance()
+        while (!this.isAtEnd()) {
+          const attrToken = this.current()
+          if (!attrToken || attrToken.type === TokenType.RBRACKET) {
+            attrSelector += ']'
+            this.advance()
+            break
+          }
+          attrSelector += attrToken.value
+          this.advance()
+        }
+        parts.push(attrSelector)
+      } else if (token.type === TokenType.EQUALS) {
+        break
+      } else {
+        break
+      }
+    }
+    
+    return parts.join(' ').replace(/\s+([,>+~])\s+/g, ' $1 ').replace(/\s+(::?)/g, '$1').trim()
+  }
+
+  translateCSSSelector(selector) {
+    const map = this.reverseMaps.css || {}
+    const lower = selector.toLowerCase()
+    
+    const selectorTranslations = {
+      'corps': 'body',
+      'html': 'html',
+      'document': 'html',
+      'tete': 'head',
+      'titre': 'title',
+      'titre1': 'h1',
+      'titre2': 'h2',
+      'titre3': 'h3',
+      'titre4': 'h4',
+      'titre5': 'h5',
+      'titre6': 'h6',
+      'paragraphe': 'p',
+      'lien': 'a',
+      'ressource': 'link',
+      'lien externe': 'link',
+      'image': 'img',
+      'bouton': 'button',
+      'formulaire': 'form',
+      'champ': 'input',
+      'liste': 'ul',
+      'liste ordonnee': 'ol',
+      'element liste': 'li',
+      'tableau': 'table',
+      'ligne': 'tr',
+      'cellule': 'td',
+      'entete': 'header',
+      'piedpage': 'footer',
+      'navigation': 'nav',
+      'section': 'section',
+      'article': 'article',
+      'cote': 'aside',
+      'principal': 'main',
+      'division': 'div',
+      'portee': 'span'
+    }
+    
+    return selectorTranslations[lower] || map[lower] || selector
+  }
+
+  parseCSSDeclaration() {
+    this.skipNewlines()
+    const token = this.current()
+    if (!token || token.type !== TokenType.IDENTIFIER) return null
+    
+    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'],
+      'liste': ['style', 'type', 'position', 'image'],
+    }
+    
+    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)
+    
+    if (!hasColon && !hasEquals) {
+      return null
+    }
+    
+    const valueParts = []
+    let lastType = null
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (!current || current.type === TokenType.NEWLINE || 
+          current.type === TokenType.DEDENT || current.type === TokenType.EOF) {
+        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 (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)
+      } 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.HASH) {
+        if (needsSpace) valueParts.push(' ')
+        valueParts.push('#')
+      } else if (current.type === TokenType.COMMA) {
+        valueParts.push(',')
+      } else if (current.type === TokenType.LPAREN) {
+        valueParts.push('(')
+      } else if (current.type === TokenType.RPAREN) {
+        valueParts.push(')')
+      } 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) {
+        if (current.value === '--') {
+          valueParts.push('--')
+        } else if (lastType === TokenType.LPAREN) {
+          valueParts.push(current.value)
+        } else {
+          valueParts.push(' ' + current.value)
+        }
+      } else if (current.type === TokenType.PLUS) {
+        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, ' ')
+        .trim()
+    }
+  }
+
+  parseCSSPseudoBlock(parentSelector) {
+    const pseudoToken = this.current()
+    const pseudoClass = this.translatePseudoClass(pseudoToken.value)
+    this.advance()
+    
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const declarations = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      if (current && current.type === TokenType.NEWLINE) {
+        this.advance()
+        continue
+      }
+      
+      if (!current || current.type === TokenType.EOF) break
+      
+      const decl = this.parseCSSDeclaration()
+      if (decl) {
+        declarations.push(decl)
+      } else {
+        this.advance()
+      }
+    }
+    
+    return {
+      type: 'Rule',
+      selector: `${parentSelector}${pseudoClass}`,
+      declarations: declarations
+    }
+  }
+
+  translatePseudoClass(value) {
+    const map = {
+      'au survol': ':hover',
+      'au clic': ':active',
+      'actif': ':active',
+      'au focus': ':focus',
+      'focus': ':focus',
+      'visite': ':visited',
+      'premier enfant': ':first-child',
+      'dernier enfant': ':last-child',
+      'premier de type': ':first-of-type',
+      'dernier de type': ':last-of-type',
+      'enfant unique': ':only-child',
+      'unique de type': ':only-of-type',
+      'vide': ':empty',
+      'cible': ':target',
+      'coche': ':checked',
+      'desactive': ':disabled',
+      'active': ':enabled',
+      'requis': ':required',
+      'optionnel': ':optional',
+      'valide': ':valid',
+      'invalide': ':invalid',
+      'lecture seule': ':read-only',
+      'lecture ecriture': ':read-write',
+      'avant': '::before',
+      'apres': '::after',
+      'premiere lettre': '::first-letter',
+      'premiere ligne': '::first-line',
+      'selection': '::selection',
+      'placeholder': '::placeholder',
+      'marqueur': '::marker'
+    }
+    
+    const lower = value.toLowerCase()
+    return map[lower] || ':' + lower.replace(/\s+/g, '-')
+  }
+
+  parseCSSAtRule() {
+    this.advance()
+    const nameToken = this.current()
+    
+    if (!nameToken) return null
+    
+    const name = nameToken.value.toLowerCase()
+    this.advance()
+    
+    if (name === 'media' || name === 'requete media' || name === 'ecran' || name === 'si') {
+      return this.parseCSSMediaQuery()
+    }
+    
+    if (name === 'keyframes' || name === 'images cles' || name === 'animation') {
+      return this.parseCSSKeyframes()
+    }
+    
+    if (name === 'import' || name === 'importer') {
+      return this.parseCSSImport()
+    }
+    
+    if (name === 'font-face' || name === 'police') {
+      return this.parseCSSFontFace()
+    }
+    
+    if (name === 'container' || name === 'conteneur') {
+      return this.parseCSSContainerQuery()
+    }
+    
+    return null
+  }
+
+  parseCSSMediaQuery() {
+    const queryParts = []
+    
+    while (!this.isAtEnd()) {
+      const token = this.current()
+      
+      if (!token || token.type === TokenType.NEWLINE || token.type === TokenType.INDENT) {
+        break
+      }
+      
+      queryParts.push(token.value)
+      this.advance()
+    }
+    
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const rules = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      const rule = this.parseCSSRule()
+      if (rule) {
+        rules.push(rule)
+      }
+      
+      this.skipNewlines()
+    }
+    
+    return {
+      type: 'MediaQuery',
+      query: this.translateMediaQuery(queryParts.join(' ')),
+      rules: rules
+    }
+  }
+
+  translateMediaQuery(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\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(/\bet\b/gi, 'and')
+      .replace(/\bou\b/gi, 'or')
+      .replace(/\bpas\b/gi, 'not')
+    
+    return result
+  }
+
+  parseCSSKeyframes() {
+    const nameToken = this.current()
+    const name = nameToken ? nameToken.value : 'animation'
+    if (nameToken) this.advance()
+    
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const keyframes = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      if (current && current.type === TokenType.NEWLINE) {
+        this.advance()
+        continue
+      }
+      
+      const keyframe = this.parseCSSKeyframe()
+      if (keyframe) {
+        keyframes.push(keyframe)
+      }
+    }
+    
+    return {
+      type: 'Keyframes',
+      name: name,
+      keyframes: keyframes
+    }
+  }
+
+  parseCSSKeyframe() {
+    const token = this.current()
+    if (!token) return null
+    
+    let selector = token.value
+    
+    const selectorMap = {
+      'debut': 'from',
+      'fin': 'to',
+      'de': 'from',
+      'a': 'to',
+      'vers': 'to'
+    }
+    
+    selector = selectorMap[selector.toLowerCase()] || selector
+    this.advance()
+    
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const declarations = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      if (current && current.type === TokenType.NEWLINE) {
+        this.advance()
+        continue
+      }
+      
+      const decl = this.parseCSSDeclaration()
+      if (decl) {
+        declarations.push(decl)
+      }
+    }
+    
+    return {
+      type: 'Keyframe',
+      selector: selector,
+      declarations: declarations
+    }
+  }
+
+  parseCSSImport() {
+    const urlToken = this.current()
+    const url = urlToken ? urlToken.value.replace(/['"]/g, '') : ''
+    if (urlToken) this.advance()
+    
+    return {
+      type: 'Import',
+      url: url
+    }
+  }
+
+  parseCSSFontFace() {
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const declarations = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      if (current && current.type === TokenType.NEWLINE) {
+        this.advance()
+        continue
+      }
+      
+      const decl = this.parseCSSDeclaration()
+      if (decl) {
+        declarations.push(decl)
+      }
+    }
+    
+    return {
+      type: 'FontFace',
+      declarations: declarations
+    }
+  }
+
+  parseCSSContainerQuery() {
+    const queryParts = []
+    
+    while (!this.isAtEnd()) {
+      const token = this.current()
+      
+      if (!token || token.type === TokenType.NEWLINE || token.type === TokenType.INDENT) {
+        break
+      }
+      
+      queryParts.push(token.value)
+      this.advance()
+    }
+    
+    this.skipNewlines()
+    this.match(TokenType.INDENT)
+    
+    const rules = []
+    
+    while (!this.isAtEnd()) {
+      const current = this.current()
+      
+      if (current && current.type === TokenType.DEDENT) {
+        this.advance()
+        break
+      }
+      
+      const rule = this.parseCSSRule()
+      if (rule) {
+        rules.push(rule)
+      }
+      
+      this.skipNewlines()
+    }
+    
+    return {
+      type: 'ContainerQuery',
+      query: queryParts.join(' '),
+      rules: rules
+    }
+  }
+
+  parseStatement(lang) {
+    return null
+  }
+
+  parseExpression(lang) {
+    return null
+  }
+}
+
+module.exports = { EtherParserCSS }