DracoCss

C’était un projet personnel ayant pour objectif de recréer un framework CSS similaire à TailwindCSS, avec un mode JIT (Just-In-Time) intégré, afin de mieux comprendre son fonctionnement interne.

Pour commencer, j’ai étudié la création de modules en TypeScript, ainsi que les différentes technologies permettant de construire un tel outil. Après avoir comparé Rollup, Vite et d’autres solutions, j’ai finalement choisi Vite, à la fois pour sa simplicité et parce que j’avais déjà de l’expérience avec cet outil.

J’ai réalisé plusieurs tentatives : même si le résultat final est resté limité, certaines fonctionnalités fonctionnaient. Par exemple, lors du lancement d’un projet Vite ou lors de l’édition d’un fichier, le script analysait le contenu, détectait les classes, les comparait avec celles que j’avais définies, puis les ajoutait automatiquement au fichier CSS final.

Bien que ce projet n’ait pas été mené à terme, il m’a permis de mieux comprendre le fonctionnement interne de TailwindCSS, d’expérimenter la logique d’un compilateur CSS JIT, et d’approfondir mes compétences en TypeScript et dans l’écosystème Vite.

Premier test avec Rollup et DracoCss

import postcss from 'rollup-plugin-postcss';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [
        postcss({
            extract: true,
            minimize: true,
            plugins: [
                require('postcss-import'),
                require('autoprefixer'),
            ]
        })
    ]
};

Fichier de configuration de Draco

const dVersion = require('./package.json').version;

module.exports = {
    dracoVersion: dVersion,
}

console.log(`Draco version: ${dVersion}`);