Extra classes w/ Gatsby + Emotion + Tailwind + twin.macro + PostCss

[therealgilles]

Wondering why my config is resulting in extra css classes like 'ehdn4lz3' below, that have no css associated with them:

<header class="css-rko59e-Header ehdn4lz3">
  <div class="css-1rq0yt-HeaderDiv ehdn4lz0">
    <h1 class="css-1hdvxta-Title ehdn4lz2">
      <a aria-current="page" class="css-otmtsd-Link ehdn4lz1" href="/">
        My Site
      </a>
    </h1>
  </div>
</header>

Any insight would be helpful :)

[Andarist]

You are using our Babel plugin and styled API - it injects that extra class name into the styled-generated components so you can target them in your styles like this:

const Child = styled.div``

const Parent = styled.div`
  color: hotpink;

  ${Child} {
    background-color: rebeccapurple;
  }
`

[therealgilles]

I will have a look when I have some time. Interestingly, it looks like styled-components does classes the other way, i.e. apply the css styles to the abbreviated classes instead.

[therealgilles]

@Andarist: A few questions

1. is there a guide to make changes to the emotion packages and try the changes out? is there a contributing guide?
2. looking at emotion/packages/styled, is that the right place to start?
3. I naively tried to put in some console.error statements and cannot see anything coming out. Is there a recommended way to get values displayed somewhere?

I obviously very new to the code source but willing to explore, learn, and give it a go.

[therealgilles]

Found this, will try.

[therealgilles]

Tried to build with yarn 1.22.10 and yarn 2.4.0 and got errors in both cases. Here are the 2.4.0 errors:

➤ YN0058: │ definitelytyped-header-parser@https://github.com/Microsoft/definitelytyped-header-parser.git#commit=d957ad0bb2f4ecb60ac04f734e0b38fbc8e70b8a: Packing the package failed (exit code 1, logs can be found here: /private/var/folders/pd/_hnt8dqd19g05yjbj_mngrr40000gn/T/xfs-c53b0acf/pack.log)
➤ YN0000: └ Completed in 12s 534ms
➤ YN0000: Failed with errors in 12s 539ms

Running node v15.8.0.

[therealgilles]

The yarn 2.4.0 error log shows this:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/flatmap-stream/-/flatmap-stream-0.1.0.tgz - Not found
npm ERR! 404
npm ERR! 404  'flatmap-stream@https://registry.npmjs.org/flatmap-stream/-/flatmap-stream-0.1.0.tgz' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404