use CSS-prettifier for string-matching on spec file?

[devdoomari]

I've seen a lot of test cases that goes like:

t.equal(
      Style.getStyles(),
      `.${x}{background:red}.${y}{background:palegreen}` +
      `@media (min-width: 400px){.${x}{background:yellow}.${y}{background:pink}}`
    )

how about using a css-prettifier (or https://www.npmjs.com/package/css) for better comparison?

e.g.)

t.equal(
     beautifyCss(Style.getStyles()),
     beautifyCss(`
          .${x}{
                background:red
           }
           .${y}{
                background: palegreen
           }
           @media ( ...) {
                  .${x}{
                          ...
            }
     `)
);

I know the line are longer, but it would be easier to read the test cases.

[Blake Embrey]

I don't think so. It's intentionally testing that the output is as small as possible, so we'd need to keep at least a few tests around in the existing format to ensure there's no regression there. If we wanted expanded output, though, we could probably add a flag to free-style itself to return "pretty CSS", but it's probably not worth it unless someone wants that explicitly.

[devdoomari]

I'm not proposing for a 'prettier CSS output of FreeStyle'.
(though I'd like to have it for better debugging)

Actually, it's more about ensuring correct tests, and with this in place, you can get your tests working even with prettified CSS output turned on.
Also, if you wanted to test whether FreeStyle is outputting minified/ beautified version, you can call minimizeCss() instead of beautifyCss() call of some library.

[Blake Embrey]

I'm pretty indifferent. No one else has brought up the issue, and at most I believe there's maybe a couple of line breaks to keep it all on one line. I'd worry about bring an external library to test this output, just because we'd end up dependent on styling against which library that ends up being. What do you think of snapshots instead?

[devdoomari]

No one else has brought up the issue

I'm not sold on this kind of reasoning... FreeStyle only had like 30 issues for now...

Anyway, what's 'snapshots'?

[Blake Embrey]

Neither am I sold on the reason to change this either. That's why I'm trying to understand and tell you why I'd prefer to leave it. FWIW, not having many issues is my goal. Snapshots would entail having the tests automatically generate the output that would be compared against in a later test, with the ability to regenerate it if something changes - makes it easier to analyse changes when they occur and, if I understand, should serve the goal of what you want from this.

[Blake Embrey]

Closing this issue. I'm happy with making sure the specs are matching based on minified CSS, as that's the intent of this module to output.