kentcdodds/jest-glamor-react

Sort CSS output?

kentcdodds opened this issue · 13 comments

kentcdodds commented

Otherwise, it appears that it's kinda random and the diffs are really weird. If they could be sorted then maybe they'd stay in the same place? It's unclear. I think that this could help with that though...

kentcdodds commented

I think that this is no longer an issue.

chrisnojima commented

@kentcdodds would it be possible to reopen this? I just integrated storyshots/storybook jest testing and I use this utility so my glamor css names are 'stable' between CI runs (awesome) but sadly I had to turn it off because I get diffs where the order of the .glamor-* changes

example:

 - .glamor-3,
    - [data-glamor-3] {
    -   font-size: 13px;
    -   line-height: 17px;
    -   color: rgba(0, 0, 0, 0.75);
    -   -webkit-font-smoothing: antialiased;
    -   text-rendering: optimizeLegibility;
    -   font-family: OpenSans;
    -   font-weight: 600;
    - }
    - 
      .glamor-4,
      [data-glamor-4] {
        font-size: 13px;
        line-height: 17px;
        color: rgba(0, 0, 0, 0.75);
    @@ -58,10 +47,21 @@
        -webkit-flex-direction: row;
        -webkit-box-lines: multiple;
        -webkit-flex-wrap: wrap;
      }
      
    + .glamor-3,
    + [data-glamor-3] {
    +   font-size: 13px;
    +   line-height: 17px;
    +   color: rgba(0, 0, 0, 0.75);
    +   -webkit-font-smoothing: antialiased;
    +   text-rendering: optimizeLegibility;
    +   font-family: OpenSans;
    +   font-weight: 600;
    + }
    +

which causes my snapshot to fail

kentcdodds commented

Huh, that's odd. I've not had any trouble with things for several months. It's surprising to me that you'd see this. I'm guessing that there's some sort of race condition that's leading to some styles getting registered with glamor earlier/later locally than it does on CI.

If you don't mind, could you fork this project and try sorting things and see how that works in your project? Then I'll try it out on mine and see whether this is something we should try.

kentcdodds commented

I'll open the issue again if we decide to do something about it 👍

chrisnojima commented

hmm. So if i hand edit the file in my node_modules this works: (keybase#2) but trying to build it locally it fails for some reason. Anyways, thats my quick and dirty fix which does sort the output in ascending order instead of being kinda random. Not optimized but minimally invasive

kentcdodds commented

Hmmm... That looks fine. But I'm still not 100% certain I want to do it. Could you figure out how to make it build locally. I'd love it if you could publish something to npm (@your-username/temp-jest-glamor-react or something) and I can try that out on my project to see how it goes.

chrisnojima commented

ok i figured it out. I was trying to do this all inside my node_modules and installing with yarn to build the dist added some sub dependencies which freaked my project out.

so you should be able to change your package.json to use

    "jest-glamor-react": "git://github.com/keybase/jest-glamor-react#sort-styles-off-of-312",

and it should work

kentcdodds commented

Ok, cool. I'll give it a try when I get some time.

  • 👍1
chrisnojima commented

@kentcdodds no rush, just a one-time gentle nudge
:)

kentcdodds commented

Thanks for the nudge @chrisnojima. Sorry I haven't gotten to it yet. Now I'm on a long break. Not sure when I'll get to it. If you can have some other folks try it though and find it favorable then I'll merge it without trying it myself 👌

asvetliakov commented

@chrisnojima
I had the same problem with emotion. The problem is that if the order of your tests is somehow different (async, running single it() rather than whole test suite while working), then the order of styles will be different too.

I fixed it by using this:

const { sheet, flush } = require("emotion");

afterEach(() => {
    flush();
});

in jest's setupTestFrameworkScriptFile
may be it'll help

kentcdodds commented

Ah yes, I have to do that with glamor as well 👍

chrisnojima commented

Cool, finally got around to implementing this on our side and I think it does stabilize it. thanks!

  • 👍1