designliquido / foles Goto Github PK

Definição

Custom-Ident, de acordo com a documentação CSS:

O tipo custom-ident denota uma string arbitrária definida pelo usuário usada como identificador. Esse tipo faz distinção entre letras maiúsculas e minúsculas e certos valores são proibidos em vários contextos para evitar ambiguidade.

Sintaxe

A sintaxe de custom-ident consiste em um ou mais caracteres, onde os caracteres podem ser qualquer um dos seguintes:

• qualquer caractere alfabético (A-Z ou a-z);
• qualquer dígito decimal (0-9);
• um hífen ( - );
• um sublinhado ( _ );
• um caractere de escape (precedido por uma barra invertida, \ );
• um caractere Unicode (no formato de uma barra invertida, \seguida por um a seis dígitos hexadecimais, representando seu ponto de código Unicode).

Abrangência

Modificadores abrangidos por essa Issue:

• ao-mudar
• coluna-em-grade
• definir-contador
• estilo-lista-tipo
• estilo-lista
• fim-coluna-em-grade
• fim-linha-em-grade
• incrementar-contador
• início-coluna-em-grade
• início-linha-em-grade
• linha-em-grade
• nome-animação
• propriedade-transição
• tamanho-grade

TOTAL: 13 Modificadores

Exemplos

Exemplo 1 de código CSS:

animation-name: test1, animation4;

Exemplo 2 de código CSS:

transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

O Avaliador Sintático ainda retorna um erro quando o valor passado a um seletor é somente numérico.

No caso, se tentarmos fazer:

corpo {
  linhas-superiores: 2;
}

O Avaliador retorna o seguinte erro:
Esperado ';' após declaração de valor de modificador 'linhas-superiores'.

Isso se dá devido à sequência de operações no método declaracaoDeclaracao, quando o Avaliador Sintático tenta buscar por um quantificador - que para esses casos, é inexistente. Vale lembrar que existem cerca de 30 seletores que aceitam somente números como valores (lista completa em /testes/listas/valor-numerico.ts).

Objetivo da Issue: implementar a lógica para que o Avaliador reconheça o número por si só como valor, sem esperar um quantificador.

Após #70, executei:

/* aspas {
    contém: nenhum;
    recortar: auto;
    fluxo: nenhum;
    conteudo: auto;
    citações: nenhum;
} */

contém é considerado assim mesmo.

Vários lugares do código foram marcados com TODO. Os problemas devem ser endereçados.

Qualquer dúvida pode perguntar para mim, para o @samuelrvg ou para o @VitBrandao.

• https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
• https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
• https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
• https://developer.mozilla.org/en-US/docs/Web/CSS/align-tracks

Mover o método gerarMapaFontes (e suas dependências) para a classe GeradorMapaCss.

Alguns poucos seletores CSS possuem essa lógica de aceitar múltiplos valores - tal qual os modificadores de Atribuição Abreviada - mas ao invés de um espaço em branco, os valores são separados por uma vírgula.

Modificadores abrangidos por essa Issue:

• área-máscara
• atraso-transição
• duração-animação

TOTAL: 3 Modificadores

Exemplo de código:

área-máscara: visualizar-caixa, completar-caixa, borda-caixa;

Nos moldes atuais, área-máscara aceita receber os valores acima, mas não todos ao mesmo tempo - somente um por vez.

Exemplo:

$cor-base: #c6538c;

.alerta {
  borda: 1px sólida $cor-base;
}

Traduz para:

.alert {
  border: 1px solid #c6538c;
}

Na minha última PR, fiz a seguinte modificação: https://github.com/DesignLiquido/FolEs/pull/92/files#diff-2ca6284adffa8f97cb7e166695ea58e619647532031c870c63306227850dae90

A ideia aqui é fazer a mesma modificação para os demais modificadores.

Referência: https://w3schools.sinsixx.com/css/css_colornames.asp.htm#:~:text=The%20W3C%20HTML%20and%20CSS,teal%2C%20white%2C%20and%20yellow.

Por exemplo:

.minha-classe {
    tamanho-fonte: 16px;
    largura-maxima: 20cm;
}

Deve retornar:

.minha-classe {
        font-size: 16px;
        max-width: 20cm;
}

Por #106, os mapas de fontes apenas são gerados juntamente no mesmo arquivo de saída. Isso foi feito na época por questões práticas: é muito mais difícil testar o mapa em arquivos separados do que no mesmo arquivo (até porque as ferramentas de testes não reconhecem .foles como uma extensão válida).

