Optimize CSS with SAT Solving | Hacker News Reader

Optimize CSS with SAT Solving

github.com

163 pointskeepamovin45 comments

I lazily didn't want to refactor my CSS myself, so after a failed attempt using ChatGPT for this, I found this CSS sat solver tool.

Just a note on macOS I managed to get this work by:

  - Editing the pyproject.toml and changing
  - lxml version to 5.1.0
  - python to ^3.8
  - then running poetry install
  - then, also in the repo, running cd satcss && ln -s $(which z3) z3
  - then poetry run satcss --help

I may have skipped a step or 2 but that was basically it. I then used satcss' output with this tool

https://css.github.io/csso/csso.html

to beautify and further organize it

I was similarly surprised that gpt4 can’t do this. I have nearly started over on full-stack applications because my css got out of hand, haha.

This is pretty much exactly what I was looking for!

same, it’s funny how bad chatgpt is at css… in my experience it can’t even do simple css refactors

There are a lot of bad examples on the internet, "try this, it worked for me" but only because of some other rule up the cascade that the person answering isn't aware of.

there's plenty of this for JS too and somehow it's much much better at that... I wonder what the difference is, JS is more logical?

Transformers are highly parallelized, and generative AI appends.

Even if you ignore that graph problems typically have more time complexity than LLMs offer during inference, they are circuit like and not turing machine like.

Without getting lucky with pre-training matches, it would be surprising if they were good at it at all.

They can’t solve a Sudoku, why do you expect it to be deterministically good at actual reasoning/algorithmical tasks?

Your comment highlights why distributing anything that's python is unfortunately nearly impossible.

Ha! :) Yeah, python installs / distribution it’s pretty much a dumpster fire it seems. But I’m not an expert at that. It’s kind of funny or ironic that given how easy to use python is supposed to be and how important it now it is with AI etc..

I don’t know … maybe these pythonistas like the arcane type of secret initiate knowledge required in order to participate?

Containers.

Virtual environments of one type or other.

Or go the full hog and use a container like nix.

This is not even remotely normal for Python tools. The problem arises here because it’s using libxml2, a C library.

It’s not clear to me from the readme why this is useful.

.a and .b identify different groups of elements. The fact they’re both coloured red is incidental, circumstantial and likely temporary. Refactoring to save a couple of lines makes the code less deleteable and thus harder to maintain.

I would treat this tool similarly to a minifier. It reduces size and bandwidth at the cost of legibility. It should be a stage in the deployment pipeline, but not a way to format your own code.

Add it to a bundler like parceljs. Minifies and optimizes for production. Our dev css file is 40kb. Optimized production version 10kb (example)

Is that an example of using this tool?

Yeah, that’s fair enough. I suppose if you want to keep all the selectors fully ‘denormalized’ and independent, at the expense of duplication, then you probably don’t wanna link them together by factoring out commonalities like this seems to do. This has benefits indeed.

I guess what I was looking for was a different type of benefits, more achieved through normalizing the CSS.

My CSS was just like accreted overtime and I just couldn’t be bothered to like get the overall picture myself, and re-organize — so I wanted to reduce some of the entropy and redundancy and increase organization, so it would be clearer.

I think from another point of view having something that’s clearer and tighter is more maintainable.

All depends on what you want I suppose. I was also hoping that I would be able to change a color in one place and it would update across many selectors. And that’s one of the benefits that a more normalized factored structure gives.

Ann interesting dichotomy, your comment raises between fully denormalized and easy to change a single thing, and what I am trying to achieve in this case, and that’s more succinct and structured with related parts proximal. A more ‘normalized’ CSS haha! :)

Slightly OT: anyone can recommend a tool that turns the tailwind class mess into a properly structured CSS file (Grouping common utility classes etc).

I think I'd pay for this if it works properly...

