CSS in app directory does not Hot Reload unless exporting a const string

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.2.0: Tue Nov  8 21:14:46 PST 2022; root:xnu-8792.60.55.131.1~1/RELEASE_X86_64
    Binaries:
      Node: 16.18.1
      npm: 8.19.2
      Yarn: 3.2.1
      pnpm: N/A
    Relevant packages:
      next: 13.0.6-canary.1
      eslint-config-next: 13.0.5
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Many people are mentioning that css is not loading dynamically in app directory.

The fix for this (regardless of if we are in a page, layout, or a component unrelated) is to export any variable value.

I am using styled-components, but I confirmed this occurs for most styling

// app/ProfileLayout.tsx (or literally any file that will dynamically change styling / css)
'use client';

import React from 'react';

import styled, { css } from 'styled-components';

// without this, any changes to app require a full reload on every change
// the name can be anything and the value can be any string (i havent tested other values).
// but if you do not export a const on top of your Component then it will never reload the styling
// on HMR update!
// NOTICE: this is NOT a page or layout but the problem happens on ALL app directory components
export const d = 'FIX THIS PLEASE NEXT.JS';

export const Wrapper = styled.div`
  display: flex;
  > div {
    padding: 15px;
  }
`;

export function ProfileLayout({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <Wrapper>
      <div
        className={className}
        css={css`
          color: red;
        `