Microsoft/monaco-editor

Syntax Highlighting isn't working for the first item inside a Media Query

Open

#2.527 aberto em 14 de jun. de 2021

Ver no GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (1.283 forks)batch import
buggrammarshelp wanted

Métricas do repositório

Stars
 (14.836 stars)
Métricas de merge de PR
 (Mesclagem média 6h 26m) (15 fundiu PRs em 30d)

Description

monaco-editor version: 0.25.0 Browser: Chrome 91.0.4472.77 (but appearing in all browsers tested in) OS: MacOS 11.4 Playground code that reproduces the issue:

@media (max-width: 300px) {
    p.test {

    }

    p.test {
        
    }
}

You'll see that the first p.test selector does not have syntax highlighting, where the second does.

Note that this isn't reproducible in VS Code directly, nor in VS Code web. It is however visible on the Monaco Editor homepage if you change the language to CSS and scroll down to line 629.

Guia do colaborador

Direção de pesquisa
Investigue o tokenizer/gramática CSS no código fonte do monaco editor, provavelmente em src/basic languages/css/css.ts. O bug específico é que o primeiro seletor dentro de um bloco @media não tem realce de sintaxe. Examine como o tokenizer lida com a mudança de contexto após @media e o início de um bloco de regras. Procure diferenças em como a primeira regra versus as regras subsequentes são analisadas. Considere testar com um depurador ou adicionar logs para rastrear a tokenização do snippet CSS fornecido.
Pilha de tecnologia
typescriptcss
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
CSSTypeScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
50