1 stable release

new 1.0.0	Dec 24, 2025

#2097 in Web programming

MIT license

145KB
3K SLoC

TCSS WebAssembly Bindings

WebAssembly bindings for the TCSS (Thematic CSS) compiler, enabling TCSS compilation in web browsers and Node.js environments.

Features

🚀 Fast TCSS compilation in the browser
📦 Small bundle size (optimized for web)
🔧 Multiple compilation modes (normal and minified)
✅ Validation and parsing utilities
🐛 Better error messages with panic hooks

Installation

Using npm (when published)

npm install tcss-wasm

Building from source

# Install wasm-pack if you haven't already
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Build the WASM module
wasm-pack build tcss-wasm --target web

Usage

In the Browser

<!DOCTYPE html>
<html>
<head>
    <script type="module">
        import init, { compile_tcss } from './pkg/tcss_wasm.js';

        async function main() {
            // Initialize the WASM module
            await init();

            // Compile TCSS to CSS
            const tcss = `
                @var primary: #3498db
                @var spacing: 16px

                .button:
                    background: primary
                    padding: spacing
                    border-radius: 4px
            `;

            const css = compile_tcss(tcss);
            console.log(css);
        }

        main();
    </script>
</head>
<body>
    <h1>TCSS WASM Demo</h1>
</body>
</html>

In Node.js

import init, { compile_tcss, compile_tcss_minified } from 'tcss-wasm';

await init();

const tcss = `
.button:
    padding: 16px
    color: #fff
`;

// Normal compilation
const css = compile_tcss(tcss);
console.log(css);

// Minified compilation
const minified = compile_tcss_minified(tcss);
console.log(minified);

API Reference

`compile_tcss(input: string): string`

Compiles TCSS source code to CSS.

Parameters:

input - The TCSS source code as a string

Returns: The compiled CSS as a string

Throws: JavaScript error if compilation fails

`compile_tcss_minified(input: string): string`

Compiles TCSS source code to minified CSS.

Parameters:

input - The TCSS source code as a string

Returns: The compiled and minified CSS as a string

Throws: JavaScript error if compilation fails

`compile_tcss_with_options(input: string, minify: boolean): string`

Compiles TCSS source code to CSS with custom options.

Parameters:

input - The TCSS source code as a string
minify - Whether to minify the output CSS

Returns: The compiled CSS as a string

Throws: JavaScript error if compilation fails

`parse_tcss(input: string): object`

Parses TCSS source code and returns the AST as a JavaScript object.

Parameters:

input - The TCSS source code as a string

Returns: The AST as a JavaScript object

Throws: JavaScript error if parsing fails

`validate_tcss(input: string): boolean`

Validates TCSS source code without generating CSS.

Parameters:

input - The TCSS source code as a string

Returns: true if the TCSS is valid

Throws: JavaScript error with details if invalid

Building

Development Build

wasm-pack build tcss-wasm --target web --dev

Production Build

wasm-pack build tcss-wasm --target web --release

Build for Different Targets

# For web browsers
wasm-pack build tcss-wasm --target web

# For Node.js
wasm-pack build tcss-wasm --target nodejs

# For bundlers (webpack, rollup, etc.)
wasm-pack build tcss-wasm --target bundler

Testing

wasm-pack test tcss-wasm --headless --firefox
wasm-pack test tcss-wasm --headless --chrome

License

MIT

Dependencies

~1.4–2.4MB
~34K SLoC