4

I am developing a widget, which can be embedded on "any" website and using the css-loader to give my CSS-class unique names to avoid conflicts.

In my webpack.config.js I have the following line:

localIdentName: 'productname-[folder]-[local]',

This outputs classnames like:

  • productname-src-widgetbox
  • productname-Sidebar-sidebar

Is it possible to remove all "-src" from the classnames and lowercase everything?

I found a solution, where I just copied the whole original getLocalIdent() and prepended a replace() and toLowerCase() methods. But this is not a nice solution, I think:

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {

  if (!options.context) {
    options.context = loaderContext.rootContext;
  }

  const request = path
    .relative(options.context, loaderContext.resourcePath)
    .replace(/\\/g, '/');

  options.content = `${options.hashPrefix + request}+${localName}`;

  localIdentName = localIdentName.replace(/\[local\]/gi, localName);

  const hash = loaderUtils.interpolateName(
    loaderContext,
    localIdentName,
    options
  );

  return hash
    .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
    .replace(/^((-?[0-9])|--)/, '_$1')
    .replace("-src", "").toLowerCase();
};
rakete
  • 2,953
  • 11
  • 54
  • 108

1 Answers1

2

According to the docs for css-loader, you should be able to use the getLocalIdent to create your own custom class name.

Something like this might do what you're looking for

getLocalIdent: (context, localIdentName, localName, options) => {
  return localIdentName.replace("-src", "").toLowerCase();
},

If you'd like some inspiration, check out the default implementation of getLocalIdent.

Adam
  • 4,445
  • 1
  • 31
  • 49
  • 2
    Hi! Thanks! But I tried this already... Unfortunatley all my classes are called productname-[folder]-[local] now. – rakete Feb 13 '19 at 21:46
  • They can be used in conjunction with each other. For example, you could specify both `localIdentName` and `getLocalIdent`, where `localIdentName` is what you have above, and then use a `getLocalIdent` function to modify that name. If that doesn't work, try logging out `options` from getLocalIdent to see what options you have, to try to generate your preferred string. – Adam Feb 13 '19 at 21:50