Tradutores, serializadores e aninhamentos.

execucao.ts

@@ -7,6 +7,11 @@ const principal = () => {
 
     analisadorArgumentos
         .argument('[arquivos...]', 'Nomes dos arquivos (opcional)')
+        .option(
+            '-a, --aninhamento',
+            'Gera CSS com aninhamento. Não recomendado usar se o CSS executar em navegadores antigos.',
+            false
+        )
         .action((arquivos) => {
             if (arquivos.length > 0) {
                 nomeArquivo = arquivos[0];
@@ -21,12 +26,14 @@ const principal = () => {
         return;
     }
 
-    const foles = new FolEs();
+    const foles = new FolEs(opcoes.aninhamento);
 
     if (nomeArquivo.endsWith("foles")) {
         console.log(foles.converterParaCss(nomeArquivo));
         return;
-    } else if (nomeArquivo.endsWith("css")) {
+    } 
+
+    if (nomeArquivo.endsWith("css")) {
         const retorno = foles.converterParaFolEs(nomeArquivo);
         console.log(retorno);
         return;

exemplos/reverso/exemplo.css

@@ -1,2 +1,12 @@
-html{font-size:12px;}
-body{font-size:16px;max-width:20cm;}
+html {
+    font-size:12px;
+}
+
+body {
+    font-size:16px;
+    max-width:20cm;
+
+    p {
+        color: #999;
+    }
+}

fontes/avaliador-sintatico/avaliador-sintatico-reverso.ts

@@ -9,6 +9,7 @@
 import tiposDeSimbolos from "../tipos-de-simbolos/css";
 import { Seletor } from "../seletores";
 import { AvaliadorSintaticoInterface, ImportadorInterface } from "../interfaces";
+import { HexadecimalCor } from "../valores/metodos/hexadecimal-cor";
 
 export class AvaliadorSintaticoReverso implements AvaliadorSintaticoInterface {
     simbolos: Simbolo[];
@@ -121,59 +122,96 @@
         return seletores;
     }
 
-    resolverModificadores(): Modificador[] {
-        // const simboloSeletor = this.avancarEDevolverAnterior();
+    private resolverCor() {
+        const codigoCor = this.avancarEDevolverAnterior();
+        return new HexadecimalCor(codigoCor.lexema);
+    }
+
+    private valorModificador() {
+        const valorModificador = this.avancarEDevolverAnterior();
+
+        switch (valorModificador.tipo) {
+            case tiposDeSimbolos.CERQUILHA:
+                return this.resolverCor();
+            default:
+                return valorModificador;
+        }
+    }
+
+    private resolverModificador(): Modificador {
+        const modificador = this.consumir(
+            tiposDeSimbolos.IDENTIFICADOR,
+            "Esperado nome do atributo de identificação."
+        );
 
         this.consumir(
-            tiposDeSimbolos.CHAVE_ESQUERDA,
-            "Esperado '{' após declaração de seletor."
+            tiposDeSimbolos.DOIS_PONTOS,
+            `Esperado ':' após declaração de modificador '${modificador.lexema}'.`
         );
 
-        const modificadores: Modificador[] = [];
-        while (!this.verificarTipoSimboloAtual(tiposDeSimbolos.CHAVE_DIREITA)) {
-            const modificador = this.consumir(
-                tiposDeSimbolos.IDENTIFICADOR,
-                "Esperado nome do atributo de identificação."
-            );
+        const valorModificador = this.valorModificador();
+        let quantificador;
+        if (valorModificador instanceof Simbolo && valorModificador.tipo === tiposDeSimbolos.NUMERO) {
+            quantificador = this.avancarEDevolverAnterior();
+        }
 
-            this.consumir(
-                tiposDeSimbolos.DOIS_PONTOS,
-                `Esperado ':' após declaração de modificador '${modificador.lexema}'.`
-            );
+        this.consumir(
+            tiposDeSimbolos.PONTO_E_VIRGULA,
+            `Esperado ';' após declaração de valor de modificador '${modificador.lexema}'.`
+        );
 
-            const valorModificador = this.avancarEDevolverAnterior();
-            const quantificador = this.avancarEDevolverAnterior();
+        const classeModificadora = new SeletorReversoModificador(
+            modificador.lexema,
+            valorModificador instanceof Simbolo ? valorModificador.lexema : valorModificador,
+            quantificador && quantificador.hasOwnProperty('lexema') ? 
+                quantificador.lexema :
+                quantificador
+        );
+
+        return classeModificadora as Modificador;
+    }
 
-            this.consumir(
-                tiposDeSimbolos.PONTO_E_VIRGULA,
-                `Esperado ';' após declaração de valor de modificador '${modificador.lexema}'.`
-            );
+    resolverModificadorEDeclaracoesAninhadas(): { modificadores: Modificador[], declaracoesAninhadas: Declaracao[] } {
+        this.consumir(
+            tiposDeSimbolos.CHAVE_ESQUERDA,
+            "Esperado '{' após declaração de seletor."
+        );
 
-            const classeModificadora = new SeletorReversoModificador(
-                modificador.lexema,
-                valorModificador.lexema,
-                quantificador.lexema
-            );
-            modificadores.push(classeModificadora as Modificador);
+        const modificadores: Modificador[] = [];
+        const declaracoesAninhadas: Declaracao[] = [];
+        while (!this.verificarTipoSimboloAtual(tiposDeSimbolos.CHAVE_DIREITA)) {
+            switch (this.simbolos[this.atual].tipo) {
+                case tiposDeSimbolos.IDENTIFICADOR:
+                    const modificador = this.resolverModificador();
+                    modificadores.push(modificador);
+                    break;
+                default:
+                    const declaracaoAninhada = this.declaracao();
+                    declaracoesAninhadas.push(declaracaoAninhada);
+                    break;
+            }
         }
 
         this.avancarEDevolverAnterior(); // chave direita
-        return modificadores;
+        return { 
+            modificadores,
+            declaracoesAninhadas
+        };
     }
 
-    declaracao(): any {
+    declaracao(): Declaracao | null {
         if (this.estaNoFinal()) return null;
         const seletores = this.resolverSeletores();
-        const modificadores = this.resolverModificadores();
+        const modificadorEDeclaracoesAninhadas = this.resolverModificadorEDeclaracoesAninhadas();
 
         return new Declaracao(
             seletores,
-            modificadores,
-            []
+            modificadorEDeclaracoesAninhadas.modificadores,
+            modificadorEDeclaracoesAninhadas.declaracoesAninhadas
         );
     }
 
-    analisar(simbolos: Simbolo[]) {
+    analisar(simbolos: Simbolo[]): Declaracao[] {
         this.simbolos = simbolos;
         this.erros = [];
         this.atual = 0;

fontes/foles.ts

@@ -2,8 +2,8 @@ import { AvaliadorSintatico } from "./avaliador-sintatico";
 import { AvaliadorSintaticoReverso } from './avaliador-sintatico/avaliador-sintatico-reverso';
 import { Lexador } from "./lexador";
 import { LexadorReverso } from './lexador/lexador-reverso';
-import { Tradutor } from "./tradutor";
-import { TradutorReverso } from './tradutor/tradutor-reverso';
+import { Serializador } from "./serializadores";
+import { SerializadorReverso } from './serializadores/serializador-reverso';
 import { Importador } from './importador';
 import { ResultadoLexadorInterface, SimboloInterface } from './interfaces';
 
@@ -17,19 +17,19 @@ export class FolEs {
     avaliadorSintaticoReverso: AvaliadorSintaticoReverso;
     importador: Importador;
     importadorReverso: Importador;
-    tradutor: Tradutor;
-    tradutorReverso: TradutorReverso;
+    tradutor: Serializador;
+    tradutorReverso: SerializadorReverso;
 
-    constructor() {
+    constructor(traduzirComAninhamentos: boolean) {
         this.lexador = new Lexador();
         this.lexadorReverso = new LexadorReverso();
         this.importador = new Importador(this.lexador);
         this.importadorReverso = new Importador(this.lexadorReverso);
         this.importadorReverso.extensaoPadrao = ".css";
         this.avaliadorSintatico = new AvaliadorSintatico(this.importador);
         this.avaliadorSintaticoReverso = new AvaliadorSintaticoReverso(this.importadorReverso);
-        this.tradutor = new Tradutor();
-        this.tradutorReverso = new TradutorReverso();
+        this.tradutor = new Serializador(traduzirComAninhamentos);
+        this.tradutorReverso = new SerializadorReverso(traduzirComAninhamentos);
     }
 
     /**
@@ -39,13 +39,13 @@ export class FolEs {
      */
     private converterParaCssInterno(simbolos: SimboloInterface[]): string {
         const resultadoAvaliadorSintatico = this.avaliadorSintatico.analisar(simbolos);
-        const traducao = this.tradutor.traduzir(resultadoAvaliadorSintatico);
+        const traducao = this.tradutor.serializar(resultadoAvaliadorSintatico);
         return traducao;
     }
 
     private converterParaFolEsInterno(simbolos: SimboloInterface[]): string {
         const resultadoAvaliadorSintaticoReverso = this.avaliadorSintaticoReverso.analisar(simbolos);
-        const traducaoReversa = this.tradutorReverso.traduzir(resultadoAvaliadorSintaticoReverso);
+        const traducaoReversa = this.tradutorReverso.serializar(resultadoAvaliadorSintaticoReverso);
         return traducaoReversa;
     }
 

fontes/lexador/lexador-reverso.ts

@@ -189,6 +189,10 @@
                 this.adicionarSimbolo(tiposDeSimbolos.PONTO_E_VIRGULA);
                 this.avancar();
                 break;
+            case '#':
+                this.adicionarSimbolo(tiposDeSimbolos.CERQUILHA);
+                this.avancar();
+                break;
             case ' ':
                 case '\0':
                 case '\r':

fontes/lexador/palavras-reservadas/css.ts

@@ -1,6 +1,8 @@
 import tiposDeSimbolos from "../../tipos-de-simbolos/css";
 
 export default {
+    'body': tiposDeSimbolos.TAG,
+    'head': tiposDeSimbolos.TAG,
     'html': tiposDeSimbolos.TAG,
-    'body': tiposDeSimbolos.TAG
+    'p': tiposDeSimbolos.TAG
 }

fontes/modificadores/largura-borda-direita.ts

@@ -12,7 +12,7 @@ export class LarguraBordaDireita extends Modificador {
     }
 
     constructor(valor: string, quantificador?: string, pragmas?: PragmasModificador) {
-        super("largura-borda-direita", "border-right-width");
+        super("largura-borda-direita", "border-right-width", pragmas);
 
         validarValorNumerico('largura-borda-direita', valor, this.valoresAceitos);
 

fontes/modificadores/superclasse/seletor-reverso-modificador.ts

@@ -1,7 +1,9 @@
+import { Metodo } from "../../valores/metodos/metodo";
 import { DicionarioReversoModificadores } from "../dicionario/dicionario-reverso-modificadores";
+import { PragmasModificador } from "./pragmas-modificador";
 
 export class SeletorReversoModificador {
-    constructor(nomeCss: string, valor: string, quantificador: string) {
+    constructor(nomeCss: string, valor: string | Metodo, quantificador: string, pragmas?: PragmasModificador) {
         if (
             DicionarioReversoModificadores[nomeCss] === undefined || 
             DicionarioReversoModificadores[nomeCss] === null

fontes/modificadores/validacoes/cor.ts

@@ -1,4 +1,4 @@
-import { Hex } from "../../valores/metodos/hex";
+import { HexadecimalCor } from "../../valores/metodos/hexadecimal-cor";
 import { Metodo } from "../../valores/metodos/metodo";
 import { cores } from "../atributos/cores";
 import { valoresGlobais } from "../atributos/globais";
@@ -9,7 +9,7 @@ export function validarValorCor(
     valoresAceitos?: { [valorFoles: string]: string },
     valoresExtra?: { [valorFoles: string]: string }) {
     if (valor instanceof Metodo) {
-        if (valor instanceof Hex) {
+        if (valor instanceof HexadecimalCor) {
             if (valor['codigo'].length !== 3 && valor['codigo'].length !== 6) {
                 throw new Error(`Propriedade '${nomePropriedade}' com hexadecimal inválido: '${valor['codigo']}'. Hexadecimais
                     devem ter 3 ou 6 caracteres após a cerquilha, sendo cada caracter de 0 até 9 ou de A até F.`);

fontes/seletores/seletor-classe.ts

@@ -7,9 +7,8 @@
     pragmas?: PragmasSeletor;
 
     constructor(nomeClasse: string, pseudoclasse?: Pseudoclasse, pragmas?: PragmasSeletor) {
-        super(pseudoclasse);
+        super(pseudoclasse, pragmas);
         this.nomeClasse = nomeClasse;
-        this.pragmas = pragmas;
     }
 
     paraTexto() {

fontes/seletores/seletor-espaco-reservado.ts

@@ -6,12 +6,10 @@
  */
 export class SeletorEspacoReservado extends Seletor {
     nome: string;
-    pragmas?: PragmasSeletor;
 
     constructor(nome: string, pragmas?: PragmasSeletor) {
-        super(undefined);
+        super(undefined, pragmas);
         this.nome = nome;
-        this.pragmas = pragmas;
     }
 
     paraTexto() {

fontes/seletores/seletor-estrutura.ts

@@ -1,12 +1,17 @@
 import { Estrutura } from "../estruturas/estrutura";
 import { Pseudoclasse } from "../pseudoclasses/pseudoclasse";
+import { PragmasSeletor } from "./pragmas-seletor";
 import { Seletor } from "./seletor";
 
 export class SeletorEstrutura extends Seletor {
     estrutura: Estrutura;
 
     constructor(estrutura: Estrutura, pseudoclasse?: Pseudoclasse) {
-        super(pseudoclasse);
+        super(pseudoclasse, {
+            linha: estrutura.pragmas.linha,
+            colunaInicial: estrutura.pragmas.colunaInicial,
+            colunaFinal: estrutura.pragmas.colunaFinal
+        });
         this.estrutura = estrutura;
     }
 

fontes/seletores/seletor.ts

@@ -1,11 +1,14 @@
 import { Pseudoclasse } from "../pseudoclasses/pseudoclasse";
+import { PragmasSeletor } from "./pragmas-seletor";
 
 export abstract class Seletor {
     pseudoclasse?: Pseudoclasse;
+    pragmas?: PragmasSeletor;
 
-    constructor(pseudoclasse?: Pseudoclasse) {
+    constructor(pseudoclasse?: Pseudoclasse, pragmas?: PragmasSeletor) {
         this.pseudoclasse = pseudoclasse;
+        this.pragmas = pragmas;
     }
 
     abstract paraTexto();
-}
+}

fontes/serializadores/README.md

@@ -0,0 +1,5 @@
+# Serializadores
+
+Serializadores são classes que efetivamente escrevem os arquivos de saída. 
+
+Nas primeiras implementações de FolEs, os tradutores faziam este papel. Com a inclusão da funcionalidade de geração de mapas de código, os tradutores passaram a gerar uma estrutura de dados intermediária, muito semelhante ao que é gerado pela análise sintática. Essas estruturas possuem todos os pragmas (linha, coluna inicial e coluna final de cada símbolo) recalculados pela tradução. 

fontes/serializadores/index.ts

@@ -0,0 +1,2 @@
+export * from './serializador';
+export * from './serializador-reverso';