[Issue #59] Atribuição Abreviada / Múltiplos Valores (#124)

* Testando mudanças no Av Sintático para comportar múltiplos valores * Adapta avaliador para seguir operando normalmente em casos de 1 valor * Adapta Av Sintatico para aceitar métodos em nova estrutura * Corrige lógica para Av Sintatico aceitar casos de valores únicos com novas implementações * Corrige validação do Av Sintatico após quebrar testes unitarios * Tratando casos de valores em branco no Av Sintatico * Adapta testes de valor numérico após novas implementações * Organizando nova estrutura de resolverModificador() * Implementa trecho em resolverModificador() para atribuição abreviada * Adaptando serializador para cobrir casos de atribuição abreviada * Inclui tipagem nas novas implementações * Apaga trechos comentados no Avaliador Sintático * Aplicando ajustes solicitados * Otimiza operação de Atribuição Abreviada no Av Sintático * Organiza operação de Atribuição Abreviada em novo método * Ajusta indentaçao e apaga comentários * Organiza e divide em listas os seletores de atribuicao abreviada * Testes de múltiplos valores-quantificadores na Atribuição Abrevida * Atualiza listas de seletores AA * Testes de múltiplas Palavras Reservadas na Atribuição Abrevida * Otimiza método de atribuição abreviada no Av Sintático * Corrige valores extra do modificador animação * Montando objetos "modificador": "valor" para testes de Atribuição Abreviada * Testes de valor-quantificador e palavras reservadas como múltiplo valor * Complementa testes de valor-quantificador e palavra reservada
DesignLiquido · Oct 10, 2024 · afef974 · afef974
1 parent 7e5fcd2
commit afef974
Show file tree

Hide file tree

Showing 10 changed files with 380 additions and 98 deletions.
diff --git a/exemplos/exemplo2.foles b/exemplos/exemplo2.foles
@@ -1,15 +1,5 @@
 lmht {
-    tempo-transicao: curva-cúbica(0.42, 0.0, 1.0, 1.0);
-    cor-destaque: rgb(100, 200, 300);
+    opacidade: 80%;
+    recuo: 10px 10px auto 20px;
+    altura: 50%;
 }
-
-.classe {
-    tempo-transicao: passos(3, final);
-    tamanho-colunas-em-grade: minmax(200px, auto);
-    altura-máxima: encaixar-conteúdo(5cm);
-    altura: limitar(1px, 2vw, 2.5rem);
-
-    .outra-classe {
-        tamanho-fonte: 24px;
-    }
-}
diff --git a/exemplos/exemplo3.foles b/exemplos/exemplo3.foles
@@ -1,6 +1,7 @@
 lmht {
     linhas-superiores: 2;
     altura: 30px;
+    largura: herdar;
     colunas: 2;
     opacidade: 0.5;
     indice-z: 5;

diff --git a/fontes/avaliador-sintatico/avaliador-sintatico.ts b/fontes/avaliador-sintatico/avaliador-sintatico.ts
@@ -994,15 +994,44 @@ export class AvaliadorSintatico implements AvaliadorSintaticoInterface {
         return textoUrl;
     }
 
-    valorModificador(): any {
-        const valorModificador = this.avancarEDevolverAnterior();
+    private valoresModificador(): Array<any> {
+        const modificadores = [];
+        while (this.simbolos[this.atual].hasOwnProperty('tipo') && this.simbolos[this.atual].tipo !== tiposDeSimbolos.PONTO_E_VIRGULA) {
+            const valorModificador = this.avancarEDevolverAnterior();
+
+            switch (valorModificador.tipo) {
+                case tiposDeSimbolos.METODO:
+                    const metodo = this.resolverMetodo(valorModificador.lexema);
+                    modificadores.push(metodo);
+                default:
+                    const modificador = valorModificador;
+                    modificadores.push(modificador);
+            }
+        }
 
-        switch (valorModificador.tipo) {
-            case tiposDeSimbolos.METODO:
-                return this.resolverMetodo(valorModificador.lexema);
-            default:
-                return valorModificador;
+        return modificadores;
+    }
+
+    private tratarAtribuicaoAbreviada(valoresModificador: Array<any>): string {
+        let atribuicaoAbreviada: string = '';
+
+        for (let i = 0; i < valoresModificador.length; i += 1) {
+            if (i === 0) {
+                atribuicaoAbreviada += `${valoresModificador[i].lexema}`;
+            } else {
+                switch (valoresModificador[i].tipo) {
+                    case tiposDeSimbolos.QUANTIFICADOR:
+                        atribuicaoAbreviada += `${valoresModificador[i].lexema}`;
+                        break;
+                    default:
+                        atribuicaoAbreviada += ' ';
+                        atribuicaoAbreviada += `${valoresModificador[i].lexema}`;
+                        break;
+                }
+            }
         }
+
+        return atribuicaoAbreviada;
     }
 
     private tratarValorNumerico(modificador: Simbolo): Boolean {
@@ -1152,29 +1181,63 @@ export class AvaliadorSintatico implements AvaliadorSintaticoInterface {
             "Esperado ':' após nome do modificador."
         );
 
-        const valorModificador = this.valorModificador();
-        let quantificador;
+        const valoresModificador: Array<any> = this.valoresModificador();
+        let quantificador: any;
+        let quantificadores: Array<any> = [];
+
+        for (const [index, valorModificador] of valoresModificador.entries()) {
+            if (valorModificador.hasOwnProperty('tipo') && valorModificador.tipo === tiposDeSimbolos.NUMERO) {
+
+                const tratarValorNumerico = this.tratarValorNumerico(valorModificador);
+
+                if (tratarValorNumerico) {
+                    quantificador = valoresModificador[index + 1];
+                    quantificadores.push(valoresModificador[index + 1]);
+                }
+            }
+
+            if (valorModificador.hasOwnProperty('tipo') && valorModificador.tipo === tiposDeSimbolos.METODO) {
+                valoresModificador.splice(index, 1);
+            }
+        }
+
         // TODO: Pensar num teste melhor pra isso.
         /*if (!(valorModificador instanceof Metodo)) {
             quantificador = this.avancarEDevolverAnterior();
         }*/
 
-        if (valorModificador.hasOwnProperty('tipo') && valorModificador.tipo === tiposDeSimbolos.NUMERO) {
-            const tratarValorNumerico = this.tratarValorNumerico(modificador);
-
-            if (tratarValorNumerico) {
-                quantificador = this.avancarEDevolverAnterior();
-            }
+        if (valoresModificador.length === 0) {
+            const proximoSimbolo = this.avancarEDevolverAnterior();
+            valoresModificador.push(proximoSimbolo);
         }
 
         this.consumir(
             tiposDeSimbolos.PONTO_E_VIRGULA,
             `Esperado ';' após declaração de valor de modificador '${modificador.lexema}'.`
         );
 
+        if (valoresModificador.length <= 2) {
+            const classeModificadora = new SeletorModificador(
+                modificador.lexema,
+                valoresModificador[0].hasOwnProperty('lexema') ? valoresModificador[0].lexema : valoresModificador[0],
+                quantificador && quantificador.hasOwnProperty('lexema') ?
+                    quantificador.lexema :
+                    quantificador,
+                {
+                    linha: modificador.linha,
+                    colunaInicial: modificador.colunaInicial,
+                    colunaFinal: modificador.colunaFinal
+                }
+            );
+
+            return classeModificadora as Modificador;
+        }
+
+        const atribuicaoAbreviada = this.tratarAtribuicaoAbreviada(valoresModificador);
+
         const classeModificadora = new SeletorModificador(
             modificador.lexema,
-            valorModificador.hasOwnProperty('lexema') ? valorModificador.lexema : valorModificador,
+            atribuicaoAbreviada,
             quantificador && quantificador.hasOwnProperty('lexema') ?
                 quantificador.lexema :
                 quantificador,

diff --git a/fontes/modificadores/animacao.ts b/fontes/modificadores/animacao.ts
@@ -8,7 +8,7 @@ export class Animacao extends Modificador {
     "reverter": "reverse",
     "alternar": "alternate",
     "alternar-reverter": "alternate-reverse",
-    'infinite': 'infinito',
+    'infinito': 'infinite',
     "nenhum": "none",
     "para-frente": "forwards",
     "para-tras": "backwards",

diff --git a/fontes/modificadores/estilo-borda.ts b/fontes/modificadores/estilo-borda.ts
@@ -5,7 +5,7 @@ import { validarValoresAdicionais } from "./validacoes/condicao-extra";
 export class EstiloBorda extends Modificador {
     // Seletor de Atribuição Abreviada (Shorthand).
     // Pode receber de 1 a 4 valores.
-
+    valoresAceitos = estilos;
     constructor(valor: string, quantificador: string, pragmas?: PragmasModificador) {
         super("estilo-borda", "border-style", pragmas);
 

diff --git a/fontes/serializadores/serializador.ts b/fontes/serializadores/serializador.ts
@@ -51,7 +51,14 @@ export class Serializador {
             };\n`;
         }
 
-        // Caso 4: É um valor genérico, cuja tradução está na lista 'valoresGerais'.
+        // Caso 4: Atribuição Abreviada | Múltiplos valores
+        if (modificador.valor.includes(' ')) {
+            return `${" ".repeat(indentacao)}${modificador.propriedadeCss}: ${
+                modificador.valor
+            };\n`;
+        }
+
+        // Caso 5: É um valor genérico, cuja tradução está na lista 'valoresGerais'.
         const valorTraduzido = valoresGerais[modificador.valor];
         return `${" ".repeat(indentacao)}${
             modificador.propriedadeCss

diff --git a/testes/listas/atribuicao-abreviada.ts b/testes/listas/atribuicao-abreviada.ts
@@ -1,68 +1,116 @@
-export const AtribuiçãoAbreviada: Array<string> = [
-    'animacao',
-    'animação',
-    'borda',
-    'borda-em-bloco',
-    'fim-borda-em-bloco',
-    'inicio-borda-em-bloco',
-    'início-borda-em-bloco',
-    'borda-inferior',
-    'cor-borda',
-    'borda-em-linha',
-    'fim-borda-em-linha',
-    'inicio-borda-em-linha',
-    'início-borda-em-linha',
-    'borda-esquerda',
+export const AtribuicaoAbreviadaVQePR: Array<object> = [
+    {
+        modificador: 'animacao',
+        valor: '3s alternar 1s deslizar',
+    },
+    {
+        modificador: 'animação',
+        valor: '3s alternar 1s deslizar',
+    },
+    {
+        modificador: 'borda',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'borda-direita',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'borda-em-bloco',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'borda-em-linha',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'borda-esquerda',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'borda-inferior',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'borda-superior',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'colunas',
+        valor: '6rem auto',
+    },
+    {
+        modificador: 'contorno',
+        valor: '1rem grossa',
+    },
+    {
+        modificador: 'fim-borda-em-bloco',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'fim-borda-em-linha',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'inicio-borda-em-bloco',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'início-borda-em-bloco',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'inicio-borda-em-linha',
+        valor: '2px pontilhado',
+    },
+    {
+        modificador: 'início-borda-em-linha',
+        valor: '2px pontilhado',
+    },
+];
+
+export const AtribuicaoAbreviadaPR: Array<string> = [
+    'contorno',
     'borda-direita',
+    'borda-esquerda',
+    'borda-inferior',
+    'decoracao-texto',
+    'decoração-texto',
     'estilo-borda',
-    'borda-superior',
-    'sombra-caixa',
+    'regras-coluna',
+    'posicionar-conteudo',
+    'posicionar-itens',
+]
+
+export const AtribuicaoAbreviadaVQ: Array<string> = [
     'colunas',
+    'deslocamento',
     'flex',
-    'fonte',
     'insercao',
     'inserção',
-    'estilo-lista',
-    'margem',
-    'mascara',
-    'máscara',
-    'borda-mascara',
-    'borda-máscara',
-    'contorno',
-    'recuo',
-    'recuo-em-linha',
-    'posicionar-itens',
-    'margem-rolagem-mouse',
-    'decoracao-texto',
-    'decoração-texto',
-    'transicao',
-    'transição',
-    'regras-coluna',
-    'posicionar-conteudo',
-    'posicionar-se',
-    'raio-borda',
     'inserção-em-bloco',
     'insercao-em-linha',
+    'margem',
     'margem-em-bloco',
-    'margem-em-linha',
-    'recuo-em-bloco',
-    'margem-rolagem-mouse',
     'margem-em-bloco-rolagem-mouse',
+    'margem-em-linha',
     'margem-em-linha-rolagem-mouse',
-    'recuo-rolagem-mouse',
+    'margem-rolagem-mouse',
+    'raio-borda',
+    'recuo',
+    'recuo-em-bloco',
     'recuo-em-bloco-rolagem-mouse',
+    'recuo-em-linha',
     'recuo-em-linha-rolagem-mouse',
-    'linha-em-grade',
-    'coluna-em-grade',
-    'deslocamento',
-    'vazamento',
-    'modelo-em-grade',
-    'fundo',
-];
+    'recuo-rolagem-mouse',
+]
 
 /*
 
-QUANTOS ATRIBUTOS RECEBE CADA UM DESSES SELETORES?
+PR = Palavras Reservadas
+VQ = Valor-Quantificador
+
+ATÉ QUANTOS ATRIBUTOS RECEBE CADA UM DESSES SELETORES?
 
 animacao (8)
 borda (3)

diff --git a/testes/listas/valor-numerico.ts b/testes/listas/valor-numerico.ts
@@ -24,6 +24,26 @@ export const ValorNumerico: Array<string> = [
     'coluna-em-grade',    
 ];
 
+export const ValorNumericoApenas: Array<string> = [
+    'linhas-superiores',
+    'repetir-animacao',
+    'repetir-animação',
+    'contar-coluna',
+    'flex-crescimento',
+    'flex-reduzir',
+    'ajustar-tamanho-fonte',
+    'espessura-fonte',
+    'fim-coluna-em-grade',
+    'inicio-coluna-em-grade',
+    'início-coluna-em-grade',
+    'fim-linha-em-grade',
+    'inicio-linha-em-grade',
+    'início-linha-em-grade',
+    'ordenar',
+    'linhas-inferiores',
+];
+
+
 // A lista abaixo inclui modificadores que aceitam tanto somente valores numéricos 
 // quanto valores numéricos c/ quantificador.
 export const ValorNumericoComQuantificador = [