Trouble using dynamic/generated scss class names in styleName (Could not resolve the styleName)

[jesperjohansson]

I use the plugin postcss-scss together with sass-loader in Webpack 4. It works if the css class names are global and i use the normal className prop instead of styleName. I import the .scss file at the top of my component.

The error I get is: Could not resolve the styleName 'tablet-6'.

SCSS code (Column.scss):

@import '../../../utils.scss';

.column {
  width: 100%;
}

@each $breakpoint, $value in $breakpoints {
  @for $i from 1 through $gridColumns {
    .#{$breakpoint}-#{$i} {
      width: #{$i * $gridColumnsWidth + %};
    }
  }
}

JS code (Column.js)

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import './Column.scss'

const Column = props => (
  <div
    styleName={classNames(
      'column',
      Object.keys({
        mobile: props.mobile,
        tablet: props.tablet,
        desktop: props.desktop,
      }).map(key => props[key] && `${key}-${Number(props[key])}`),
    )}
  >
    {props.children}
  </div>
)

Column.propTypes = {
  children: PropTypes.node.isRequired,
  mobile: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  tablet: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  desktop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}

Column.defaultProps = {
  mobile: undefined,
  tablet: undefined,
  desktop: undefined,
}

export default Column

[jiyonghong]

Im having the same problem on Webpack 3. This is how my .babelrc looks like.

.babelrc

{
  ...
  "plugins": [
    ...
    ["react-css-modules", {
      "filetypes": {
        ".scss": {
          "syntax": "postcss-scss",
          "plugins": [
            "postcss-at-rules-variables",
            "postcss-each",            
            "postcss-nested"
          ]
        }
      },
      "removeImport": true,
      "webpackHotModuleReloading": true,
      "generateScopedName": "[local]__[hash]"
    }]
  ]
}

My project has SSR, which might be the problem.

Weird thing is when I console.log the scss file, it shows that I apparently have a class that I want to use but when I use styleName in a component, I get the same error.

[pixelkritzel]

We have the same problem in a Next.js project

Any ideas how to fix this?

[vxow]

I get the same error

[t47io]

I have the same issue. Although I don't fully understand why, but this (https://github.com/postcss/postcss-nested#preserveempty) worked for me.

            "plugins": [
              [
                "postcss-nested", {
                  "preserveEmpty": true
                }
              ]
            ]

And the previous "lost" nested selector was NOT empty at all.

[hinok]

I think that it's related to https://github.com/postcss/postcss-scss/issues/90 so I suspect that postcss-scss cannot handle things like .#{$breakpoint}-#{$i} {.

[ai]

@hinok postcss-scss handles interpolation in selector. That issue is about much more complex cases (string in interpolation in string). Also, that issue should throw a syntax error. Here is a logical error, not parsing error.

[jzilg]

i have the same issue with a sass generated grid system and webpack 4

Error: "Could not resolve the styleName 'aco-grid-col-12'."

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            plugins: [
                                ['react-css-modules', {
                                    generateScopedName: '[name]-[local]',
                                    filetypes: {
                                        '.scss': {
                                            syntax: 'postcss-scss',
                                        },
                                    },
                                }],
                            ],
                        },
                    },
                    'eslint-loader',
                ],
            },

$total-columns: 12;

@for $i from 1 through $total-columns {
  $width: ($i * 100% / $total-columns);

  .aco-grid-col-#{$i} {
    flex-basis: $width;
    max-width: $width;
    @extend .aco-grid-col;
  }
}

[lsner]

i have the same error and be blocked

[SzHeJason]

+1 ,scss Interpolation is not working,but className is work

$a: '.container__inner4';

.container {
  color: red;

  & > .test {
    color: white;

    @include ellipsis();
  }

  &__inner {
    font-size: 30px;
  }
}

#{$a} {
  color: red;
}

import Style from './index.module.scss'

console.log(Style)

class AX2 extends React.Component {
  render () {
    const { message } = this.props

    return (
      <div styleName="container">
        {message}
        <span styleName="test container__inner" className={Style.container__inner4}>aaa</span>
      </div>
    )
  }
}

[jenshedqvist]

I ran into this issue when using the classnames module, and I solved it by storing the value in a variable and using it in styleName property.

This worked:

const classes = classnames('edit-location', {
      'edit-location--editing': isEditing,
 });

...

<div styleName={classes}>...</div>

This didn't:

<div styleName={classnames('edit-location', {
      'edit-location--editing': isEditing,
 })}>...</div>

It's a manageable workaround until the transpiler gets fixed.

[hinok]

@jenshedqvist This issue is about a bit different problem.

In your case, use this code

<div styleName={classnames('edit-location', {
      'edit-location--editing': isEditing,
 })}>...</div>

and before starting dev server remove the .cache folder

rm -rf ./node_modules/.cache
npm start # or however you start dev server

It should work.

[jenshedqvist]

It did @hinok

[xyy94813]

I ran into this issue when using the classnames module, and I solved it by storing the value in a variable and using it in styleName property.

This worked:

const classes = classnames('edit-location', {
      'edit-location--editing': isEditing,
 });

...

<div styleName={classes}>...</div>

This didn't:

<div styleName={classnames('edit-location', {
      'edit-location--editing': isEditing,
 })}>...</div>

It's a manageable workaround until the transpiler gets fixed.

I am using Gatsby v3 with babel-plugin-react-css-modules. My problem is that it not work after build, but works fine in dev.

I tried same way as you, however it still does not work.