getLocalIdent to dasherize file name

[dagda1]

My css loader looks like this:

      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              query: {
                modules: true,
                sourceMap: true,
                importLoaders: 2,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            },
            'sass-loader',
            {
              loader: require.resolve('postcss-loader'),
              options: postcssOptions
            }
          ]
        })
      },

So if I have a file named TextArea.scss then my class name is, for example TextArea__default___1qzfC.

I would like to use getLocalIdent to dasherize TextArea.scss int text-area__default___1qzfC but I am unfamiliar with the syntax.

Could someone point out, how I do this and I cannot find a single example anywhere online apart from the readme which returns a string literal?

[michael-ciniawsky]

It is possible to override getLocalIdent

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]',
    getLocalIdent: (context, localIdentName, localName, options) => {  // <=
      return 'whatever_random_class_name' // <=
    }
  }
}

[dagda1]

@michael-ciniawsky yes, I know that , I can see that in the README and I said that in my question.

The example just returns a string literal, what I am asking is it possible to dasherize the file name from the arguments to this function?

returning a string literal is not very useful. Is there anywhere I can find out about this.

[michael-ciniawsky]

https://github.com/webpack-contrib/css-loader/blob/master/lib/getLocalIdent.js#L13

(context, localIdentName, localName, options) => {
   localIdentName = dasherize(localIdentName) // Your 'dasherize' implementation here
   return localIdentName
}

Not 💯 if it is localIdentName or localName, context, you need to try it out

[manuelro]

localIdentName

https://github.com/webpack-contrib/css-loader/blob/master/lib/getLocalIdent.js#L13

(context, localIdentName, localName, options) => {
   localIdentName = dasherize(localIdentName) // Your 'dasherize' implementation here
   return localIdentName
}

Not 💯 if it is localIdentName or localName, context, you need to try it out

localIdentName contains the required info to work with the desired dasher function.

[lemcii]

Try something like this:

cssLoaderOptions.getLocalIdent = (context, _, localName) => {
 const file = path.format(context.resourcePath);

  // converts to param case
  const identity = file.name
    .split(/(?=[A-Z])/g)
    .map((value) => value.charAt(0).toLowerCase() + value.substring(1))
    .join("-");

  return identity + "-" + localName;
};

Edit My example was Windows specific, used path instead.