CataBits

Se você é um DevOps como eu e tem verdadeira compulsividade em relação à organização dos códigos? Por exemplo, odeio quando a extensão do VSCode sisma de quebrar as linhas do código que acabei de escrever, imaginando que tudo deve ficar em uma linha só.

Outra coisa que me incomoda é a lista de atributos nos seletores do CSS, totalmente desorganizadas logo após você deixar o visual da página do jeito que precisa. Daí, passo uns bons minutos ordenando, de forma que tudo atenda aos requisitos da minha mente insana!

Agora, criei um aplicativo que, pela construção, tem diversos arquivinhos CSS em uma pasta. Já antecipo a canseira em abrir cada um deles e ordenar, manualmente ou com alguma ajuda do Excel…

Automatizando

A preguiça me forçou a trabalhar. E, com a ajuda da comunidade, manual do PHP e Chat GPT, construímos o protótipo abaixo:

<?php

/**
 * Protótipo de função em PHP que obtém todos os arquivos CSS de uma pasta,
 * faz o backup de cada um e salva uma nova versão com todos os atributos
 * ordenados alfabeticamente.
 *
 * Para saber mais, acesse https://gist.github.com/Luferat/7df18acc3805c66afb968e53820c5c7a
 **/

function order_css_attributes_in_folder($folder_path) {

    // Verifica se o caminho passado como parâmetro é uma pasta válida
    if (!is_dir($folder_path)) {
        echo "The specified path is not a valid folder.";
        return;
    }

    // Itera sobre os arquivos CSS encontrados na pasta
    $files = glob($folder_path . '/*.css');
    foreach ($files as $file) {
        $content = file_get_contents($file);

        // Salva uma cópia do arquivo original com o sufixo ".original.css"
        $original_file = preg_replace('/\.css$/', '.original.css', $file);
        rename($file, $original_file);

        // Identifica os seletores, extrai os atributos de cada um, ordena 
        // alfabeticamente e salva novamente no seletor.
        $regex = '/{([^{}]+)}/s';
        $new_content = preg_replace_callback($regex, function ($match) {
            $attributes = explode(';', $match[1]);
            sort($attributes);
            $attributes = array_map('trim', $attributes);
            return '{ ' . implode(";\n  ", $attributes) . ";\n}";
        }, $content);

        // Debug - Remover o ";" após a abertura da chave
        $new_content = preg_replace('/{[\s;]*\n/', "{\n", $new_content);

        // Salva uma cópia do arquivo com os atributos ordenados
        $new_file = $file;
        file_put_contents($new_file, $new_content);
        echo "File '{$new_file}' created successfully.\n";
    }
}

// Exemplo de uso:
order_css_attributes_in_folder('./css/');
?>

A função PHP "order_css_attributes_in_folder('path')" recebe um diretório contendo arquivos CSS como atributo. Ele "varre" esta pasta, abre cada CSS, gera uma cópia de segurança dele e gera uma nova versão com os atributos ordenados alfabeticamente.

Para um exemplo simples, o CSS abaixo:

#btnProfile {
  padding: .5rem 1rem;
  color: white;
  border: none;
  border-radius: .35rem;
  background-color: steelblue;
  cursor: pointer;
}

#btnLogout {
  padding: .5rem 1rem;
  color: white;
  background-color: orangered;
  border-radius: .35rem;
  border: none;
  cursor: pointer;
}

Ficará dessa forma:

#btnProfile {
  background-color: steelblue;
  border-radius: .35rem;
  border: none;
  color: white;
  cursor: pointer;
  padding: .5rem 1rem;
}

#btnLogout {
  background-color: orangered;
  border-radius: .35rem;
  border: none;
  color: white;
  cursor: pointer;
  padding: .5rem 1rem;
}

O principal da função está nas expressões regulares, principalmente '/{([^{}]+)}/s' que extrai os dados relevantes, os atributos, para um array $attributes que, na sequência, é ordenada por sort(). O resto é só manipulação de arquivos…

A função ainda tem alguns (muitos) bugs. O primeiro que identifiquei foi a dificuldade dela em lidar com comentários no meio dos atributos, então, desde já, esteja convidado a colaborar para mehorar e também fazer a mesma coisa com outras linguagens.

Acesse o GIST da função...