css pre-processor using TS lang

example.ts

// study on using typescript as a host language to pre-process CSS

import { Either, Left, Right } from "../monads/either";
import { Maybe, Just, Nothing } from "../monads/maybe";


type PX = {
    readonly kind: 'px'
    readonly value: number
}
const px = (_:number): PX => ({kind: 'px', value: _})

const if_ = <A,B>(test: boolean, ifTrue: A, ifFalse: B): Either<A,B> => {
    return test ? Left(ifTrue) : Right(ifFalse)
}

type Rgba = {
    readonly kind: 'RGBA'
    readonly r: Maybe<number>
    readonly g: Maybe<number>
    readonly b: Maybe<number>
    readonly a: Maybe<number>
}

const Rgba = (_r?:number, _g?:number, _b?: number, _a?: number): Rgba => {
    const r = _r===undefined ? 0 : _r
    const g = _g===undefined ? 0 : _g 
    const b = _b===undefined ? 0 : _b 
    const a = _a===undefined ? 0 : _a 
    const check = (_:number) => _ >= 255 ? Nothing<number>() : Just(_)
    return {kind: 'RGBA', r: check(r), g: check(g), b: check(b), a: check(a)}
}


type Color = {readonly kind: 'Color', readonly value: Rgba }
const Color = (_: Rgba):Color => ({kind: 'Color', value: _}) 

type IsColor = (_:unknown) => _ is Color
const isColor: IsColor = element => true //Color(Rgba(10,10,10,50))

const darken = (_:Color, p: Percentage):Color => undefined


type Percentage = { readonly kind: 'Percentage', readonly value: number }
const percentage = (_:number): Percentage => ({kind: 'Percentage', value: _})


const luminance = (_: Color): Percentage => percentage(44)

const black = 'black'

const some = 'foo'

const element = {
    div: {
        margin: if_(2>1, px(0), px(3)),
        color:  if_(isColor(some), darken(some, percentage(10)), black)
    }
}

console.info(element)
console.table(element)


const format = (_:readonly string[]) => `.${_.join(' .')}`

const color = 'color'
const css = (tag:readonly string[]) => ({
    [`${format(tag)}`]: {
        width: 2,
        [color]: 20,
        }
})   

console.table(css(['div','a','2']))