[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"project-45513956":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":41,"post_text":44,"what":45,"said":60,"maker_in_thread":165,"shape":167,"grid":171,"attempts":329,"same_week":330,"maker_shows":359,"maker_hidden":360,"reader_version":361,"card":362},"45513956","CSS Extras","title","Show HN: CSS Extras","https:\u002F\u002Fgithub.com\u002Fsindresorhus\u002Fcss-extras","github.com","mofle",1759915171,2025,104,63,709,3837,19,"notable","languages","css utility library","library",[23,24,25,26,27],"css functions","css mixins","css @function","css custom properties","npm css library","debated",-0.086,{"positive":31,"neutral":32,"mixed":33,"critical":32},6,7,0,20,{"execution":36,"performance":39,"idea":40},{"positive":37,"critical":38},2,3,{"positive":33,"critical":37},{"positive":38,"critical":37},[38,42,33,33,33,33,43,33,43,33,33,33,33,43,38,38,33,38,33,42,43,33,33,33,33,33,33,33,33,33,33,38,43,43,42,38,33,42,43,42],5,1,null,{"problem":44,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":46,"openness":59,"stage":59,"team_size":59},[47],{"value":48,"source":49,"evidence":50},"CSS","inferred",[51,55],{"id":52,"by":53,"text":54},"45580692","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.…",{"id":56,"by":57,"text":58},"45580949","dmix","Not supported by Firefox or Safari https:\u002F\u002Fcaniuse.com\u002F?search=%40function","unknown",{"praise":61,"objections":77,"requests":119,"questions":127,"alternatives":143},[62,70],{"value":63,"source":64,"evidence":65},"Functions allow parameterizing stylesheets and deriving themes from base values","commenter",[66],{"id":67,"by":68,"text":69},"45586139","hombre_fatal","It's not for DRYing\u002Fgolfing 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…",{"value":71,"source":64,"evidence":72},"CSS functions and mixins may make much current cruft unnecessary",[73],{"id":74,"by":75,"text":76},"45579863","jampekka","> Oooh this will not end well.. On the contrary. CSS functions and mixins may make a lot of current cruft unnecessary.",[78,89,97,112],{"value":79,"source":64,"evidence":80},"CSS is getting too complex and spaghetti-prone",[81,85],{"id":82,"by":83,"text":84},"45578796","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…",{"id":86,"by":87,"text":88},"45579283","bilekas","Oooh this will not end well.. Also side question, is it really necessary to have this as an npm package ?",{"value":90,"source":64,"evidence":91},"@function is not supported in Firefox or Safari",[92,93],{"id":56,"by":57,"text":58},{"id":94,"by":95,"text":96},"45581152","CharlesW","Yes, @function is still at the \"public working draft\" stage. https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-mixins-1\u002F",{"value":98,"source":64,"evidence":99},"Runtime versus build-time performance tradeoffs",[100,104,108],{"id":101,"by":102,"text":103},"45578835","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…",{"id":105,"by":106,"text":107},"45579792","kaoD","It's a tradeoff. I expect this to be non-trivial, do nothing in the general case (when referring to runtime CSS vars) and possibly increase your final CSS size for any…",{"id":109,"by":110,"text":111},"45581758","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…",{"value":113,"source":64,"evidence":114},"Publishing as npm package is unnecessary; a CDN would do",[115,116],{"id":86,"by":87,"text":88},{"id":117,"by":87,"text":118},"45579640","Surely a cdn is more convenient. I don't want to install an entire package manager just to 'install' 2 CSS files.",[120],{"value":121,"source":64,"evidence":122},"More compelling use cases beyond DRY refactoring",[123],{"id":124,"by":125,"text":126},"45579693","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…",[128,139],{"value":129,"source":64,"evidence":130},"Are CSS functions Turing complete?",[131,135],{"id":132,"by":133,"text":134},"45579113","ape4","Obvious question: are CSS functions Turing complete?",{"id":136,"by":137,"text":138},"45582592","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…",{"value":140,"source":64,"evidence":141},"How to load CSS libraries from components (CSS Modules)",[142],{"id":52,"by":53,"text":54},[144,151,158],{"value":145,"source":64,"evidence":146},"Tailwind",[147],{"id":148,"by":149,"text":150},"45582064","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!!",{"value":152,"source":64,"evidence":153},"Sass preprocessor variables and functions",[154],{"id":155,"by":156,"text":157},"45581367","chrismorgan","It’s the same with Custom Properties. There are plenty of situations where they are useful at runtime, but a lot of their use is just a single definition on :root, and people…",{"value":159,"source":64,"evidence":160},"Built-in CSS abs() and round() functions",[161],{"id":162,"by":163,"text":164},"45582142","semolino","abs() exists with cross-browser support: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fabs There are also other non-custom math functions like round() which can be very useful.",{"comments":33,"answered":33,"key":166},[],{"commenters":168,"max_depth":42,"maker_replies":33,"first_comment_mins":169,"lifespan_hours":170},46,8777,193,[172,174,178,182,185,186,189,192,195,198,200,203,206,210,211,214,217,219,220,224,226,228,230,231,234,237,239,242,243,246,249,252,254,257,259,262,265,267,270,273,276,278,281,284,287,289,292,294,296,299,302,305,307,308,312,314,316,318,321,322,324,325,326],[52,33,38,173,53,33],"project\u002Fneutral\u002Fexecution",[175,43,42,176,177,33],"45580506","project\u002Fpositive\u002Fnone","chris_wot",[179,43,33,180,181,33],"45581825","other\u002Fneutral\u002Fnone","llbbdd",[183,43,33,180,184,33],"45582802","typpilol",[148,43,33,180,149,33],[187,43,33,180,188,33],"45582553","ezeekqil",[190,43,33,180,191,33],"45589994","lerp-io",[193,43,33,180,194,33],"45590666","djxfade",[196,43,33,180,197,33],"45582315","JadeNB",[101,37,43,199,102,33],"project\u002Fcritical\u002Fperformance",[201,37,33,180,202,33],"45579123","gregoriol",[204,37,33,180,205,33],"45579716","haktan",[207,37,33,208,209,33],"45579851","commenter\u002Fneutral\u002Fnone","california-og",[105,37,43,199,106,33],[212,37,33,208,213,33],"45580557","afavour",[215,37,33,216,102,33],"45580691","commenter\u002Fneutral\u002Fdesign",[155,37,33,218,156,33],"commenter\u002Fneutral\u002Fperformance",[109,37,33,218,110,33],[221,37,33,222,223,33],"45582125","other\u002Fneutral\u002Fperformance","dleeftink",[225,37,33,222,137,33],"45582544",[227,37,33,180,102,33],"45583307",[56,38,43,229,57,33],"project\u002Fcritical\u002Fexecution",[94,38,38,173,95,33],[132,232,38,233,133,33],4,"project\u002Fneutral\u002Fidea",[235,232,33,180,236,33],"45580203","est",[238,232,33,180,110,33],"45581772",[240,232,38,233,241,33],"45582424","zamadatix",[136,232,38,233,137,33],[244,232,33,180,245,33],"45582686","qingcharles",[247,232,42,248,102,33],"45583328","project\u002Fpositive\u002Fidea",[250,42,33,180,251,33],"45580910","ulrischa",[253,42,43,229,95,33],"45581140",[255,42,33,218,256,33],"45581362","lelandfe",[258,42,33,208,251,33],"45583391",[260,31,33,180,261,33],"45584129","rrgok",[263,31,33,180,264,33],"45584134","svieira",[266,31,33,180,57,33],"45585863",[268,31,33,180,269,33],"45587261","spartanatreyu",[271,32,33,180,272,33],"45580651","solaraQuill55",[274,32,33,208,275,33],"45584248","mock-possum",[82,277,33,180,83,33],8,[279,277,33,180,280,33],"45578976","Hendrikto",[282,277,33,180,283,33],"45579055","runroader",[285,277,33,208,286,33],"45579274","mark_and_sweep",[288,277,33,180,283,33],"45579392",[290,277,33,208,291,33],"45579733","JimDabell",[293,277,33,180,286,33],"45580813",[295,277,33,180,137,33],"45582604",[297,277,33,180,298,33],"45586516","alwillis",[300,277,38,233,301,33],"45579056","bastawhiz",[86,303,43,304,87,33],9,"project\u002Fcritical\u002Fidea",[306,303,33,208,106,33],"45579591",[117,303,43,229,87,33],[309,303,42,310,311,33],"45579656","project\u002Fpositive\u002Fexecution","dinkleberg",[313,303,42,310,106,33],"45579730",[315,303,38,173,75,33],"45579854",[317,303,33,208,110,33],"45581719",[319,303,33,208,320,33],"45582022","zdragnar",[74,303,42,248,75,33],[124,323,43,304,125,33],10,[162,323,33,208,163,33],[67,323,42,248,68,33],[327,323,33,328,125,33],"45603587","commenter\u002Fneutral\u002Fidea",[],[331,336,341,345,349,354],{"id":332,"name":333,"points":334,"category":335},"45504973","Timelinize",630,"productivity",{"id":337,"name":338,"points":339,"category":340},"45492489","nullpt.rs",348,"security_privacy",{"id":342,"name":343,"points":344,"category":335},"45490578","Write It Down",271,{"id":346,"name":347,"points":348,"category":19},"45491609","Kent Dybvig's Scheme Machine (heap-lisp)",226,{"id":350,"name":351,"points":352,"category":353},"45515978","telefonefix",222,"hardware",{"id":355,"name":356,"points":357,"category":358},"45516584","Recall",171,"ai",11,false,"v2",{"id":363,"name":5,"line":5,"ai":360,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":364,"top":17,"kw":365,"maker":10,"domain":9,"tier":18,"attempts":33,"strip":366,"url":8,"mix":367,"praise":63,"objection":79,"sub":20},45513956,-0.09,[23,24,25,26,27],"3500001010000133030510000000000311530515",[31,32,33,32],1794036683819]