Component styles are not updated on file save when using Composing Components in Stitches

barthicus commented 2 years ago

What example does this report relate to?

with-stitches

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

v14.17.3 (I also tested on v15.13.0)

What browser are you using?

Chrome

What operating system are you using?

Windows 10

How are you deploying your application?

n/a

Describe the Bug

I found an issue with fast refresh not updating CSS styles after doing changes in external file using Stitches library if using Composing Components.

Not sure if this is an issue on the Next.js side or Stitches.

When you start developing using yarn run dev and change the styles in any remote component (eg. Text.jsx) that is an exported Stitches styled component, these changes are not visible in the browser when using Component Composing. Only tab refresh helps here.

Simplified example below.

This works - updating color in Text.jsx file is visible in the browser on save:

// File: /components/Text.jsx
import { styled } from '../stitches.config';

export const Text = styled('p', {
  color: 'red',
});

// File: /pages/index.jsx
import { Text } from '../components/Text ';

export default function Home() {
  return <Text>Lorem ipsum</Text>;
}

This doesn't work - updating color in Text.jsx file is only visible in the browser on save for the <Text>Lorem ipsum</Text> and not for the <StyledText>Lorem ipsum</StyledText>:

// File: /components/Text.jsx
import { styled } from '../stitches.config';

export const Text = styled('p', {
  color: 'red',
});

// File: /pages/index.jsx
import { Text } from '../components/Text ';

// composed component
const StyledText = styled(Text, {
  fontSize: 20,
});

export default function Home() {
  return (
    <>
      <Text>I am always updated</Text>
      <StyledText>I am only updated on tab refresh :(</StyledText>
    </>
  );
}

Expected Behavior

In dev mode changes should be displayed on every change made in the Text.jsx file no matter if we use Composing Components or not.

To Reproduce

Repository: https://github.com/barthicus/bug-with-stitches Stackblitz: https://stackblitz.com/edit/github-jgy1n7

Clone the repo or use the stackblitz link.
Start the project using yarn run dev
Change the color in the components/Text.jsx file.
The color of the text in <StyledText/> component is not updated (in pages/index.jsx). It is only updated for the <Text/> component.

bmikaili commented 2 years ago

Any updates on this?

perosa100 commented 1 year ago

my config.


 import Document, { Head, Html, Main, NextScript } from 'next/document' 
import { getCssText, reset } from '@styles/stitches.config'

const getCssAndReset = () => {
  const css = getCssText()
  reset()
  return css
}
export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang="pt-BR">
        <Head>
          <style
            id="stitches"
            dangerouslySetInnerHTML={{ __html: getCssAndReset() }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

vercel / next.js