

AbsurdJS – JavaScript based CSS preprocessor - krasimirtsonev
http://krasimir.github.io/absurd/
A new CSS preprocessor written in pure javascript. It&#x27;s available for nodejs and client-side.
======
lux
This is a really powerful idea and makes a lot of sense.

It's as flexible and readable as any CSS preprocessor I've seen, possibly more
so because it's in a syntax I won't forget because I program in it all day.

And it's trivial to integrate into any JavaScript setup because it's just
JavaScript. Brilliant!

~~~
jcampbell1
I completely agree.

When I get a chance, I am going to attempt thing that are impossible with SASS
and LESS. There are things that are impossible such as using multiply and
screen to create a button of an arbitrary gradient and color that looks good.

This is the first preprocessor that is capable of doing something other than
just saving keystrokes.

~~~
cristianpascu
CoffeeScript will save us many keystrokes here, too. :)

------
krrishd
In the fact that it detects repeated properties and makes the code DRY, that
feature could be absorbed into LESS or SASS, and become useful.

~~~
jonnyscholes
You can sort of do this with @extend in sass - but I agree its nicer here, it
seems to just sort of... do it.

~~~
krasimirtsonev
Yep, @extends in SASS are exactly you need, but unfortunately they don't
support params and interpolation in their names doesn't work as expected.

~~~
jonnyscholes
Yeah totally agree. Can also lead to very unreadable sass files to if your not
very careful. Whilst teaching new devs where I work we ask them not to use
@extend until we suggest it one a few reviews have been done.

------
crazygringo
OK... is this just a complete joke "because you can", hence the name...

...or is there some use case for CSS-in-your-JS that I can't quite manage to
imagine? I'm straining my brain to think of one...

Edit: more info at [http://davidwalsh.name/write-css-
javascript](http://davidwalsh.name/write-css-javascript)

I guess it's trying to be a more flexible version of LESS/SASS by leveraging
the full power of JavaScript. I've never felt that LESS was really lacking in
power... I'm curious what others think. But interesting idea.

~~~
jeremiep
One use case would be to create server-side 'widgets' just like Yesod does.

The basic idea is that they combine the document, style and scripting in a
single reusable component. Pages are then built by composing these widgets
together and can finally be used as templates when responding to requests.

------
elros
From looking at the example code, two things come to my mind: The first is
that it would probably look even better in CoffeeScript.

Also,
[https://en.wikipedia.org/wiki/JavaScript_Style_Sheets](https://en.wikipedia.org/wiki/JavaScript_Style_Sheets)
anybody? ;-)

~~~
latchkey
The CS syntax is mostly just the same, you can just remove most of the {} to
define the objects.

------
paulannesley
I think it makes a lot of sense to build the features of Less/Sass etc on top
of a well-known parser/interpreter (JS), rather than inventing a new one from
scratch.

I already feel like I understand how AbsurdJS works better than I understand
Less/Sass, for that reason.

------
padolsey
Isn't one crucial problem with this that ES object-literal syntax does not
guarantee order? And order is pretty important in CSS, no?

~~~
tomjakubowski
Off the top of my head, order in CSS is only important when a property is
defined multiple times for a given selector, either within the same block or
in separate ones. Like these examples:

    
    
        .foo {
          font-size: 12px;
          font-size: 14px; // later property wins
        }
    
        .bar {
          font-size: 12px;
        }
    
        .bar, .baz {
          font-size: 14px; // later property wins
        }
    

And I don't see a way to generate either of those cases only using object
literals in this library.

~~~
garethadams
You're forgetting that shorthand properties give multiple ways to set some
values. This wouldn't work reversed:

    
    
        {
          border: 1px solid red;
          border-bottom-width: 10px;
        }
    

\- [http://jsfiddle.net/afXGN/](http://jsfiddle.net/afXGN/)

------
jongleberry
an alternative is rework:
[https://github.com/visionmedia/rework](https://github.com/visionmedia/rework).
both absurd and rework use [https://github.com/visionmedia/css-
parse](https://github.com/visionmedia/css-parse) for parsing CSS. the
difference is that rework already has a bunch of great plugins like
[https://github.com/ai/autoprefixer](https://github.com/ai/autoprefixer). i'm
not sure why this guy doesn't leverage any of the existing ones.

the only difference is using JSON and JS input vs. a CSS string, but he could
have easily written that in less than 100 lines vs an entirely separate
framework.

------
todd3834
If you read Krasimir Tsonev's article about this, it is much cooler than you
might think: [http://davidwalsh.name/write-css-
javascript](http://davidwalsh.name/write-css-javascript)

EDIT: Krasimir Tsonev's article not David Walsh

------
Pirate-of-SV
Fun project.

I guess I wouldn't bee too upset with CSS being replaced by json in the
future. It makes sense in a way of using fewer languages.

On the other hand Javascript should probably be replaced by something better
too.

------
nilved
I like the idea. People should note that this doesn't mean mixing your CSS
into your JavaScript necessarily - you can precompile CSS just like you would
with S*SS.

------
mrfancypants
It doesn't seem to handle vendor-specific prefixes (-webkit, -moz, etc). I
suppose you could write your own mixins (plugins) to handle that, but still, a
shame.

------
krasimirtsonev
Hello guys. Thanks for the comments. The next things which I'm going to do is
to start packing components. One of the big problems which I have for a long
time, is the fact that I have to deliver html, css and javascript. Usually
they are placed in different places and I have to take care to put them in the
browser. With AbsurdJS I could send the javascript logic and the css together.

------
chadscira
How do you handle defining multiple @font-face's?

~~~
lux
Not sure if it supports it, but couldn't an array be used? For example:

    
    
        "@font-face": [
            { /* font one },
            { /* font two }
        ]

~~~
krasimirtsonev
It is actually possible if you turn of combineSelectors. Or you may create two
different instances of AbsurdJS and at the end merge their output.

------
PLejeck
This seems like it would be good for filling a similar role to LLVM, providing
a framework to take an object and turn it into CSS. I'm not so sure it makes
sense as a language to directly use: JSON is nice as a data serialization
format, but it's not very fun to author complex things in it.

~~~
underwater
JavaScript. JSON is more rigid and verbose, for example it requires that
properties be quoted.

------
elwell
Looks possibly awesome with CoffeeScript

------
caiob
Literally an absurd.

------
thenerdfiles
JSON presentation layer for test-driven CSS for teh win.

