Support for getLocalIdent

[mvrlin]

Hello! I really enjoy using your preprocess, but I need a way to generate custom class names, that are not based on the default localIdentName. Webpack css-loader has a getLocalIdent function option for that.

[micantoine]

Hi @mvrlin , if the default localIdentName option is the issue you can easily change it with any other available token or custom strings of your choice.

if you want to generate the classname with your own rules without going through the default interpolateName() function, what kind of information would you need ?

I checked what css-loader is doing with getLocalIndent providing the following data:

• The loaderContext object
• The localIdentName rule string
• The localName (the css className)
• and some extra info in options

I could provide the same type of info with additional data if necessary

function getlocalIndent(
  context: {
    context,
    resourcePath,
  },
  // instead of the rule string  only
  localIndentName: {
    rule, // the rule string
    generated, // the generated classname which you could hook into 
 },
  localName, // the css className string
  options: {
    markup, // the markup content
    styles, // the styles content
  }, 
) {}

something like this would be then possible

...
use: [
  {
    loader: 'svelte-loader',
    options: {
      preprocess: [
        cssModules({
          localIndentName: '[hash:base64:10]',
          getLocalIndent: (context, localIndentName, localName, options) => {
            return localIndentName.generated.toLowerCase();
          }
        }),
      ]
    }
  }
]
...

what do you think?

[mvrlin]

@micantoine I want to generate very short class names like .a-a, .a-b, etc. It would be awesome, if you will provide the option you described above. Also, it'll be very nice, if you can add support for Rollup & WebPack 😊.

[micantoine]

@mvrlin Check the linked pull request, I have renamed some parameters that I think would make more sense.
If it's all good, let's merge it and publish a new version

[mvrlin]

@micantoine Looking good! What do you think about TypeScript typings?

[micantoine]

@mvrlin I do like Typescript, could be nice to develop the preprocess with it. At the time of making it, it was just a small js file I used on my personal projects which I thought could benefit others encountering the same issue with the native scoped system.