module.css not loading styles

Verify canary release

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

Provide environment information

      Platform: linux
      Arch: x64
      Version: #202204271406~1651504840~22.04~63e51bd SMP PREEMPT Mon May 2 15:
    Binaries:
      Node: 12.22.9
      npm: 8.4.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.1.5
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

I’m trying apply module.css to one of my components according to this guide https://nextjs.org/learn/basics/assets-metadata-css/layout-component.

/*/components/Livestream/App.js*/

import styles from './App.module.css';
...
return (
<div className={styles.container}>
 <main>
    <div className='live-stream'>
...
export default App;

/*/components/Livestream/App.module.css*/

.container main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.container main .live-stream {
  background-color: #000615;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

However only the main tag gets the css styling and not the class live-stream:

Image1 Image2

The only place on the whole project that a css references .live-stream is on App.module.css, I also tried chaging the main element to a div with class ‘main’ and the changes were not picked up anymore. Its like main tag works but not class names.

My next.config:

const path = require('path')
const withPWA = require('next-pwa')
const runtimeCaching = require("next-pwa/cache");
const removeImports = require('next-remove-imports')();

module.exports = removeImports(withPWA({
    swcMinify: true,
    webpack5: true,
    images: {
        domains: ['res.me.com'],
    },
    pwa: {
        disable: process.env.NODE_ENV === 'development',
        dest: 'public',
        register: true,
        sw: '/sw.js',
        buildExcludes: [/server\/pages\/_middleware\.js$/],
        runtimeCaching: runtimeCaching
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },

Expected Behavior

I would expect to see the App.module.css properties to be applied to the class ‘live-stream’ on App.js.

To Reproduce

Go through this guide https://nextjs.org/learn/basics/assets-metadata-css/layout-component

[sergiupris]

This is more related to css-modules

You cannot nest classes with css modules like you have it. You would have to also ensure .live-stream is a css module so that when compiled it is able to understand and generate the correct class names.

As a solution you have to use:

<div className={styles.container}>
  <main>
    <div className='live-stream'>

.container main :global(.live-stream) {
 // styles
}

or

<div className={styles.container}>
  <main>
    <div className={styles.liveStream}>

.container main .liveStream {
 // styles
}

[GabenGar]

Just use clsx and forget about conditional string interpolation for classnames in your code.