[NEXT-656] SCSS rules disappear in 13.2.1

[pudo]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
Binaries:
  Node: 19.6.0
  npm: 9.4.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.2.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/opensanctions/site/tree/main/styles

To Reproduce

Try to apply a module-based SCSS rule to an element using className={styles.foo}.

Describe the Bug

When upgrading from Next 13.1.1 to 13.2.1 it seems that module-based SCSS rules stopped being generated in some way - the style of the elements reverts to the default styles specified in my global CSS file.

Expected Behavior

Being able to use className={styles.foo} to apply SCSS classes to an element.

Which browser are you using? (if relevant)

Chrome evergreen

How are you deploying your application? (if relevant)

Vercel

_NEXT-656

[DanProudfoot]

I'm having an issue that might be related. Imports from module.s css files are fine, but importing a global sass file from a shared component library means that the styles aren't being loaded. It works fine in 13.1

[imaksp]

Just adding for info: it works for pages dir, so seems like beta app dir specific issue.

[DanProudfoot]

Oh - I should be clear, for me it's not working with the pages dir

[pudo]

I've dug into this a bit more and found that it may be an ordering issue: the class generated by CSS modules has its instructions overridden by the UI framework that I use and am trying to customise. So this may come down to the ordering of the CSS being different when output. I'm just unsure how I can best address this, perhaps I'll need to find a new pattern for overwriting those rules....

[shuding]

We do have .module.scss tests covered, the ordering issue will be fixed with #48244 I believe.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.