cssql

KO | EN

gitlite — search

#go #machine-learning #rust #deep-learning #linux #docker #java #nodejs #cli #vue #security #mcp #ios #open-source

(★ 58)

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

cssql Latest Version Download

Download Latest Version (.zip)

// 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

cssql Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

cssql

cssql Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README