9 ms·
Automatic class sorting with Prettier (2022)
- paulddraper 3y ago> any classes in the base layer will be sorted first, followed by classes in the components layer, and then finally classes in the utilities layer I guess you can get away with that because a tool can follow those rules. But man, I <3 alpha sort.
- pech0rin 3y agoIt follows the order the classes are written in the css so it makes understanding how the css is applied easier. It’s not just an arbitrary ordering
- dumbo-octopus 3y agoThat's how you get very-important layout classes (hidden, flex, etc) put arbitrarily in the middle of purely-visual ones (border, etc.). I've seen this in practice, and it makes grokking exiting code a massive pain. But then I'm so old school I prefer just putting the CSS in the CSS, or even the `style` attribute. (I must say I do appreciate the pseudo-class support in tailwind.)
- paulddraper 3y agoBut then if I'm looking for "xyz" in a list of a dozen classes, I can easily find whether it exists.
- EspadaV9 3y ago> The plugin will respect your tailwind.config.js file and work with any Tailwind plugins you’ve installed, but _there is no way to change the sort order_. Really like that they don't give options to change the settings. Just one less thing to bike shed within teams. Really doesn't matter what is picked, just as long as it is consistent (and not obviously stupid).
- eviks 3y agoWhy is less-than-obviously stupid consistency better than choice?
- mplewis 3y agoPeople bikeshed given choices. When people have one choice, they get onto writing code that actually matters.
- eviks 3y agoThe more realistic outcome is they get onto bikeshedding other choices like pickigng a more configurable tool since, you know, you haven't actually eliminated choices, just reduced them without constraining: infinity - 1 = infinity
- williamdclt 3y agoDidn't happen in the ~dozen team I worked with, so I wouldn't say it's the "more realistic outcome"
- j4yav 3y agoPeople who can’t help but bikeshed will consistently find themselves surrounded by bikeshedding
- AlchemistCamp 3y agoVery true. Tools are often abandoned for being too restrictive and I’ve seen it several times just with formatters alone.
- deleted 3y ago[deleted]
- silviot 3y agoBecause otherwise you spend too much time arguing about not-so-important matters (in a word: bikeshed - you end up bikeshedding less).
- lcrz 3y agoThis blog post is from 2022.
- ikari_pl 3y agothat's 120 JavaScript years ago!
- singhrac 3y agoYou’re joking, but I know some projects moving to Biomejs, because Prettier is now outdated (I don’t really write JavaScript, so I have no idea).
- Cu3PO42 3y agoI do work in JavaScript, but I also had no idea what Biome was. Apparently the Rome project rebranded. The main appeal, I think, is that it is written in native code and significantly faster than Prettier.
- vinnymac 3y agoI had learned of both Biome and Rome, but didn’t know about the rebrand. Makes me think they’ll switch gears to focus on improving the linter after reaching 100% parity.
- franky47 3y agoI'd love to give Biome a try, but it's currently lacking OP's submission of sorting Tailwind classes. https://github.com/biomejs/biome/discussions/164 https://github.com/biomejs/biome/discussions/164
- conaclos 3y agoA contributor is currently working on this feature [0] We are currently discussing which options to add to the rule on the Discord of Biome. We expect to ship the feature with the next release (on February). A nightly will be released earlier to gather feedback. [0] https://github.com/biomejs/biome/pull/1362 https://github.com/biomejs/biome/pull/1362
- assimpleaspossi 3y agoBoth MDN and the W3C complain about Prettier putting closing slashes on HTML tags such as <input />. While allowed due to backward compatibility to XHTML, they have never been specified, do nothing, and browsers ignore them so it is pointless to put them there. https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements https://github.com/validator/validator/wiki/Markup-%C2%BB-Vo... https://github.com/orgs/mdn/discussions/242 https://github.com/orgs/mdn/discussions/242
- nkohari 3y agoSorry, what does this have to do with the article?
- fnord123 3y ago> While allowed due to backward compatibility to XHTML, they have never been specified, do nothing, and browsers ignore them so it is pointless to put them there. What do you mean by "never been specified"? They are in the spec: https://www.w3.org/html/wg/spec/syntax.html#start-tags https://www.w3.org/html/wg/spec/syntax.html#start-tags > Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
- assimpleaspossi 3y agoYou are looking at what I said. What you are quoting says it's allowed, and it "has no effect", but if you look at the actual element specification[1], it never says to use it. In fact, it says nothing at all about it. [1] https://html.spec.whatwg.org/dev/input.html#the-input-element https://html.spec.whatwg.org/dev/input.html#the-input-elemen... You will never find any HTML specification which will tell you a closing slash is required or that it has any meaning or does anything at all.
- alpaca128 3y agoIt very clearly says it has no effect on void elements, and then directly follows up with describing the effect it does have. And the link you provided is specifically for the input tag, which has nothing to do with the syntax definition in general. Why would they repeat a generally applicable rule in more specific sections?
- timenova 3y agoDoes anyone know if it's possible to get Tailwind class sorting in Elixir Phoenix HEEX templates. It would be a great addition to the Elixir formatter. Maybe we could write a formatter plugin in Elixir that does the same thing if this one isn't usable directly.
- krnsi 3y agoHere you go: https://hexdocs.pm/tailwind_formatter/TailwindFormatter.html https://hexdocs.pm/tailwind_formatter/TailwindFormatter.html
- timenova 3y agoThanks! I'll try it out soon. Looks exactly what I wanted, including the feature to order variants automatically (`dark:sm:... -> sm:dark:...` from the repo's readme).
- conaclos 3y agoBiome [0], a fast Prettier-compatible formatter, is currently working on adding class sorting [1]. We expect to ship the feature with the next release (on February). We are discussing which options to provide for the feature (mainly on the Discord of Biome). [0] https://biomejs.dev/ https://biomejs.dev/ [1] https://github.com/biomejs/biome/pull/1362 https://github.com/biomejs/biome/pull/1362
- Kognito 3y agoI commend anyone for trying to make the tooling ecosystem better, but I’ve never once thought Prettier was too slow. It runs in a fraction of a second on file save. The performance comparison on Biomejs’ site shows a Prettier run taking 14 seconds, which I can imagine on a very large code base might be true - but that’s a one-off case surely? Once it’s run, it’s just a case of format on save or commit which is back to near-instantaneous. What’s the use case I’m missing here?
- beeboobaa 3y agogit commit hooks & ci checks that ensure everything is formatted because that one coworker refuses to set it up to run on save and keeps forgetting causing merge conflicts down the line
- Kognito 3y agoWe all know that individual… But still, formatting changed files on commit, even on CI ought to be a fraction of a second.
- conaclos 3y agoTypically, you would check the formatting of the entire codebase on the CI or even locally (to ensure that you are doing the same checks on the CI and locally). On a large code base this can take several seconds, reducing developer experience. Yes, you can use git hook to check only changed files. However, this requires more setup and may lead to some misses. Biome can also format malformed code. It supports formatting as you type. Biome has less known non-idempotent formatting (For some edge cases you need to run twice Prettier to get a stabilized output). Biome is also a linter. You get two tools that are closely compatible.
- vinnymac 3y agoIn a similar vein, you can sort imports with Prettier using Trivago’s plugin. https://github.com/trivago/prettier-plugin-sort-imports https://github.com/trivago/prettier-plugin-sort-imports
- lobsterthief 3y agoThis is amazing, thank you!
- tiffanyh 3y agoLet's add another step in our toolchain & deployment bundle. It saddens me to see people new to web development don't realize that to deploy a webpage, all it takes is just uploading (SFTP) a single .html file onto a web server. Nothing more is technically required than that, but we've made it so complex you'd never know.
- true_pk 3y agoDeployment can be as easy and as complicated as you like it. Nobody took away an option to upload a single html file via SFTP.
- dharmab 3y agoHeck, plenty of websites today run directly out of S3.
- samstave 3y agoSure, we can simplify it as such.... Deploy it to what? How? Via what? Who is managing it? Who is paying for it? Who physically installed the server, and setup your ability to DrawTheRestOfTheHTML? Personally - while we want abstraction in our deployment understandings to smooth ramp understanding - its important to see all the supporting inputs that made your SFTP of an .html possible. >>I once saw him teach a philosophy lesson about a pencil. A Fuckin' Pencil! https://www.youtube.com/watch?v=67tHtpac5ws https://www.youtube.com/watch?v=67tHtpac5ws
- rozenmd 3y agoAll it takes to get somewhere is to walk there, and yet we've dreamed up all these complicated machines that get us there even faster.
- digging 3y ago> all it takes is just uploading (SFTP) a single .html file onto a web server Yes, it's unfortunate that new developers don't know the basics. However, that's not an option for a multi-page site with complex user interactions. There's no point in complaining about new tools being created which serve a need. If it makes someone's job easier when they're creating complex web apps, it's a good thing.