search

tw-in-js / use-twind-with

Twind integration packages for frameworks & libraries with examples
MIT License
68 stars 17 forks source link

[UNKNOWN_THEME_VALUE] and [UNKNOWN_DIRECTIVE] on Nextjs 12 in extended theme values #24

Closed rodrigojmr closed 2 years ago

rodrigojmr commented 2 years ago

Hello,

I'm aware the package was updated to support Nextjs 12, but when I upgrade Next, I get these errors.

image I have a theme extended in twind.config.ts (some part of the code deleted for legibility) and then used on theme.extend.

image

The only difference between this happening or not is being on Next 11.1.2 or 120.3. It causes styles to get messed up, adding styles to the wrong places, and some not being used at all. Interestingly, it seems similar to this issue but I'm unsure. https://github.com/tw-in-js/twind/issues/47

If I navigate away from a page then return, then the styles are correct.

https://user-images.githubusercontent.com/11283573/141371963-07103b16-e269-4a36-b1a2-5dd12709d648.mp4

o-az commented 2 years ago

Same thing here, CleanShot 2021-12-16 at 02 18 38

import withTwindDocuemnt from '@twind/next/shim/document'
import Document, { Head, Html, Main, NextScript } from 'next/document'
import { setup } from 'twind'
import twindConfig from 'twind.config'

setup({
  theme: twindConfig.theme,
  darkMode: twindConfig.darkMode,
  mode: 'silent',
  preflight: true,
})

class RootDocument extends Document {
  static async getInitialProps(ctx: any) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }
  render() {
    return (
      <Html className="dark">
        <Head />
        <Main />
        <NextScript />
      </Html>
    )
  }
}
export default withTwindDocuemnt(twindConfig, RootDocument)
sastan commented 2 years ago

Hey. Sorry for the late reply.

@rodrigojmr I need to take a closer at that. is it possible for you to create a codesandbox for reproduction?

@Omar-Aziz Seams similar. But the color/opacity stuff will not work with twind v0.16. I hope to release a v0.17 with support for these and most changes from tailwind v3.

o-az commented 2 years ago

thanks for the clarification @sastan. Does JIT work in twind and if yes then does it need any config?

sastan commented 2 years ago

thanks for the clarification @sastan. Does JIT work in twind and if yes then does it need any config?

twind only generates the styles for the classes that are used. We didn't call it JIT. As a side note I do not think of tailwind JIT as a just-in-time generator. It generates all classes it finds in the code base during a build step. twind generates only those classes that are used.

rodrigojmr commented 2 years ago

Just want to inform I'm still trying to replicate in a smaller version of the client's site. I started with copying and removing code to make a slimmer, shareable version of the site, then Omar's error tipped me off to an error in my config as well.

After fixing that, it seemed to work fine on both the client site and the slimmed down version in local dev and build + start, but the site still broke when deploying on DigitalOcean. Still trying to see if I can deploy to Vercel, and if the same happens. Now it's hard to trace back the cause, and why it only happens in prod.

rodrigojmr commented 2 years ago

Well this is embarrassing!

It all comes down to calling tw outside className and outside components, and not apply, in attempt to reuse classes. Due to #12 and other similar logs to this, I had turned twind mode to silent, but only with NextJS 12 do these logs seem to happen regardless of the mode, and also cause the app to malfunction. Had no such problems in 11, so I was blissfully, ignorantly unaware of the misuse of tw.

All else I can wish for is for would be better errors messages or warnings, it's be fantastic. I understand if it's not possible.

sastan commented 2 years ago

Ah I see. Closing this for now. Feel free to re-open if you have any more trouble.