Can't get darkMode: 'class' to work in a styled-components + Next setup. Any tips to debug this?

[tannerlinsley]

I've tried going into the source to do some sanity console.log's but can't even get those to show up 🤷‍♂️ This could be my lack of how macro's work, but any tips that could even potentially help me fix my own bug would be great :)

[tannerlinsley]

I think I might have solved it... maybe. But so far, using a resolve for the macros plugin fixed the situation. Not sure why though.

[tannerlinsley]

module.exports = {
  presets: ['next/babel'],
  plugins: [
    require.resolve('babel-plugin-macros'),
    ['styled-components', { ssr: true }],
  ],
}

[ben-rogerson]

I've successfully tested this in a new next+sc project with the following code:

import 'twin.macro'

const DarkComponent = () => (
  <div className="dark">
    <div tw="dark:(bg-black text-white)">Black bg</div>
  </div>
)

export default DarkComponent

What I think is happening in your case Tanner, is you're either hitting the babel cache issue and/or the built-in caching within next dev server.
It's been discussed here recently but the fix has been to remove the .next cache folder and restart your dev server.

[tannerlinsley]

Interesting. I was clearing the Babel register cache with some success, but that makes more sense. Thanks for your help!