CSS abstraction study

[fvilante]

TWO STEPS:

• [ ] - Bring 100% of css to typescript
• [ ] - Abstract UI design in typescript-side

CSS Knwoledge steps:

• [x] - web designer / ux / ui
• [ ] - css sheatcheat
• [ ] - css animatino
• [ ] - css drag & drop
• [ ] - css: display block / inline / writting mode / milticollum
• [ ] - css: grid - repeat(autofit, minmax(300,1fr)
• [ ] - css units
• [ ] - shadow down and css encapsulation
• [ ] - css: pre-processor: Less, Sass, Scss and potential
• [ ] - study possibility to preprocess css direct in typescript language

[fvilante]

STUDY OF VIABILITY TO IMPLEMENT CSS PRE-PROCESSOR OVER TYPESCRIPT LANGUAGE

After some stududy of some css pre-processors, in special LESS, i figured out that the concept involved is to bring some turing-completeness to css. They make possible to bring variables and function calls to css.

I did a study case, to confirm my hyposesis that we could use typescript langugage as a css pre-processor.

LESS code

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), darken(@some, 10%), black);
}

TYPESCRIPT code:

const some = 'foo'

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

I ready all Less documentation, and one by one of its features is pretty simple and straight-forward to implement in typescript langugage. JS/TS are so powerfull nowaday. Things like this are possible:

const mycss = (tags: readonly string[]) => ({
    [`${formatSelector(tags)}`]: {
        width: 2,
        [color]: 20,
        }
})  

CONCLUSION

Yes it is totaly possible, with the advantage of being more powerfull, and demand less work involved to learn a new sintax.

I did a research do find an already implemented library with implements a css pre-processor using TS lenguage, but did't find one.