Após #68, tentei o seguinte:

.minha-classe {
    alinhar-conteudo: inseguro;
    estilo-contorno: herdar;
    cor-destaque: rgb(12, 13, 24);
    cor-fundo: vermelho;
    tamanho-fonte: 16px;
    largura-maxima: 20cm;
}

.minha-classe:sobrepor {
    cor-fundo: azul;
}

Tive o seguinte erro:

D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:23
        const excecao = new ErroAvaliadorSintatico(simbolo, mensagemDeErro);
                        ^
ErroAvaliadorSintatico [Error]: Esperado '{' após declaração de seletor.
    at AvaliadorSintatico.erro (D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:23:25)
    at AvaliadorSintatico.consumir (D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:45:20)
    at AvaliadorSintatico.declaracaoDeclaracao (D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:140:14)
    at AvaliadorSintatico.declaracaoPorSeletor (D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:128:21)
    at AvaliadorSintatico.declaracao (D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:202:29)
    at AvaliadorSintatico.analisar (D:\Delegua\FolEs\fontes\avaliador-sintatico\avaliador-sintatico.ts:215:35)
    at FolEs.converterParaCssInterno (D:\Delegua\FolEs\fontes\foles.ts:30:69)
    at FolEs.converterParaCss (D:\Delegua\FolEs\fontes\foles.ts:49:21)
    at principal (D:\Delegua\FolEs\execucao.ts:27:27)
    at Object.<anonymous> (D:\Delegua\FolEs\execucao.ts:38:1) {
  simbolo: Simbolo {
    tipo: 'DOIS_PONTOS',
    lexema: null,
    literal: null,
    linha: 18
  }
}

Ao longo da atividade de atribuição de valores aos modificadores, diversos seletores CSS se mostraram específicos demais na questão de atribuição de valores.

Acabei por mapear esses seletores para pensarmos futuramente em como trabalhar uma lógica para cada um deles.
Esses seletores não seguem uma regra - o melhor é conferir cada grupo de valores aceitos direto na DOCUMENTAÇÃO.

Os seletores são:

• animação
• configurações-variação-fonte
• conteúdo
• cor-barra-rolagem
• deslocamento
• estilo-lista-tipo
• filtro-fundo
• modelo-colunas-em-grade
• modelo-em-grade
• modelo-geral-em-grade
• modelo-linhas-em-grade
• recursos-fonte
• sombra-texto
• substituir-idioma-fonte
• trajeto-deslocamento
• transformar

Ao todo, 10 modificadores FolEs ainda necessitam de implementações extras para que possam receber todos os valores tal qual seus seletores CSS correspondentes. Essa complementação passa por implementar os casos de determinadas funções que ainda não foram mapeadas na lógica do Avaliador Sintático.

Importante lembrar que FolEs já suporta várias funções desse mesmo tipo, nomeadas como métodos em nosso repositório. Exemplos de métodos já implementados são:

• steps();
• minmax();
• cubic-bezier();

A implementação desses métodos passa por alterações nas seguintes partes do repositório:

• Criação de uma classe para cada novo método dentro de fontes/valores/metodos;
• Listagem dessas classes dentro de fontes/valores/dicionario-valores.ts;
• Inclusão dos novos métodos nas palavras reservadas do Lexador;
• Adicionar novo caso no switch da função resolverMetodo() do Avaliador Sintático;
• Listar os novos métodos dentro do arquivo do modificador que aceita essa função especial;

E ainda:

• Listar os modificadores que aceitam esses novos métodos no arquivo testes/listas/metodos;
• E por fim, implementar os testes unitários para esses novos métodos;

Logo abaixo nesta Issue, estão listados esses 10 modificadores e suas funções especiais correspondentes.

Os arquivos dos modificadores estão com vários trechos comentados e destacados pela palavra TODO (a fazer) indicando quais implementações ainda estão faltando para cada um dos modificadores. A maioria dos TODOs envolve atribuições específicas de valores aos seletores - soluções que passam por melhorias no Lexador e no Avaliador Sintático.

Para mapear os TODOs, recomendo a instalação da extensão TODO Highlight recomendada a mim pelo Leonel. Não precisa baixar pelo repositório - é mais fácil pesquisar na aba 'Extensões' do VS Code e baixar por lá.

Abro essa Issue para que todos(as) os(as) autores(as) da FolEs estejam cientes das implementações extras que ainda precisam ser realizadas.

Exemplos:

