Let's make the '&' here:

import fs from 'fs';

class XCSS {
    static compile(code: string): string {
        // Stores function definitions
        const functions: Record<string, { params: string[], body: string[] }> = {};

        // Split the code into lines for processing
        const lines = code.split(/\r?\n/);

        // Root block to hold all top-level CSS
        const rootBlock: { selector: string, declarations: string[], children: any[] } = { selector: '', declarations: [], children: [] };
        let currentBlock = rootBlock;

        // Stack to keep track of nested blocks
        const blockStack = [rootBlock];

        // Flags for parsing functions
        let inFunction = false;
        let currentFunctionName = '';
        let currentFunctionParams: string[] = [];
        let currentFunctionBody: string[] = [];

        for (let line of lines) {
            line = line.trim();

            if (line === '') {
                continue; // Skip empty lines
            }

            if (line.startsWith('@import')) {
                // Handle @import directives
                currentBlock.declarations.push(line + ';');

            } else if (line.startsWith('@function')) {
                // Start of a function definition
                const funcMatch = line.match(/@function\s+([^(]+)\(([^)]*)\)\s*{/);
                if (funcMatch) {
                    inFunction = true;
                    currentFunctionName = funcMatch[1].trim();
                    currentFunctionParams = funcMatch[2].split(',').map(p => p.trim());
                    currentFunctionBody = [];
                }

            } else if (inFunction) {
                if (line === '}') {
                    // End of function definition, store it
                    functions[currentFunctionName] = {
                        params: currentFunctionParams,
                        body: currentFunctionBody,
                    };
                    inFunction = false;
                    currentFunctionName = '';
                    currentFunctionParams = [];
                    currentFunctionBody = [];
                } else {
                    // Accumulate function body lines
                    currentFunctionBody.push(line);
                }

            } else if (line.startsWith('@include')) {
                // Handle @include directives
                const includeMatch = line.match(/@include\s+([^(]+)\(([^)]*)\);?/);
                if (includeMatch) {
                    const includeName = includeMatch[1].trim();
                    const includeArgs = includeMatch[2].split(',').map(a => a.trim().replace(/['"]/g, ''));

                    const func = functions[includeName];
                    if (func) {
                        const paramValues: Record<string, string> = {};
                        func.params.forEach((param, index) => {
                            paramValues[param] = includeArgs[index] || '';
                        });

                        // Replace variables in the function body and add to current block
                        for (let funcLine of func.body) {
                            let processedLine = funcLine;
                            for (const [param, value] of Object.entries(paramValues)) {
                                const regex = new RegExp('\\' + param + '\\b', 'g');
                                processedLine = processedLine.replace(regex, value);
                            }

                            currentBlock.declarations.push(processedLine);
                        }
                    } else {
                        console.error(`Function ${includeName} not defined.`);
                    }
                }

            } else if (line.endsWith('{')) {
                // Start of a new block
                const selector = line.slice(0, -1).trim();
                const newBlock: { selector: string, declarations: string[], children: any[] } = { selector, declarations: [], children: [] };
                currentBlock.children.push(newBlock);
                blockStack.push(newBlock);
                currentBlock = newBlock;

            } else if (line === '}') {
                // End of the current block
                blockStack.pop();
                currentBlock = blockStack[blockStack.length - 1];

            } else {
                // Add declarations to the current block
                currentBlock.declarations.push(line);
            }
        }

        // Now, generate the final CSS from the block tree
        const outputLines: string[] = [];

        function generateCSS(block: { selector: string, declarations: string[], children: any[] }, parentSelectors: string[] = []): void {
            // Combine parent selectors with current selector
            let selectors: string[] = [];
            if (block.selector) {
                let selectorParts = block.selector.split(',').map((s: string) => s.trim());
                selectors = selectorParts.map((part: string) => {
                    if (part.includes('&')) {
                        const parentSelector = parentSelectors.join(' ').trim() || '&';
                        return part.replace(/&/g, parentSelector);
                    } else {
                        return [...parentSelectors, part].join(' ').trim();
                    }
                });
            }

            if (block.declarations.length > 0) {
                if (selectors.length > 0) {
                    for (const selector of selectors) {
                        outputLines.push(`${selector} {`);
                        outputLines.push(...block.declarations.map((decl: string) => '  ' + decl));
                        outputLines.push('}');
                    }
                } else {
                    // Top-level declarations (e.g., @import)
                    outputLines.push(...block.declarations);
                }
            }

            // Process children blocks
            for (const child of block.children) {
                const newParentSelectors = selectors.length > 0 ? selectors : parentSelectors;
                generateCSS(child, newParentSelectors);
            }
        }

        generateCSS(rootBlock);

        // Combine the output lines into a single string
        return outputLines.join('\n');
    }}

// Example usage:

const xcssCode = `
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

@function dark-mode($font) {
  background-color: #000;
  color: #fff;
  font-family: $font, sans-serif;
}

body {
  @include dark-mode('Ubuntu');
}

div {
  color: blue;

  p {
    color: red;
  }

  h1 {
    color: green;
  }
}
`;

const cssOutput = XCSS.compile(xcssCode);
console.log(cssOutput);

---

Example of the '&':

div {
  color: red;

  button {
    background-color: red;
    transition: background-color .3s ease;

    &:hover { // Translates to: div button:hover { ... }
      background-color: orangered;
    }
  }
}