HN Explorer

23 comments

[ 3.3 ms ] story [ 43.4 ms ] thread
christophilus
Whoo. I’ll be the first hyper negative prototypical HN commenter.

I’m glad I don’t work on browser engines for a living. CSS is getting more complex and spaghetti-capable by the day.

> Currently only supported in Chrome 141+. The @function rule is going through the W3C standardization process and will be available in other browsers soon.

Also, pretty tired of Chrome effectively front-running standards as a not-so-subtle means of cramming them through.

cluckindan
Welp, time to make a @function preprocessor. There is no reason for every single client to recalculate things which could have been completely or partially calculated at build time.
csswizardry
I used to share this sentiment (and I’m a web performance consultant by profession so very few people care about performance as much as me!), but when you consider how much calculation we _happily_ let our JS do at runtime, I don’t think forcing CSS to be static/preprocessed is worth it. And that’s not even me taking a swipe at overly-JSsed front-end; I’m talking about any runtime work that JS picks up.

Is preprocessed CSS faster? Yes. Is it meaningfully faster? Probably not.

ape4
Obvious question: are CSS functions Turing complete?
zamadatix
CSS Custom Functions are defined in a way they don't add anything over traditional CSS in this regard. I.e. they are just allowed to act as custom functions - not recursion mechanism, jump mechanisms, loop mechanisms, etc.
Sesse__
They are not allowed to loop or recurse, so no, by themselves, they are not (unless you accept repeating the function a potentially infinite amount of time).

CSS in general is Turing complete if you allow running multiple frames, although it requires ugly hacks. See e.g. https://codepen.io/propjockey/pen/dywNyBQ, which is quite insane IMO.

qingcharles
Stupider question: how long until it can run Doom?
cluckindan
No. The implementation treats the function body as just another CSS rule set, which is applied to some virtual element. The ”result: somevalue;” rule then sets the ”result” style property on that element, and that property value gets plopped onto the call site.

Kinda clever, actually.

bilekas
Oooh this will not end well.. Also side question, is it really necessary to have this as an npm package ?
gampleman
It would be quite nice to see some more "killer" uses of this new feature that aren't just "we removed some duplication and... saved less than 1% of our loc".

And maybe there are some really compelling ones... I think the only really useful one I see here is `--abs`, which really should just be built-in.

hombre_fatal
It's not for DRYing/golfing code.

The main use case of functions is that you can parameterize code. This lets you parameterize stylesheets, like set a base font size and primary color, and then derive your whole theme from it, from spacing to secondary border colors to how buttons look when they're hovered.

gampleman
You can do that with custom properties already. AFAICT functions don't introduce any new abilities on that front (apart from the aforementioned DRY-ing).
chris_wot
I’m so confused why people are ragging on this. Why is this considered detrimental? Looks pretty good to me…
llbbdd
It's a post about web development on HN. Half the comments will rag incessantly, half will talk about how the web should go back to being a delivery mechanism for documents only like it's 1995 forever, someone will rant about Google for some reason. It's a neverending nightmare.
robertoandred
People who don’t understand the problems CSS has to solve are opposed to CSS solving those problems. Sure it can all be stuffed into Tailwind classes!!
JadeNB
I'm no expert in this domain, but I suspect it's less "this is a bad problem to solve" and more "every solution to a problem moves farther away from the ideal simplicity of a markup langage."

(I'm not weighing in on the validity of this position, just reporting what I perceive the position itself to be.)

solaraQuill55
CSS is becoming the new JavaScript.
mock-possum
As someone who works with both those languages professionally, I’m not sure what you mean by that. CSS applies to a new narrow band of the spectrum of how the web functions.
spankalee
One problem I think people are going to run into here is loading CSS libraries from the components that use them.

Luckily, CSS Modules are starting to land in multiple browsers. Firefox added support behind a flag, and it might ship in 145.

So you'll be able to import the CSS from your JS modules, and apply it to the document:

    import extras from 'css-extras' with {type: 'css'};

    if (!document.adoptedStyleSheets.includes(extras)) {
      document.adoptedStyleSheets.push(extras);
    }
Or, if you use shadow DOM:

    this.shadowRoot.adoptedStyleSheets.push(extras);
ulrischa
CSS is changing so fast. I guess we will see Doom in CSS shortly
rrgok
It is time to reject this ugly double dash prefix kebab-cased variables names. PHP looks better in comparison.

What goes in some people's mind when they come up with these ugly conventions and rules?