JSCSS Transpiler

A fast, lightweight, and type-safe transpiler that transforms JSCSS syntax into standard browser-readable CSS. Built with modern TypeScript using ultra-strict compilation profiles.

✨ Features

• Define Styles via JS: Clear declarative layout mappings for your UI elements.
• Variable Interoperability: Support for build-time compilation resolution of custom standard constants.
• Class Component Scoping: Target multi-nested layouts using defclass.
• Advanced Query Selection: Expressive syntax hooks including .getbyid["..."] and sub-tag child selections natively.

🚀 Syntax Overview

JSCSS Code (styles.jscss)

const brandColor = "purple";

defclass card = {
  "div": {
    "background": "white",
    "color": brandColor
  }
}

elementStyle h2.getbyid["main-title"] = {
  "font-size": "24px"
}

elementStyle div.span = {
  "display": "block"
}

Compiled CSS Output (styles.css)

.card div {
  background: white;
  color: purple;
}

h2#main-title {
  font-size: 24px;
}

div span {
  display: block;
}

📦 Installation

Ensure you have your modern Node environment set up, then configure your workspace dependencies:

# Initialize project
npm init -y

# Install compilation toolchains
npm install -D typescript @types/node

🛠️ Configuration

This engine is built to run under highly strict type conditions. Ensure your project's tsconfig.json contains the following flags:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "verbatimModuleSyntax": true
  }
}

💻 Usage

1. The Core Module (src/transpiler.ts)

Add the core compilation logic to your source folder. It exports a type-safe function:

import { transpileJSCSS } from './transpiler.js';

const code = `const color = "red"; defclass custom = { "p": { "color": color } }`;
const cssOutput = transpileJSCSS(code);

console.log(cssOutput);

2. Compile Project

Build your code down to standardized production JavaScript using the native compiler CLI tool:

npx tsc

3. Run Executable Output

Execute your build artifact directly inside standard environments using Node:

node dist/index.js

🔒 Type Safety Features

This project utilizes advanced compile-time validations to secure the tokenizer array iterations against memory runtime corruption bugs:

• Index Narrowing Guardrails: Explicit type guards block undefined access paths from regex results.
• Dictionary Check Profiles: Implements strict dictionary indexation tracking structures.