Update docs for conditional CSS import

[kevinschaich]

I tried it like this first but it was complaining that an import has to be a top-level declaration:

if (process.env.NODE_ENV === 'development') {
    import('jotai-devtools/styles.css')
}

I also tried it with next/dynamic but no luck there.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[npearson72]

@arjunvegda this is helpful, thanks for the tip. I'm using the vite version you posted.

However, for some reason when I do this the build file turns out to be MUCH larger. It appears as if it's pulling in CSS from other libraries (i.e. Mantine) in my node_modules. Having trouble understand what's actually happening other than my vendor file is twice as large now.

Any ideas?

[kevinschaich]

@arjunvegda is there a reason the devtools themselves can't import styles.css? I think it would simplify imports for all frameworks

[kevinschaich]

if that's not an option this is probably the preferred import method for Next

providers.tsx

'use client'

import { Provider as JotaiProvider, createStore } from 'jotai'
import dynamic from 'next/dynamic'
import { ReactNode } from 'react'
const JotaiDevtools = dynamic(() => import('@/components/providers/jotai-devtools'), {ssr: false})

const store = createStore()

export const Providers = ({children}: {children: ReactNode}) => {
    return (
        <JotaiProvider store={store}>
            {process.env.NODE_ENV === 'development' && <JotaiDevtools store={store} />}
            {children}
        </JotaiProvider>
    )
}

jotai-devtools.tsx

import { createStore } from 'jotai'
import { DevTools } from 'jotai-devtools'
import 'jotai-devtools/styles.css'

export default function JotaiDevtools({ store }: { store: ReturnType<typeof createStore> }) {
    return (
        <DevTools
            store={store}
            theme='dark'
            position='bottom-right'
            options={{ shouldExpandJsonTreeViewInitially: true }}
        />
    )
}

[arjunvegda]

@arjunvegda is there a reason the devtools themselves can't import styles.css? I think it would simplify imports for all frameworks

I tried that only to find that most bundlers don't support that and they error out. 😟 If our current approach becomes too difficult for users, we could look into converting these styles from css files to inline styles 🤔 .