Permite atribuição de valores custom-indent (#198)

VitBrandao · web-flow · commit 8932879e8ff4 · 2025-06-05T17:07:45.000-07:00
* Cria função de validação de valores custom-indent
* Adapta função de validação atribuição abreviada para incluir valores custom-indent
* Testes manuais da função de validação personalizada
* Adapta primeiro modificador à nova lógica de validação personalizada
* Ajustando lógica de modificadores que aceitam valores custom-indent
* Ajustando modificadores que aceitam valores custom-indent
* Finaliza ajustes em modificadores que aceitam valores custom-indent
* Conserta modificador nome-animacao após erro em testes
* Implementa primeiros testes unitários de valores personalizados
* Reorganiza testes de valores personalizados no arquivo de valores específicos
* Adapta lógica para traduzir valores aceitos e não traduzir personalizados
* Inclui caso de falha nos testes de valores personalizados
* Inclui casos de múltiplos valores personalizados nos testes unitários
diff --git a/exemplos/exemplo2.foles b/exemplos/exemplo2.foles
@@ -1,3 +1,4 @@
+/** Valores específicos */
 lmht {
     recuo: 10px 10px 100px 20px;
     borda-direita: 2px pontilhado;
@@ -17,4 +18,24 @@ lmht {
 
 lmht {
     ajustar-tamanho-fonte: altura-cap 0.5;
-}
+}
+
+lmht {
+    propriedade-transicao: todas, test1;
+}
+
+lmht {
+    definir-contador: meu-contador 5 contador2 0;
+    ao-mudar: left, top;
+    coluna-em-grade: 3 span;
+    estilo-lista: dentro meu-estilo;
+    fim-linha-em-grade: span 3;
+    fim-coluna-em-grade: span 3;
+    incrementar-contador: meu-contador -4;
+    início-linha-em-grade: span 2;
+    inicio-coluna-em-grade: span 2;
+    linha-em-grade: span some-grid-area;
+    nome-animacao: test_05;
+    propriedade-transicao: test1, animation4;
+    tamanho-grade: span 2;
+}
diff --git a/fontes/foles.ts b/fontes/foles.ts
@@ -118,6 +118,6 @@ export class FolEs {
 }
 
 //  const testeFoles = new FolEs(false);
-//  console.log(testeFoles.converterParaCss('../exemplos/exemplo6.foles'));
+//  console.log(testeFoles.converterParaCss('../exemplos/exemplo2.foles'));
 //  console.log(a.converterParaFolEs('../exemplos/reverso/exemplo-metodos.css'));
 //  console.log(a.converterParaFolEs('../exemplos/reverso/exemplo-codigo.css'));
diff --git a/fontes/modificadores/ao-mudar.ts b/fontes/modificadores/ao-mudar.ts
@@ -1,6 +1,7 @@
 import { valoresGlobais } from "./atributos/globais";
 import { validarValores } from "./validacoes/comum";
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 
 export class AoMudar extends Modificador {
     valoresAceitos: { [valorFoles: string]: string } = {
@@ -19,8 +20,13 @@ export class AoMudar extends Modificador {
     ) {
         super("ao-mudar", "will-change", pragmas);
 
-        if (!valorVariavel)
-            validarValores("ao-mudar", valor, this.valoresAceitos);
+        if (!valorVariavel) {
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("comum", "ao-mudar", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValores("ao-mudar", valor, this.valoresAceitos);
+            }
+        }
 
         this.valor = valor;
     }
diff --git a/fontes/modificadores/coluna-em-grade.ts b/fontes/modificadores/coluna-em-grade.ts
@@ -16,14 +16,10 @@ export class ColunaEmGrade extends Modificador {
         super("coluna-em-grade", "grid-column", pragmas);
 
         if (!valorVariavel) {
-            if (valor.includes("/")) {
-                validarAtribuicaoAbreviada("numérica", "coluna-em-grade", valor, this.valoresAceitos);
+            if (valor.includes("/") || valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", "coluna-em-grade", valor, this.valoresAceitos, undefined, false, true);
             } else {
-                validarValorNumerico(
-                    "coluna-em-grade",
-                    valor,
-                    this.valoresAceitos,
-                );
+                validarValorNumerico("coluna-em-grade", valor, this.valoresAceitos);
             }
         }
 
diff --git a/fontes/modificadores/definir-contador.ts b/fontes/modificadores/definir-contador.ts
@@ -1,5 +1,6 @@
 import { Modificador, PragmasModificador } from "./superclasse";
-import { validarValores } from "./validacoes/comum";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
+import { validarValorNumerico } from "./validacoes/numerica";
 
 export class DefinirContador extends Modificador {
     valoresAceitos: { [valorFoles: string]: string } = {
@@ -13,9 +14,14 @@ export class DefinirContador extends Modificador {
         valorVariavel: boolean = false,
     ) {
         super("definir-contador", "counter-set", pragmas);
-
-        if (!valorVariavel)
-            validarValores("definir-contador", valor, this.valoresAceitos);
+        
+        if (!valorVariavel) {
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", "definir-contador", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValorNumerico("definir-contador", valor, this.valoresAceitos);
+            }
+        }
 
         this.valor = valor;
     }
diff --git a/fontes/modificadores/estilo-lista.ts b/fontes/modificadores/estilo-lista.ts
@@ -23,7 +23,7 @@ export class EstiloLista extends Modificador {
 
         if (!valorVariavel) {
             if (typeof valor === 'string' && valor.includes(" ")) {
-                validarAtribuicaoAbreviada("numérica", "estilo-lista", valor, this.valoresAceitos, valoresExtra);
+                validarAtribuicaoAbreviada("numérica", "estilo-lista", valor, this.valoresAceitos, valoresExtra, false, true);
             } else {
                 validarValorNumerico("estilo-lista", valor, this.valoresAceitos, valoresExtra);
             }
diff --git a/fontes/modificadores/fim-coluna-em-grade.ts b/fontes/modificadores/fim-coluna-em-grade.ts
@@ -1,4 +1,5 @@
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValorNumerico } from "./validacoes/numerica";
 import { proibirQuantificador } from "./validacoes/proibir-quantificador";
 
@@ -15,12 +16,13 @@ export class FimColunaEmGrade extends Modificador {
     ) {
         super("fim-coluna-em-grade", "grid-column-end", pragmas);
 
-        if (!valorVariavel)
-            validarValorNumerico(
-                "fim-coluna-em-grade",
-                valor,
-                this.valoresAceitos,
-            );
+        if (!valorVariavel) {
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", "fim-coluna-em-grade", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValorNumerico("fim-coluna-em-grade", valor, this.valoresAceitos);
+            }
+        }
 
         this.valor = valor;
 
diff --git a/fontes/modificadores/fim-linha-em-grade.ts b/fontes/modificadores/fim-linha-em-grade.ts
@@ -1,4 +1,5 @@
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValorNumerico } from "./validacoes/numerica";
 import { proibirQuantificador } from "./validacoes/proibir-quantificador";
 
@@ -15,12 +16,13 @@ export class FimLinhaEmGrade extends Modificador {
     ) {
         super("fim-linha-em-grade", "grid-row-end", pragmas);
 
-        if (!valorVariavel)
-            validarValorNumerico(
-                "fim-linha-em-grade",
-                valor,
-                this.valoresAceitos,
-            );
+        if (!valorVariavel) {
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", "fim-linha-em-grade", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValorNumerico("fim-linha-em-grade", valor, this.valoresAceitos);
+            }
+        }
 
         this.valor = valor;
 
diff --git a/fontes/modificadores/incrementar-contador.ts b/fontes/modificadores/incrementar-contador.ts
@@ -1,4 +1,5 @@
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValorNumerico } from "./validacoes/numerica";
 
 export class IncrementarContador extends Modificador {
@@ -14,19 +15,13 @@ export class IncrementarContador extends Modificador {
     ) {
         super("incrementar-contador", "counter-increment", pragmas);
 
-        // OBS.: A sintaxe desse modificador espera receber:
-        // 1. o NOME do contador (<custom-ident>);
-        // 2. um NÚMERO INTEIRO que represente a incrementação do contador.
-
-        // Ex.: incrementar-contador: meu-contador -4;
-
-        // A lógica abaixo cobre somente o recebimento de 'nenhum' e de números positivos.
-        if (!valorVariavel)
-            validarValorNumerico(
-                "incrementar-contador",
-                valor,
-                this.valoresAceitos,
-            );
+        if (!valorVariavel) {
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", "incrementar-contador", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValorNumerico("incrementar-contador", valor, this.valoresAceitos);
+            }
+        }
 
         this.valor = valor;
     }
diff --git a/fontes/modificadores/inicio-coluna-em-grade.ts b/fontes/modificadores/inicio-coluna-em-grade.ts
@@ -1,4 +1,5 @@
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValorNumerico } from "./validacoes/numerica";
 import { proibirQuantificador } from "./validacoes/proibir-quantificador";
 
@@ -20,11 +21,11 @@ export class InicioColunaEmGrade extends Modificador {
         );
 
         if (!valorVariavel) {
-            validarValorNumerico(
-                "início-coluna-em-grade",
-                valor,
-                this.valoresAceitos,
-            );
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", 'início-coluna-em-grade', valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValorNumerico("início-coluna-em-grade", valor, this.valoresAceitos);
+            }
 
             proibirQuantificador("início-coluna-em-grade", quantificador);
         }
diff --git a/fontes/modificadores/inicio-linha-em-grade.ts b/fontes/modificadores/inicio-linha-em-grade.ts
@@ -1,4 +1,5 @@
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValorNumerico } from "./validacoes/numerica";
 import { proibirQuantificador } from "./validacoes/proibir-quantificador";
 
@@ -20,11 +21,11 @@ export class InicioLinhaEmGrade extends Modificador {
         );
 
         if (!valorVariavel) {
-            validarValorNumerico(
-                "início-linha-em-grade",
-                valor,
-                this.valoresAceitos,
-            );
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("numérica", 'início-linha-em-grade', valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValorNumerico("início-linha-em-grade", valor, this.valoresAceitos);
+            }
 
             proibirQuantificador("início-linha-em-grade", quantificador);
         }
diff --git a/fontes/modificadores/linha-em-grade.ts b/fontes/modificadores/linha-em-grade.ts
@@ -16,8 +16,8 @@ export class LinhaEmGrade extends Modificador {
         super("linha-em-grade", "grid-row", pragmas);
 
         if (!valorVariavel) {
-            if (valor.includes(" ")) {
-                validarAtribuicaoAbreviada("numérica", "linha-em-grade", valor, this.valoresAceitos);
+            if (valor.includes(" ") || valor.includes("/")) {
+                validarAtribuicaoAbreviada("numérica", "linha-em-grade", valor, this.valoresAceitos, undefined, false, true);
             } else {
                 validarValorNumerico("linha-em-grade", valor, this.valoresAceitos);
             }
diff --git a/fontes/modificadores/nome-animacao.ts b/fontes/modificadores/nome-animacao.ts
@@ -1,5 +1,8 @@
+import { valoresGlobais } from "./atributos/globais";
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValores } from "./validacoes/comum";
+import { validarIdentificacaoPersonalizada } from "./validacoes/identificacao-personalizada";
 
 export class NomeAnimacao extends Modificador {
     valoresAceitos: { [valorFoles: string]: string } = {
@@ -14,8 +17,19 @@ export class NomeAnimacao extends Modificador {
     ) {
         super(["nome-animacao", "nome-animação"], "animation-name", pragmas);
 
-        if (!valorVariavel)
-            validarValores("nome-animação", valor, this.valoresAceitos);
+        if (!valorVariavel) {
+            if (valor.includes(" ") || valor.includes(",")) {
+                validarAtribuicaoAbreviada("comum", "nome-animação", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                if (!(Object.keys(this.valoresAceitos).includes(valor)) && !(Object.keys(valoresGlobais).includes(valor))) {
+                    
+                    validarIdentificacaoPersonalizada("nome-animação", valor);
+                    this.valoresAceitos[valor] = valor;
+                }
+                validarValores("nome-animação", valor, this.valoresAceitos);
+            }
+        }
+
         this.valor = valor;
     }
 }
diff --git a/fontes/modificadores/propriedade-transicao.ts b/fontes/modificadores/propriedade-transicao.ts
@@ -1,4 +1,5 @@
 import { Modificador, PragmasModificador } from "./superclasse";
+import { validarAtribuicaoAbreviada } from "./validacoes/atribuicao-abreviada";
 import { validarValores } from "./validacoes/comum";
 
 export class PropriedadeTransicao extends Modificador {
@@ -19,8 +20,13 @@ export class PropriedadeTransicao extends Modificador {
             pragmas,
         );
 
-        if (!valorVariavel)
-            validarValores("propriedade-transição", valor, this.valoresAceitos);
+        if (!valorVariavel) {
+            if (valor.includes(" ")) {
+                validarAtribuicaoAbreviada("comum", "propriedade-transição", valor, this.valoresAceitos, undefined, false, true);
+            } else {
+                validarValores("propriedade-transição", valor, this.valoresAceitos);
+            }
+        }
 
         this.valor = valor;
     }
diff --git a/fontes/modificadores/tamanho-grade.ts b/fontes/modificadores/tamanho-grade.ts
@@ -16,8 +16,8 @@ export class TamanhoGrade extends Modificador {
         super("tamanho-grade", "grid-area", pragmas);
 
         if (!valorVariavel) {
-            if (valor.includes("/")) {
-               validarAtribuicaoAbreviada("numérica", "tamanho-grade", valor, this.valoresAceitos);
+            if (valor.includes("/") || valor.includes(" ")) {
+               validarAtribuicaoAbreviada("numérica", "tamanho-grade", valor, this.valoresAceitos, undefined, false, true);
             } else {
                 validarValorNumerico("tamanho-grade", valor, this.valoresAceitos);
             }
diff --git a/fontes/modificadores/validacoes/atribuicao-abreviada.ts b/fontes/modificadores/validacoes/atribuicao-abreviada.ts
@@ -2,6 +2,7 @@ import { validarValores } from "./comum";
 import { validarValoresAdicionais } from "./condicao-extra";
 import { validarValorCor } from "./cor";
 import { validarValorFonte } from "./fonte";
+import { validarIdentificacaoPersonalizada } from "./identificacao-personalizada";
 import { validarMultiplosQualitativos } from "./multiplos-qualitativos";
 import { validarValorNumerico } from "./numerica";
 import { validarValorString } from "./string";
@@ -13,6 +14,7 @@ export function validarAtribuicaoAbreviada(
     valoresAceitos: { [valorFoles: string]: string } = undefined,
     valoresExtra: any = undefined,
     validacaoString: boolean = false,
+    validacaoPersonalizada: boolean = false,
 ): void {
     let separarValores: Array<string>;
 
@@ -30,6 +32,18 @@ export function validarAtribuicaoAbreviada(
             if (stringValida) valorIndividual = valorIndividual.replace(/^["']|["']$/g, '');
         }
 
+        if (validacaoPersonalizada) {
+            if (
+                !(Object.keys(valoresAceitos).includes(valorIndividual))
+                && typeof valorIndividual !== 'number'
+                && !(Number(valorIndividual))
+                && valorIndividual !== '0'
+            ) {
+                validarIdentificacaoPersonalizada(nomePropriedade, valorIndividual);
+                valoresAceitos[valorIndividual] = valorIndividual;
+            }
+        }
+
         switch (tipoValidacao) {
             case "comum":
                 validarValores(nomePropriedade, valorIndividual, valoresAceitos, valoresExtra);
diff --git a/fontes/modificadores/validacoes/identificacao-personalizada.ts b/fontes/modificadores/validacoes/identificacao-personalizada.ts
@@ -0,0 +1,37 @@
+export function validarIdentificacaoPersonalizada(
+    nomePropriedade: string,
+    valor: any,
+): void {
+    // Regex para um identificador CSS válido
+    const validarIdentificador: RegExp = /^-?[_a-zA-Z][-_a-zA-Z0-9]*$/;
+    
+    // Listagem de valores globais (não permitidos)
+    const valoresGlobais: Array<string> = [
+        'herdar',
+        'inicial',
+        'reverter',
+        'reverter-camada',
+        'desarmar',
+    ];
+
+    // Validações de um valor <custom-indent> válido
+    const validacoesIdentificador = typeof valor === "string"
+        && validarIdentificador.test(valor)
+        && !(valoresGlobais.includes(valor))
+        && !(valor.startsWith("--"));
+    
+    // Retorna erro caso não passe nas validações acima
+    if (!(validacoesIdentificador)) {
+        throw new Error(`Propriedade '${nomePropriedade}' com valor personalizado ${valor} inválido. 
+        O valor deve seguir as regras de sintaxe de uma identificação personalizada (<custom-indent>).`);
+    }
+}
+
+/**
+    Regras principais para um <custom-ident> válido:
+    - Não pode ser um valor global (herdar, inicial, reverter)
+    - Não pode começar com um dígito.
+    - Não pode começar com --.
+    - Pode conter letras, números, traços e sublinhados.
+    - Pode começar com - ou _.
+*/
diff --git a/fontes/serializadores/serializador.ts b/fontes/serializadores/serializador.ts
diff --git a/testes/listas/atribuicao-abreviada.ts b/testes/listas/atribuicao-abreviada.ts
diff --git a/testes/listas/valores-personalizados.ts b/testes/listas/valores-personalizados.ts
diff --git a/testes/modificadores/valores-especificos.test.ts b/testes/modificadores/valores-especificos.test.ts

Original file line number	Diff line number	Diff line change
`@@ -118,6 +118,6 @@ export class FolEs {`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`// const testeFoles = new FolEs(false);`
`121`		`-// console.log(testeFoles.converterParaCss('../exemplos/exemplo6.foles'));`
	`121`	`+// console.log(testeFoles.converterParaCss('../exemplos/exemplo2.foles'));`
`122`	`122`	`// console.log(a.converterParaFolEs('../exemplos/reverso/exemplo-metodos.css'));`
`123`	`123`	`// console.log(a.converterParaFolEs('../exemplos/reverso/exemplo-codigo.css'));`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export class EstiloLista extends Modificador {`
`23`	`23`
`24`	`24`	`if (!valorVariavel) {`
`25`	`25`	`if (typeof valor === 'string' && valor.includes(" ")) {`
`26`		`- validarAtribuicaoAbreviada("numérica", "estilo-lista", valor, this.valoresAceitos, valoresExtra);`
	`26`	`+ validarAtribuicaoAbreviada("numérica", "estilo-lista", valor, this.valoresAceitos, valoresExtra, false, true);`
`27`	`27`	`} else {`
`28`	`28`	`validarValorNumerico("estilo-lista", valor, this.valoresAceitos, valoresExtra);`
`29`	`29`	`}`