Just an example of code that drives me nuts:

                <button
                  type="button"
                  className={clsx(
                    checked ? "border-2 border-primary-800" : "",
                    "flex touch-none flex-col items-center justify-between rounded border border-gray-100 bg-white hover:border-2 hover:border-primary-800",
                  )}
                >

afaik Tailwind determine classes to produce at runtime. You are likely out of luck there, who would want to turn this into a compile time approach, would rather write a new css library.

That’s just to save space. You can actually produce a complete, static CSS file that contains every class. Also, the “dynamic” nature is almost as simple as a regex - you don’t have to do complex static analysis which of the branches are taken, etc, you just include every className and that’s it.

I didnt know the entire class set could be produced. Thanks for sharing

Wouldn't gzip will remove redundancy when it sends the compressed .css file.

It's still saving probably a single byte in this example

.a { color: red }

.b { color: red }

Also it saves on parsing time I suppose. And less to zip and unzip.

The type of thing I'd add to a projects deployment stage and never touch again unless it causes an issue.

Still takes time to parse and apply the styles though.

CSS is probably a much smaller concern than JS but in the world of 5G networks and fast WiFi I feel like we’re nearing a world where device CPU can be a bigger bottleneck than bandwidth at times.

Yeah, I mean this is not purely about reducing space at least from my point of view I wanted to better organize my CSS and I reduced duplication so that the overall structure would be clear to me and for what I wanted to do it would be easier to maintain in modify. A more ‘normalized’ (in the language of relational databases) CSS haha! :)

I've been looking for a CSS optimizer that will remove any styles that aren't actually used -- e.g. selectors matching ids and classes that don't exist in the html. Does anyone know of such a thing? Preferably easy to use from Jetbrains IDEs?

https://github.com/GoogleChromeLabs/critters Might be a good starting point. It’s designed to inline the css afterward so it’s more focused on extracting used css than removing unused.

Check out: https://github.com/uncss/uncss

I've only used it once but it did the job (NOTE: Plain HTML, plain CSS, no build pipeline. So YMMV)

As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.

[0] https://purgecss.com

The mere fact that a SAT solver was created for CSS shows that CSS is too complicated.

Poppycock. A sat solver is leveraged to minify CSS. This is a discrete optimization problem, for which sat solvers are well-suited. That doesn't indicate that CSS is too complex.

I would like a tool similar to this, but for refactoring in a human-readable way instead of minifying. Some tool to automatically look for duplicated css code. In theory, it seems easier for css than for actual programming languages given the simplicity

CSS is Turing complete, although you could probably handle 99.9% of real world cases without dealing with that.

Last time I was leaving front end there were rumors of css coverage tools. That would certainly be a start.

It's a thing in Chrome Dev Tools now: https://developer.chrome.com/docs/devtools/coverage/

now, if only it could persist the data while navigating to other pages, it would be a lot more useful

This I remember now. So that still hasn’t been sorted out? Pity.

and also automate all possible interaction for styles applied only in certain condition for that page?

This sort of does that I think, but it more just dedupes it rather than just identifying the duplicates. But I agree that like some tooling to make CSS more human readable, and like to tame unwieldy enlarged CSS and subdue it to the useful and the good and the organized that would be a very useful thing, but I couldn’t find anything… besides this haha! :)

Yeah, in a related anecdote it’s surprising how sparse the landscape of CSS tools seemed at least for command line tools that I was looking for.

I didn’t want an ID plug-in because I didn’t really use anything except for vim and I don’t really use plug-ins for that.

That might be kind of a niche set up but when I went looking for like even just something to sort the properties by some standard order within each rule, I couldn’t find anything current that worked in my searching anyway.

I wish there was some more docs on what it does in addition to modern minifiers such as csso and lightningcss, both of which do refactor css when they deem safe.

This is a repository that accompanies a research paper. https://dl.acm.org/doi/10.1145/3310337

Is there an online version?

I don’t think so, but wouldn’t something like replit make this possible to run online?

Very cool!

Reply on news.ycombinator.com