Após #70, 10 testes receberam .skip. Todos devem ser corrigidos.

O PR #106 foi feito na força da preguiça 😁. Definimos tudo com 4 espaços para indentação para ficar mais fácil testar os mapeamentos, mas o certo seria permitir uma configuração global de indentação (em foles.ts, por exemplo).

Isso impacta os seguintes fontes:

• https://github.com/DesignLiquido/FolEs/blob/principal/fontes/foles.ts
• https://github.com/DesignLiquido/FolEs/blob/principal/fontes/serializadores/serializador.ts
• https://github.com/DesignLiquido/FolEs/blob/principal/fontes/serializadores/serializador-reverso.ts
• https://github.com/DesignLiquido/FolEs/blob/principal/fontes/tradutores/tradutor.ts
• https://github.com/DesignLiquido/FolEs/blob/principal/fontes/tradutores/tradutor-reverso.ts

O grupo de seletores de Atribuição Abreviada já estão com as devidas validações de valores feitas internamente em cada modificador.

Porém, é necessário pensar em uma lógica para que esses múltiplos valores sejam aceitos - o que passa por refatorar o Lexador, Avaliador Sintático e Tradutor.

Atualmente, aceitamos um modificador com a unidade deg:

lmht {
    origem-imagem-borda: gradiente-linear(90deg, verde, amarelo);

Devemos aceitar graus como sinônimo:

lmht {
    origem-imagem-borda: gradiente-linear(90graus, verde, amarelo);

Nas configurações atuais, o Lexador identifica cada um dos símbolos contidos na URL e cataloga eles um a um.

O comportamento correto esperado seria o Lexador catalogar o link inteiro como valor quando encontrar o termo URL.

Os testes devem levar em consideração que nem todos os modificadores deste grupo aceitam todos os quantificadores de comprimento e percentuais como parâmetro.

Ao desenvolver os testes, organizá-los considerando 4 grandes grupos, considerando os modificadores que:

1. Aceitam todos os quantificadores;
2. Aceitam somente quantificadores de comprimento;
3. Aceitam somente quantificadores percentuais;
4. Aceitam somente quantificadores de tempo.

A ideia é isso aqui: https://buddhiamigo.medium.com/how-to-create-typescript-classes-dynamically-b29ca7767ee5

A Store deve ser chamada pelo Avaliador Sintático.

Funções estão listadas abaixo como comentários da Issue

Determinados modificadores aceitam receber valores cuja sintaxe não se encaixa nos demais grupos listados nas outras Issues em aberto.

Essa Issue se refere a 7 modificadores, listados nos comentários abaixo, referindo quais valores específicos necessitam de implementação para serem aceitos pelos modificadores FolEs tal qual seus seletores CSS correspondentes.

Alguns seletores CSS possuem essa lógica de aceitar múltiplos valores - tal qual os modificadores de Atribuição Abreviada - mas ao invés de um espaço em branco, os valores são separados por uma barra (/).

Modificadores abrangidos por essa Issue:

• coluna-em-grade
• cursor
• linha-em-grade
• proporção-tela
• raio-borda
• tamanho-grade

TOTAL: 6 Modificadores

Exemplo de código:

coluna-em-grade: auto / auto;

Nos moldes atuais, coluna-em-grade aceita receber os valores acima, mas não todos ao mesmo tempo - somente um por vez.

O Lexador requer alguns ajustes, pois os seletores abaixo estão sendo mapeados como QUALITATIVOS, quando na verdade, deveriam ser IDENTIFICADORES. São eles:

• conteudo / conteúdo
• fluxo
• recortar
• contem / contém

É importante ressaltar que não há nenhum valor geral (fontes/modificadores/gerais.ts) com o mesmo nome dos seletores. Logo, acredito que o ajuste deva ser feito diretamente no Lexador.

Além disso, o seguinte seletor está sendo mapeado como ESTRUTURA, quando também deveria ser um IDENTIFICADOR:

• aspas

Alguns seletores CSS possuem aceitar receber valores String - ou seja, valores cujos caracteres estão cercados por aspas simples ou dupla.

Modificadores abrangidos por essa Issue:

• citações
• configurações-variação-fonte
• ênfase-texto
• estilo-ênfase-texto
• substituir-idioma-fonte
• vazamento-texto

TOTAL: 6 Modificadores

Exemplo de código FolEs:

citações: "«" "»" "‹" "›";

Exemplo de código CSS:

text-emphasis: 'x';

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function