Optimize CSS with SAT Solving

https://github.com/matthewhague/sat-css-tool

by keepamovin • 2 years ago

163 45 2 years ago

keepamovin6• 2 years ago

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

b33j0r• 2 years ago

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!

micromacrofoot2• 2 years ago

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

nyrikki• 2 years ago

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.

kaba02• 2 years ago

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

matsemann• 2 years ago

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

keepamovin6• 2 years ago

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?

JimDabell• 2 years ago

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

scholaronroad• 2 years ago

Very cool!

spencerchubb• 2 years ago

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

ToValueFunfetti• 2 years ago

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

hinkley2• 2 years ago

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

gbickford• 2 years ago

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

keepamovin6• 2 years ago

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.

niutech• 2 years ago

Is there an online version?

keepamovin6• 2 years ago

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

the_other• 2 years ago

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.

andful• 2 years ago

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.

holoduke• 2 years ago

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

the-smug-one• 2 years ago

Is that an example of using this tool?

keepamovin6• 2 years ago

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! :)

ape4• 2 years ago

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

Dlanv• 2 years ago

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.

afavour• 2 years ago

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.

keepamovin6• 2 years ago

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! :)

foobarbecue• 2 years ago

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?

gregod• 2 years ago

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.

iansinnott• 2 years ago

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)

c_s_guy• 2 years ago

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

[0] https://purgecss.com

ssttoo• 2 years ago

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.

rolfvandekrol• 2 years ago

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

ToJans2• 2 years ago

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

ToJans2• 2 years ago

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",
                  )}
                >

hirako20004• 2 years ago

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.

kaba02• 2 years ago

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.

russfink• 2 years ago

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

klyrs• 2 years ago

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.

Optimize CSS with SAT Solving

Related Stories