CSSQL: Convert SQL to CSS with this Esoteric Programming Language

Summary

CSSQL is a unique "esoteric" programming language and compiler that allows developers to write CSS using a SQL DDL-like syntax. It reimagines CSS selectors as relational database tables, providing a novel approach to styling files. Written in Haskell, CSSQL is also made available for JavaScript environments via GHCJS.

Use at your own risk

OSRepos shares public repositories for knowledge and discovery only. Any installation, execution, configuration, or use of code from these repositories is the user's own responsibility. Always review the repository, source code, dependencies, licenses, and security implications before running or installing anything. OSRepos is not responsible for issues, damages, or losses resulting from third-party repositories.

Introduction

CSSQL, developed by mcnuttandrew, presents a truly unconventional solution to front-end styling by enabling the creation of CSS through a SQL DDL-like syntax. This project playfully challenges the traditional JavaScript/CSS debate, offering a "forbidden third option": CSS in SQL. The core philosophy behind CSSQL is to treat CSS selectors as relational database tables, complete with set-like behaviors, allowing for a unique mental model where you "create a series of nestable tables" for your styles. While the transpiler is written in Haskell, it's conveniently distributed for JavaScript environments using GHCJS.

Installation

To integrate CSSQL into your Node.js project, you can install the node-cssql package:

npm install node-cssql

Once installed, you can use it to transpile your .cssql files to .css:

const {cssql} = require('node-cssql');

cssql('./test/tests/join.cssql', './test/tests/join.css');

Examples

CSSQL introduces a set of SQL-inspired commands to manage your styles. Here's a look at some fundamental operations:


CREATE SELECTOR .margin-huge-top;
INSERT .margin-huge-top (margin-top, 50px);

CREATE SELECTOR .margin-huge-bottom;
INSERT .margin-huge-bottom (margin-bottom, 50px);

CREATE SELECTOR .margin-huge-left;
INSERT .margin-huge-left (margin-left, 50px);

CREATE SELECTOR .margin-huge-right;
INSERT .margin-huge-right (margin-right, 50px);

MERGE .margin-huge-top AND .margin-huge-bottom AND .margin-huge-left AND .margin-huge-right AS .margin-huge;

DROP .margin-huge-left;

This CSSQL code will transpile into the following CSS:

.margin-huge-top {
  margin-top: 50px;
}
.margin-huge-bottom {
  margin-bottom: 50px;
}
.margin-huge-right {
  margin-right: 50px;
}
.margin-huge {
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 50px;
}

You can explore more examples in the tests folder.

Why Use CSSQL?

While CSSQL is presented with a humorous, self-aware tone regarding its "esoteric" nature and potential to increase verbosity, it offers a fascinating perspective on language design and front-end development. It challenges conventional approaches by framing CSS selectors and their cascade behavior through the lens of relational databases. For developers interested in exploring alternative paradigms, functional programming (Haskell), or simply curious about pushing the boundaries of what's possible with styling languages, CSSQL provides a unique and thought-provoking project. It's a testament to creative problem-solving, even if the "problem" is intentionally made more complex.