AbsurdJS – JavaScript based CSS preprocessor | Hacker News Reader

AbsurdJS – JavaScript based CSS preprocessor

krasimir.github.io

A new CSS preprocessor written in pure javascript. It's available for nodejs and client-side.

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!

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.

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

Absolutely, and it takes CSS (preprocessors at least) closer to the LISP ideal of code is data and data is code.

Now that I've seen it, in hindsight I'm struck with several thoughts: 1) in hindsight it seems so obvious, 2) why didn't I think of this, and 3) LESS/SASS/Stylus/etc are obsolete.

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.

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

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.

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.

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

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.

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.

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 anybody? ;-)

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

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.

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

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.

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/

Actually you care about the ordering if you have same properties applied for same selector. However, AbsurdJS hides this and automatically calculate the latest defined value. And that's what it goes in the compiled file. I need to spend some time using the library to be sure that such problem is actually solved. So, shortly: I can't 100% guarantee that you will not have problems with that.

an alternative is rework: https://github.com/visionmedia/rework. both absurd and rework use 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. 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.

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

EDIT: Krasimir Tsonev's article not David Walsh

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.

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.

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.

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.

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

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

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

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.

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.

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

Looks possibly awesome with CoffeeScript

Literally an absurd.

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

Reply on news.ycombinator.com