KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#codex #developer-tools #typescript #ai-agents #claude-code #python #mcp #react #cli #macos #ai-agent #deepseek-harness

cssql

★ 58 Open GitHub ↗

"Esoteric" "Programming" "Language" compiler for converting SQL to CSS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![alt text](https://raw.githubusercontent.com/mcnuttandrew/cssql/master/logo.png "Logo Title Text 1")

# CSSQL

This library cuts through the javascript/css debate by providing a forbidden third option: css in sql!
Through the use of a SQL DDL-like syntax users are able to style files which are then transpiled in CSS. The core idea of the library is that selectors within the cascade function a little bit like relational database albiet ones with set like behaviours and not bag like behaviour. The mental model you should have as you develop CSSQL stylebases is create a series of nestable tables!

The transpiler is written in haskell, but is made more usefully available by being distribution in javascript through the use [ghcjs](https://github.com/ghcjs/ghcjs).

*Q*: I've heard that CSS often falls in the write-once-read-never mode of software, does this help to address that? 
*A*: No, in fact it actually makes the problem worse by making the syntax more verbose and hence more difficult to read.

*Q*: Is this good for anything? 
*A*: .... it could be ?????????

### Node API

You can install the library inside of a node project by running:

```sh
npm install node-cssql
```

You can then use it like:

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

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

```

### Functions
`CREATE SELECTOR <SELECTOR>;` 
Creates a selector table

`CREATE VARIABLE $KEY <VALUE>;` 
Creates a css variable

`INSERT <SELECTOR> (<CSS_KEY>, <CSS_VALUE>);` 
Insert an attribute into a table

`DELETE <SELECTOR> <CSS_KEY>;` 
Remove attribute from a table

`DROP <SELECTOR>;` 
Remove table from the database

`COPY <SELECTOR> AS <SELECTOR>;` 
Copy a table as another table, old table still exists.

`RENAME <SELECTOR> AS <SELECTOR>;` 
`RENAME <SELECTOR> AS <INNERMOST SELECTOR> IN ... IN <OUTERMOST SELECTOR>;` 
Rename a table

`MERGE <SELECTOR> AND <SELECTOR> AND ... AND <SELECTOR> AS <NEW SELECTOR>;` 
Combine the attributes of a collection of selectors, order of input selectors determines resulting attribute table

`NEST <SELECTOR> INTO <SELECTOR>;` 
`NEST <SELECTOR> INTO <INNERMOST SELECTOR> IN ... IN <OUTERMOST SELECTOR>;` 
Destructively move a table into another table

### Syntax Example

What does this wacky language actually look like? Well,

```cssql

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;

```

Which will yield css like

```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 check out more little examples in the [tests folder](https://github.com/mcnuttandrew/cssql/tree/master/test/tests).

## Internals

### Developing

We use stack for our haskell deps and npm for our js deps. To prepare your environment cd into node-library and run npm install.
When that's done hop back up to the main level. Now run stack build, this will pull A LOT of deps in order to make ghcjs run. It'll take probably an hour to get the first compile to pass

To create a library build run

stack build

To run the tests run

stack test

To create a copy of the js library for distribution run

./node-library/build-js-lib.sh

To run the library in haskell without using stack do

### Dev API

the haskell api has two commands

- runghc -i./src app/Main.hs convert <IN FILE.cssql> <OUT FILE.css>

As the name would suggest that function converts a target cssql file into a css file

- runghc -i./src test/Spec.hs

This executes our test suite

cssql

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README