salesforce / lwc-test

LWC plugins and utilities for testing
MIT License
43 stars 29 forks source link

fix: use jsdom to parse style attr and serialize it #239

Closed nolanlawson closed 3 months ago

nolanlawson commented 3 months ago

It occurred to me that, instead of regexes, we can use the elm.style CSSStyleDeclaration object to serialize out the style attribute. This has some benefits:

  1. We delegate the hard work to JSDOM
  2. We can handle stuff like data: base64 URLs correctly

And some downsides:

  1. JSDOM's parsing does not seem perfect, e.g. it doesn't seem to understand ! important (due to the space) and it doesn't seem to like a leading ;
  2. For invalid CSS declarations (e.g. color: yolo) it will just strip them out
  3. JSDOM normalizes some values, e.g. background-color:#FFFFFF;" becomes background-color: rgb(255, 255, 255);

I think this is an acceptable tradeoff, especially since it makes the code a lot cleaner.

nolanlawson commented 3 months ago

! important was always kind of broken; we just discovered it now due to actually writing tests for all whitespace combinations.

When looking at snapshots in core, I don't see anyone actually using ! important so it probably doesn't matter.