styles don't recompile in dev mode in Next.js

[mblandr]

Describe the bug

updating className in source code don't recompile stylify css file in next.js in dev mode. I must restart dev server for it.

Reproduction

here is a sample repo: https://github.com/mblandr/sample try this: npm run dev change some of classNames - no recompiling, file stylify.css don't update. Only restart dev server will force to recompile

Logs

No response

System Info

windows 11
VS code
node 21.7.3

[Machy8]

Hi @mblandr .

Please, try to configure the Stylify according to this guide https://stylifycss.com/en/docs/integrations/remix. Just use paths for nextjs.

I have dropped the bundlers plugins (not updatd docs yet, sorry), because the integrations of bundlers like vite and webpack in frameworks is often a mess https://github.com/stylify/packages/pull/276

Do the following

1. Install @stylify/bundle
2. Install concurrently
3. Create stylify config
4. Update package.json command for dev and build
5. Remove @stylify/unplugin

It should work. One thing. If you use mangling, the mangling now mangles selectors directly in the source code. So make shure it mangles them only in build pipeline somewhre on github or in gitlab.

Please, let me know if it works. If not, I will send the configuration into your repository.

[mblandr]

Thanks. seems to work

[mblandr]

But another problem - it doesn't transform css classes when build. here is the repo https://github.com/mblandr/first

[Machy8]

@mblandr Update the config like in the example bellow.

But remember. Selectors are mangled directly in the source code. Use this only in your pipelines in gitlab/github/any other or after stashing your changes at local, so you can revert it back after testing or deploying.

const bundler = new Bundler({
    // ...
    compiler: {
        mangleSelectors: !isDev // Mangle if not in watch mode
    }
});

Try it and let me know if it works.