
Stylelint – A modern linter for CSS - tilt
https://stylelint.io/
======
fxfan
Something else that I recently came across-
[https://japgolly.github.io/scalacss/book/quickstart/standalo...](https://japgolly.github.io/scalacss/book/quickstart/standalone.html)

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
I 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
That's like saying JavaScript is enough over TypeScript because of syntax
highlighting.

~~~
nicoburns
Not 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...

------
buro9
This is nice, and I tried it out... and it's led to a general CSS question.

    
    
        #ff9f
    

Is that valid? What colour is that?!

~~~
ThaJay
Why 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.

~~~
jerf
If 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.)

------
nkingsy
Much 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.

------
antoniuschan99
Does this help with Dead Code Elimination?

~~~
analogmemory
Nope, 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)

------
dlbucci
Any support for Stylus? I see it supports SugarSS, which I had not heard of,
and that looks sort of close...

~~~
helb
Should 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
I 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
The 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/8c547d48cfaa0628ee720a16caaa...](https://gist.github.com/spiralx/8c547d48cfaa0628ee720a16caaaa6bc)

------
elbrian
I'm a little confused -- did something happen with/to stylelint? Why is it at
the top of HN right now?

~~~
Symmetry
Someone was in the lucky 10,000 today and wanted to share the joy, presumably.

[https://xkcd.com/1053/](https://xkcd.com/1053/)

~~~
swsieber
I must admit, I'm one of those 10,000.

------
malvosenior
This 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.

~~~
Klathmon
I'm not so sure that'd be a good idea. A few questions:

1\. what benefits would a statically compiled binary provide? Would it be
significantly faster? Would it be easier to manage? Would it be easier to
modify?

I'd guess the answers to those last 3 would be "yes, but not significantly
so", "no" and "no" respectively, but that is a complete guess.

2\. Would it be cross-platform?

I work in windows and macos, our CI server uses linux. Would your alternate
languages/methods work across all those platforms? if not it's almost a non-
starter, because we aren't going to require our devs and CI system change
entirely to accommodate one smaller package.

3\. how would it be installed and kept up to date?

NPM has the tooling built up for managing this. We have a bot that can ping
when new versions come out after a delay, we can see install numbers and gauge
when it's safe to install vs when it's brand new and still might be buggy or
have un-found issues. We have CLI tooling that can parse the package.json and
determine what is out of date, and in one command can update many of them and
have the tests run to ensure there aren't any major breakages.

Would your method work on all platforms? How would it differ per platform? Can
I install it without having to install and setup the developer tools for Go
and Rust?

NPM isn't perfect, but it does a LOT of things right. Being able to `npm
install` something, have it go to a local folder, then have it just run on all
platforms is one that it does VERY right in my opinion. It's installed
alongside node.js, and the install process is quick and painless in 99% of
cases. And considering this tool is probably fast enough as-is in javascript
right now, I don't think there would be any significant gains by rewriting it
in some other compiled language to offset the downsides (like not being able
to easily inspect and modify the code that was installed, which I have done on
many occasions to find and fix bugs in 3rd party libraries).

~~~
malvosenior
If it was written in a compiled language you could just copy the binary over
to your system. You wouldn't even have to mess around installing the language
or build tools.

Golang and Rust are both very cross platform and compile to Mac/Linux/Windows
natively.

The main benefits to using a more modern language would be:

1\. Easier distribution (like I said, just copy a binary)

2\. Better performance (but like you said, often doesn't matter)

3\. Much better code (subjective, but static typing offers real benefit as
does having a very nice standard library).

~~~
Klathmon
But when 99% of your target audience (in this case JS and web developers)
already have the runtime installed, then "just copy a binary" isn't easier,
it's harder.

`npm install stylelint` is about as easy as it gets. copying a binary requires
you to put it somewhere, make sure your path is setup correctly, find a way to
automatically install it (or put it in the repo causing the size of the repo
to bloat), and ensure you are downloading the right version for each platform.

And you still didn't address the other issues. How do you know when it has an
update, or a security update! NPM warns you if the author deprecates a package
version with big yellow warnings when you do something letting you know it's
unsupported and has security issues. A binary won't do that.

And then you still have the issue of being unable to modify the code, or even
see the code on your system.

And "much better code" is subjective as hell! Go sucks to work with and read
for some because it's a bit verbose, especially when dealing with errors and
some of the hoops that have to be jumped through to handle or make generic
functions. Rust is a HUGE language IMO, I've never used it professionally, but
I've been trying to learn it and every single time I see a rust codebase I'm
looking up new syntax or some other feature I didn't know about. That's not to
say those are 2 bad languages, but that all languages have their downsides. JS
is no different, but again when your target audience is 99% devs that use JS
on a daily basis, other languages, no matter how easy to understand and use,
are going to be harder to work with for them.

I'd love to see more diversity in this area, but if you are telling me to
"download and run this binary" as the install method, it's probably not going
to be included in an app that I manage, because there's too much extra work
that has to be handled, like installing it automatically on the CI server,
installing it locally for devs, keeping it up to date, checking it for
security issues or problems (if the dev even reports them), and a lot more.

~~~
tracker1
The just copy it argument doesn't really fly as far as Linux, Windows, Mac
too. Not to mention incompatible versions of said OSes alone, not to mention
others.

While I wouldn't mind seeing more libraries as wasm for use with node in npm,
I don't think the case is really made to have to have even broader tooling to
use it alone. I mean, I still don't get why Python hasn't been displaced in
Node.

