11 ms·
Stylelint – A modern linter for CSS
- buro9 8y agoThis is nice, and I tried it out... and it's led to a general CSS question. #ff9f Is that valid? What colour is that?!
- xPaw 8y agoThat's #rgba where 4th character is the alpha.
- francislavoie 8y agoThat should expand out to #ffff99ff, where the last pair is the alpha, i.e. rgba
- jgtrosh 8y agoThis is 4-digit hex rgba notation. It's a shorthand for #rrggbbaa, literally as #rgba. In this case alpha is f = 1.0, so #ff9f = #ff9.
- deleted 8y ago[deleted]
- detaro 8y agoIt's part of CSS Colors Level 4, which is still in draft stages, but some browsers (but not all) already support it. It's the same as #ffff99ff (same draft), which is the same as rgba(255,255,153,100%) or #ffff99
- Novashi 8y agoWhat advantage does this give when we have SASS and other systems that support variables? This is a spec going through draft-review-deployment so we can type 3 less characters?
- detaro 8y agoUntil now, the variants where #rrggbb and #rgb, so the extension to alpha is parallel: #rrggbbaa, #rgba. I personally like that extension, so you can just add an alpha component to a color without transforming it to a different form first. It's also relevant to people using automated systems, since those automatically can choose the most compact representation of a color possible in their output. > This is a spec going through draft-review-deployment so we can type 3 less characters? The key phrase above is is part of, it's one of the smaller aspects of the spec.
- metaloha 8y agoThis doesn't have anything to do with variables, it's simply adding an opacity value to hex-encoded colours. So `#ffff` (or `#ffffffff`) is the sames as `rgba(255, 255, 255, 1)`, and `#ffffff7f` would be `rgba(255, 255, 255, 0.5)`. Until now, if you wanted to assign a colour with opacity, you had to use the `rgba()` format. Now you can just hex-encode it :)
- SimeVidas 8y agoBrowser support isn’t really that relevant here. PostCSS has a plugin that adds a fallback during the build step. If you want to use the #RGBA and #RRGGBBAA syntax, you can do it today. (I use it.)
- detaro 8y agoIt's relevant information, because not everyone uses the same postprocessing pipeline as you do (or even any at all)
- ThaJay 8y agoWhy is it # ff ff 99 ff Would # f0 f0 90 f0 not be much more logical? It it were decimals 10, 20, 30 would get a shrthand of 1, 2, 3. It would not mean 11, 22, 33. At 1 it's not much of a differenct but at f it's quite a bit.
- FreeFull 8y agoIf #fff was #f0f0f0 then it would be impossible to express pure white in the shorter notation
- bArray 8y agoBecause it gives you the greatest range, from 00 -> FF. That way you can represent full black and full white without either looking grey.
- jerf 8y agoIf you start with the premises that A: the shorthand notation should have access to the 0 value B: the shorthand notation should have access to the full value #ff and C: the shorthand notation should be linear in the RGBA scale, then the current system falls out of that as the uniquely-identified solution. (Ignoring questions about how linear RGBA really is. In this case we're just looking at how to map 0-f to 00-ff. Whether RGBA is broken is a separate question.)
- deleted 8y ago[deleted]
- lstamour 8y agoIts popularity as a shorthand arose from the use of the “web safe” colour palette back in the late 90s/early 2000s which exclusively used 00, 33, 66, 99, CC, and FF: https://en.m.wikipedia.org/wiki/Web_colors#Web-safe_colors https://en.m.wikipedia.org/wiki/Web_colors#Web-safe_colors
- malvosenior 8y agoThis is neat, but: `npm install stylelint --save-dev` I really wish people wouldn't write cli tools in Javascript. Npm is a disaster and will pollute my system with all kinds of dependency libraries if I run the above command. It would be great to see more tools like this written in Go, Rust or something else that compiles to a static binary.
- Chernobog 8y agoAfaik with that command you will not pollute the rest of the system, since there is no global flag. It will end up in node modules/.bin and can be executed with npm scripts.
- malvosenior 8y agoI still find that pretty tacky. Is there a reason someone would build something like this in JS instead of a more suitable language? I get that front-end developers probably know JS best from a user perspective it's a bad language choice just from the distribution alone.
- austinjp 8y agoI kinda agree about JS CLI tools. However, I'm guessing the target market is JS-led front-end developers. Installing via npm makes it simpler to drop in to a toolchain that's already oriented around npm. Not saying that's right or optimal, of course.
- tracker1 8y agoNot to mention that JS isn't an inherently bad language in the first place. Which is an absurd presumption. Most languages have some nice, good and really ugly parts in practice. Modern JS is pretty nice to work with, and often I can get far more done with it far faster than with anything else I would choose. Node + NPM are second to none in terms of productivity IMHO. I've used and worked with other languages and tools and find that JS tooling is just plain less friction most of the time. If I had to switch contexts to 3-4 other languages day to day again, I'd hate it... I remember it being so bad working with 3-4 languages every day that It'd sometimes take me 2-3 minutes just to be able to actually listen to a question by a peer and be able to answer. It can not be underestimated. Node tooling is probably not the best at anything... that said, it's good enough for almost everything.
- elbrian 8y agoI'm a little confused -- did something happen with/to stylelint? Why is it at the top of HN right now?
- seattle_spring 8y agoI was wondering the same thing. It'd be like a link to the homepage of React being the top link of HN. Stylelint has been around and popular for years now.
- h1d 8y agoSometimes not so obvious tools get posted like that, you'll see. I think it's good to see fresh discussions on random tools from time to time.
- Symmetry 8y agoSomeone was in the lucky 10,000 today and wanted to share the joy, presumably. https://xkcd.com/1053/ https://xkcd.com/1053/
- jchook 8y agoI got a little excited that it would replace Prettier except with [insert more reasonable style preference here]. Alas, they list the autofix support as partial/experimental.
- fxfan 8y agoSomething else that I recently came across- https://japgolly.github.io/scalacss/book/quickstart/standalone.html https://japgolly.github.io/scalacss/book/quickstart/standalo... Typesafe css, so you wouldn't spell px as xp. Stylelint isn't just a linter- it's also a checker. And looks like it does both jobs well. scala-css does the checker job very well, maybe better if it understands the fields (I don't know if it does).
- nicoburns 8y agoI generally find that syntax highlighting does a good job of this. My editor will highlight valid CSS keywords and property names a different colour to invalid ones, making it pretty obvious when you've made a typo.
- s_y_n_t_a_x 8y agoThat's like saying JavaScript is enough over TypeScript because of syntax highlighting.
- nicoburns 8y agoNot really. TypeScript providea much stricter checking than just checking that I have the correct syntax. Whereas this tool isn't checking that my combination of CSS properties makes sense, it's just checking the syntax...
- dlbucci 8y agoAny support for Stylus? I see it supports SugarSS, which I had not heard of, and that looks sort of close...
- helb 8y agoShould be possible via PostCSS and something like https://www.npmjs.com/package/postcss-stylus-parser https://www.npmjs.com/package/postcss-stylus-parser. Haven't tried it though, i've moved away from Stylus some time ago as it seemed to be pretty much dead.
- h1d 8y agoI think it's more like 'complete'. What do you miss from Stylus? I prefer it from SCSS when it doesn't require you to type colons, semicolons and brackets for quite less typing and everything you'd expect as a CSS preprocessor is just there. It's TJ's work after all.
- spiralx 8y agoThe only thing lacking about Stylus is the documentation really - the built-in functions page seems to list functions in random order (could be in order of addition to the language I guess!), there's no master index of the various syntax features, its usefulness varies a lot between different features - some are barely mentioned at all - and stuff like arrays, lists and hashes could do with more clarification. Actually, looking at some of my standard Stylus includes, you can't have a block mixin that modifies the individual rules in a block, to be able to create something like important() for $prop, $value in block {$prop}: $value !important I recently discovered a new user style Chrome extension called Stylus after Stylish was removed from the Extension Store for privacy violations, and not only does it allow you to use Stylelint and CSSlint to check your user styles, but it supports an extended type of user style called UserCSS that allows you to use Stylus for writing styles :) It does need you to use colons to prevent the editor and Stylelint complaining, but everything else works: https://gist.github.com/spiralx/8c547d48cfaa0628ee720a16caaaa6bc https://gist.github.com/spiralx/8c547d48cfaa0628ee720a16caaa...
- 8y ago
- antoniuschan99 8y agoDoes this help with Dead Code Elimination?
- analogmemory 8y agoNope, but there are tools for this PurgeCSS (recommended by Tailwind) https://github.com/FullHuman/purgecss https://github.com/FullHuman/purgecss PurifyCSS https://github.com/purifycss/purifycss https://github.com/purifycss/purifycss
- nkingsy 8y agoMuch love for Stylelint. My last company had some unique style guide rules, and I was able to encode all of them in Stylelint with only a few custom rules. The custom rules were very easy to write and plug in, and everything auto-fixes. Absolutely eliminated a large chunk of developer time wasted in code reviewing the wrong things.