Executando verificação de segurança...
2
cyp
1 min de leitura ·

Um compilador de CSS com 322 linhas de código

Boa tarde a todos!

Tem um negócio que gosto de fazer em SCSS que não é possível com CSS que é Nesting. Na verdade até é possível nativamente, mas a sintaxe nativa não é muito legal e ainda é muito nova, então muitos navegadores não suportam ela nativamente.

Detesto o fato que CSS não suporta comentários // em única linha, precisando escrever /* várias linhas */ toda vez.

Outra coisa que gosto é a sintaxe do SCSS, mas não gosto de ter que baixar o módulo do SCSS só para ter isso, então eu precisava de uma forma de compilar nativamente meu CSS. Então fiz meu próprio compilador.

Ele consegue compilar isso:

div {
    display: block;
    width: 400px; // it does support comments
    /* native multi-line comments too */

    height: 300px;

    > a {
        align-self: center;

        & :hover {
            color: red;
        }
    }

    & .test {
        font-size: 20px;
    }
}

Para isso:

div {
    display: block;
    width: 400px;
    height: 300px
}

div.test {
    font-size: 20px
}

div > a {
    align-self: center
}

div > a:hover {
    color: red
}

Com apenas isso:

string css = CypherPotato.SimpleCSSCompiler.Compile(prettyCss);

Em um piscar de olhos.

Nada de regex, tudo feito à mão, manipulando a string conforme ela é recebida.

Publiquei um pacote na Nuget para testar mais. Ainda está no very alpha, fiz alguns testes preliminares, mas ainda não testei em produção.

O que você acha da ideia

Carregando publicação patrocinada...