search

vinpac / windstitch

Windstitch is a 1.4kB, Simple Styling Library that helps you set when a className should be applied to a component.
https://windstitch.vercel.app
MIT License
255 stars 6 forks source link

Nextjs13 HMR #15

Closed davve5 closed 1 year ago

davve5 commented 1 year ago

Hey, When I change base styles or variant styles I need to refresh the page to see changes.

Nextjs: ^13.0.5 Tailwindscss: ^3.2.4

'use client'
import { w } from 'windstitch';

const Button = w.button('bg-red-500', {
  variants: {
    color: {
      red: 'text-red-500',
      blue: 'text-blue-500',
    },
    size: {
      small: 'text-sm',
      large: 'text-lg',
    },
  },
  defaultVariants: {
    size: 'small',
  },
});

export default Button
davve5 commented 1 year ago

Issue with Nextjs

flaming-codes commented 1 year ago

Do you have a reproducible repo? I'm even using Turbopack for the transpilation, but it works fine w/ server + client components.

next: 13.1.4
tailwindcss: ^3.2.4
windstitch: "0.3.0"
flaming-codes commented 1 year ago

Ok, can also reproduce it now. Looks like it's realted to a React-issue, Next-team is tracking it: https://github.com/vercel/next.js/issues/43396#issuecomment-1405218446

akomm commented 1 year ago

You can circumvent the issue by integrating as postcss plugin now. That, for me, solves the issue.

https://beta.nextjs.org/docs/styling/tailwind-css