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.

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:

npm install node-cssql

You can then use it like:

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,

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

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

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