Search


Search something to see results

CSS parser architecture

%%{init:{"theme":"dark"}}%% flowchart TD %% --- Transform --- Input(["CSS input"]) %% The Grouped Container subgraph Group10["Transform step"] transform["transform()/transformSync()"] %% The Grouped Container subgraph Group1 ["Parse step"] %% --- Parse step --- parse["parse()/parseSync()"] tokenize(["tokenize()"]) parseNode(["parse and validate token stream"]) visitors(["visitors"]) minify(["minify AST"]) cssModules(["generate CSS module"]) parseResult["Parse result"] end %% The Grouped Container subgraph Group2 ["Render step"] %% --- Render step --- renderAst(["Render AST"]) sourcemap([Sourcemap generation]) end %% --- Result step --- transformResult["Transform result"] end %% --- Routing step --- Input --> transform transform --> parse parse --> tokenize tokenize --> parseNode parseNode -- "Visitors set?" --> visitors visitors -- "Minify AST?" --> minify minify -- "CSS module?" --> cssModules visitors -- "CSS module?" --> cssModules cssModules --> parseResult parseNode -- "CSS module?" --> cssModules parseNode -- "Minify AST?" --> minify parseNode --> parseResult visitors --> parseResult minify --> parseResult parseResult --> renderAst renderAst -- "Sourcemap?" --> sourcemap renderAst --> transformResult sourcemap --> transformResult
%%{init:{"theme":"default"}}%% flowchart TD %% --- Transform --- Input(["CSS input"]) %% The Grouped Container subgraph Group10["Transform step"] transform["transform()/transformSync()"] %% The Grouped Container subgraph Group1 ["Parse step"] %% --- Parse step --- parse["parse()/parseSync()"] tokenize(["tokenize()"]) parseNode(["parse and validate token stream"]) visitors(["visitors"]) minify(["minify AST"]) cssModules(["generate CSS module"]) parseResult["Parse result"] end %% The Grouped Container subgraph Group2 ["Render step"] %% --- Render step --- renderAst(["Render AST"]) sourcemap([Sourcemap generation]) end %% --- Result step --- transformResult["Transform result"] end %% --- Routing step --- Input --> transform transform --> parse parse --> tokenize tokenize --> parseNode parseNode -- "Visitors set?" --> visitors visitors -- "Minify AST?" --> minify minify -- "CSS module?" --> cssModules visitors -- "CSS module?" --> cssModules cssModules --> parseResult parseNode -- "CSS module?" --> cssModules parseNode -- "Minify AST?" --> minify parseNode --> parseResult visitors --> parseResult minify --> parseResult parseResult --> renderAst renderAst -- "Sourcemap?" --> sourcemap renderAst --> transformResult sourcemap --> transformResult
flowchart TD
    %% --- Transform ---
    Input(["CSS input"])


    %% The Grouped Container
    subgraph Group10["Transform step"]

        transform["transform()/transformSync()"]


        %% The Grouped Container
        subgraph Group1 ["Parse step"]

            %% --- Parse step ---
            parse["parse()/parseSync()"]
            tokenize(["tokenize()"])
            parseNode(["parse and validate token stream"])
            visitors(["visitors"])
            minify(["minify AST"])
            cssModules(["generate CSS module"])
            parseResult["Parse result"]
        end

        %% The Grouped Container
        subgraph Group2 ["Render step"]

            %% --- Render step ---
            renderAst(["Render AST"])
            sourcemap([Sourcemap generation])

        end

        %% --- Result step ---
        transformResult["Transform result"]
    end 

    %% --- Routing step ---
    Input --> transform
    transform --> parse
    parse --> tokenize
    tokenize --> parseNode
    parseNode -- "Visitors set?"  --> visitors
    visitors -- "Minify AST?"  --> minify
    minify -- "CSS module?"  --> cssModules
    visitors -- "CSS module?"  --> cssModules
    cssModules --> parseResult
    parseNode -- "CSS module?" --> cssModules
    parseNode -- "Minify AST?"  --> minify
    parseNode --> parseResult
    visitors --> parseResult
    minify --> parseResult
    parseResult --> renderAst
    renderAst -- "Sourcemap?" --> sourcemap
    renderAst --> transformResult
    sourcemap --> transformResult

← Usage | Validation →