styleNames property not resolving to className with razzle

[gfcf14]

I'm trying to implement this to my current razzle project, but it appears the styleName property disappears upon compiling. My .babelrc looks like this:

{
  "plugins": [
    ["react-css-modules", {
      "attributeNames": {
        "styleName": "className"
      },
      "filetypes": {
        ".scss": {
          "syntax": "postcss-scss",
        }
      },
      "generateScopedName" : "[local]___[hash:base64:5]"
    }]
  ]
}

And, although razzle keeps a file, razzle.config.js, where it provides webpack configuration, I outputted and it looks like this:

{ mode: 'development',
  context: '/home/gfcf14/Desktop/greendream-redesign',
  target: 'web',
  devtool: 'cheap-module-source-map',
  resolve: 
   { modules: 
      [ 'node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules' ],
     extensions: [ '.mjs', '.jsx', '.js', '.json' ],
     alias: 
      { 'webpack/hot/poll': '/home/gfcf14/Desktop/greendream-redesign/node_modules/webpack/hot/poll.js',
        'react-native': 'react-native-web' } },
  resolveLoader: 
   { modules: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules/razzle/node_modules' ] },
  module: 
   { strictExportPresence: true,
     rules: 
      [ { test: /\.(js|jsx|mjs)$/,
  enforce: 'pre',
  use: 
   [ { options: 
     { formatter: [Function: formatter],
       eslintPath: '/home/gfcf14/Desktop/greendream-redesign/node_modules/eslint/lib/api.js',
       ignore: false,
       useEslintrc: false,
       baseConfig: [Object] },
    loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/eslint-loader/index.js' } ],
  include: '/home/gfcf14/Desktop/greendream-redesign/src' },
        { test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto' },
        { test: /\.(js|jsx|mjs)$/,
  include: [ '/home/gfcf14/Desktop/greendream-redesign/src' ],
  use: 
   [ { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/razzle/node_modules/babel-loader/lib/index.js',
    options: { babelrc: true, cacheDirectory: true, presets: [Array] } } ] },
        { exclude: 
   [ /\.html$/,
     /\.(js|jsx|mjs)$/,
     /\.(ts|tsx)$/,
     /\.(vue)$/,
     /\.(less)$/,
     /\.(re)$/,
     /\.(s?css|sass)$/,
     /\.json$/,
     /\.bmp$/,
     /\.gif$/,
     /\.jpe?g$/,
     /\.png$/ ],
  loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/file-loader/dist/cjs.js',
  options: { name: 'static/media/[name].[hash:8].[ext]', emitFile: true } },
        { test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
  loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/url-loader/dist/cjs.js',
  options: 
   { limit: 10000,
     name: 'static/media/[name].[hash:8].[ext]',
     emitFile: true } },
        { test: /\.css$/,
  exclude: 
   [ '/home/gfcf14/Desktop/greendream-redesign/build',
     /\.module\.css$/ ],
  use: 
   [ '/home/gfcf14/Desktop/greendream-redesign/node_modules/style-loader/index.js',
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/css-loader/index.js',
    options: { importLoaders: 1 } },
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins] } } ] },
        { test: /\.module\.css$/,
  exclude: [ '/home/gfcf14/Desktop/greendream-redesign/build' ],
  use: 
   [ '/home/gfcf14/Desktop/greendream-redesign/node_modules/style-loader/index.js',
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/css-loader/index.js',
    options: 
     { modules: true,
       importLoaders: 1,
       localIdentName: '[path]__[name]___[local]' } },
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins] } } ] },
        { test: /\.(sa|sc)ss$/,
  use: 
   [ { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/style-loader/index.js',
    options: {} },
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/css-loader/index.js',
    options: { sourceMap: true, importLoaders: 1, modules: false } },
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/resolve-url-loader/index.js',
    options: {} },
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/postcss-loader/src/index.js',
    options: { sourceMap: false, plugins: [Function: plugins] } },
  { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/sass-loader/lib/loader.js',
    options: { sourceMap: true, includePaths: [Array] } } ] } ] },
  plugins: 
   [ AssetsWebpackPlugin { options: [Object], writer: [Function: queuedWriter] },
     HotModuleReplacementPlugin {
       options: [Object],
       multiStep: true,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     DefinePlugin { definitions: [Object] },
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       _render: [Object],
       logUpdate: [Object] } ],
  entry: 
   { client: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules/razzle-dev-utils/webpackHotDevClient.js',
        '/home/gfcf14/Desktop/greendream-redesign/src/client' ] },
  output: 
   { path: '/home/gfcf14/Desktop/greendream-redesign/build/public',
     publicPath: 'http://localhost:3001/',
     pathinfo: true,
     libraryTarget: 'var',
     filename: 'static/js/bundle.js',
     chunkFilename: 'static/js/[name].chunk.js',
     devtoolModuleFilenameTemplate: [Function: devtoolModuleFilenameTemplate] },
  devServer: 
   { disableHostCheck: true,
     clientLogLevel: 'none',
     compress: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
     historyApiFallback: { disableDotRule: true },
     host: 'localhost',
     hot: true,
     noInfo: true,
     overlay: false,
     port: 3001,
     quiet: true,
     watchOptions: { ignored: /node_modules/ },
     before: [Function: before] },
  optimization: {} }
{ mode: 'development',
  context: '/home/gfcf14/Desktop/greendream-redesign',
  target: 'node',
  devtool: 'cheap-module-source-map',
  resolve: 
   { modules: 
      [ 'node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules' ],
     extensions: [ '.mjs', '.jsx', '.js', '.json' ],
     alias: 
      { 'webpack/hot/poll': '/home/gfcf14/Desktop/greendream-redesign/node_modules/webpack/hot/poll.js',
        'react-native': 'react-native-web' } },
  resolveLoader: 
   { modules: 
      [ '/home/gfcf14/Desktop/greendream-redesign/node_modules',
        '/home/gfcf14/Desktop/greendream-redesign/node_modules/razzle/node_modules' ] },
  module: 
   { strictExportPresence: true,
     rules: 
      [ { test: /\.(js|jsx|mjs)$/,
  enforce: 'pre',
  use: 
   [ { options: 
     { formatter: [Function: formatter],
       eslintPath: '/home/gfcf14/Desktop/greendream-redesign/node_modules/eslint/lib/api.js',
       ignore: false,
       useEslintrc: false,
       baseConfig: [Object] },
    loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/eslint-loader/index.js' } ],
  include: '/home/gfcf14/Desktop/greendream-redesign/src' },
        { test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto' },
        { test: /\.(js|jsx|mjs)$/,
  include: [ '/home/gfcf14/Desktop/greendream-redesign/src' ],
  use: 
   [ { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/razzle/node_modules/babel-loader/lib/index.js',
    options: { babelrc: true, cacheDirectory: true, presets: [Array] } } ] },
        { exclude: 
   [ /\.html$/,
     /\.(js|jsx|mjs)$/,
     /\.(ts|tsx)$/,
     /\.(vue)$/,
     /\.(less)$/,
     /\.(re)$/,
     /\.(s?css|sass)$/,
     /\.json$/,
     /\.bmp$/,
     /\.gif$/,
     /\.jpe?g$/,
     /\.png$/ ],
  loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/file-loader/dist/cjs.js',
  options: { name: 'static/media/[name].[hash:8].[ext]', emitFile: true } },
        { test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
  loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/url-loader/dist/cjs.js',
  options: 
   { limit: 10000,
     name: 'static/media/[name].[hash:8].[ext]',
     emitFile: true } },
        { test: /\.css$/,
  exclude: 
   [ '/home/gfcf14/Desktop/greendream-redesign/build',
     /\.module\.css$/ ],
  use: 
   [ { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/css-loader/index.js',
    options: { importLoaders: 1 } } ] },
        { test: /\.module\.css$/,
  exclude: [ '/home/gfcf14/Desktop/greendream-redesign/build' ],
  use: 
   [ { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/css-loader/locals.js',
    options: 
     { modules: true,
       importLoaders: 1,
       localIdentName: '[path]__[name]___[local]' } } ] },
        { test: /\.(sa|sc)ss$/,
  use: 
   [ { loader: '/home/gfcf14/Desktop/greendream-redesign/node_modules/css-loader/locals.js',
    options: { sourceMap: true, importLoaders: 1, modules: false } } ] } ] },
  node: { __console: false, __dirname: false, __filename: false },
  externals: [ [Function] ],
  output: 
   { path: '/home/gfcf14/Desktop/greendream-redesign/build',
     publicPath: 'http://localhost:3001/',
     filename: 'server.js',
     libraryTarget: 'commonjs2' },
  plugins: 
   [ DefinePlugin { definitions: [Object] },
     LimitChunkCountPlugin { options: [Object] },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     StartServerPlugin {
       options: [Object],
       afterEmit: [Function: bound afterEmit],
       apply: [Function: bound apply],
       startServer: [Function: bound startServer],
       worker: null },
     WatchIgnorePlugin { paths: [Array] },
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       _render: [Object],
       logUpdate: [Object] } ],
  entry: 
   [ 'razzle-dev-utils/prettyNodeErrors',
     'webpack/hot/poll?300',
     '/home/gfcf14/Desktop/greendream-redesign/src' ],
  watch: true }

Is there an option I should try to overwrite? I'm sorry that I would have to ask here, but I haven't been receiving response from the razzle people for another issue and am not sure if they would be prompt to reply something like this. Please let me know if there is a configuration I'm doing wrong

[hinok]

@gfcf14 Create a demo repository that shows this problem. At the moment it's hard to guess what's wrong.

I see one problem, you define in .babelrc

"generateScopedName" : "[local]___[hash:base64:5]"

but your webpack config has

localIdentName: '[path]__[name]___[local]'

They should be the same.

From the README.md

Refer to Generating scoped names. If you use this option, make sure it matches the value of localIdentName in webpack config. See this issue

[gfcf14]

@hinok I changed the value for generateScopedName to match the one in webpack and now I'm getting this error: Error: Could not resolve the styleName 'not-found-rct-component__text-section'. The only class I have right now, not-found.jsx, has a starting structure like this:

<Flex as="section" styleName="not-found-rct-component">
      <section styleName="not-found-rct-component__text-section">
        <section>

Given that I am using styleName before the text-section, I would assume the one for the Flex is correct, so it would be working. My SCSS file has a structure like this:

.not-found-rct-component {
  .
  .
  .
  &__text-section {
    .
    .
    .
    .center-text {
      .
      .
      .
    }
  }
}

Is it that I am missing something for how I'm supposed to structure nested classes in SCSS? Please let me know. I'll try to get you the demo repository asap. Thanks!

[hinok]

You need postcss-nested in your .babelrc so it should look like

{
  "plugins": [
    [
      "react-css-modules",
      {
        "attributeNames": {
          "styleName": "className"
        },
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss",
            "plugins": [
              [
                "postcss-nested",
                {
                  "bubble": ["@include"],
                  "preserveEmpty": true
                }
              ]
            ]
          }
        },
        "generateScopedName": "[local]___[hash:base64:5]"
      }
    ]
  ]
}