Css-loader: Custom localIdent name as a function

[longlho]

Right now localIdentName allows me to put in a certain pattern [name]_[hash] for PostCSS I have a custom generateScopedName function that basically spit out a custom shorter name based on all my classes (kinda like module ids). Something similar to:

function generateScopedName (...args) {
    const longName = exports.generateLongName(...args)
    if (WEBPACK_CSS_NAME_MAP[longName] === undefined) {
        WEBPACK_CSS_NAME_MAP[longName] = `${PREFIX}${Object.keys(WEBPACK_CSS_NAME_MAP).length}`
    }

    return WEBPACK_CSS_NAME_MAP[longName]
}

However, with this plugin I can't pass generateScopedName as a function like PostCSS. Any suggestions?

[trotzig]

@sokra: do you have any suggestions for how one might implement this? I want to make out class names something like Component-local-bc42bc, but I can't do that because all our component files are named index.jsx. We structure our components this way:

    |-- ComponentName
           |-- index.jsx
           |-- index.scss
           |-- index-test.jsx

[BryceHayden]

Any update on this? I'm curious as it kind of ties into my problem with using cq-prolyfil with react-css-modules. I would like a way to tell css-loader that I want special behavior when certain class names are discovered.

Basically I would like this option to change (cq-prolyfill styles):

.input:container (width <= 100px) {/*...*/}

to

.<prefix>_input_<hash>:container\(width\<\=100px\) {/*....*/}

Notice that only the class name, and not the pseudo classes are getting changed, but right now the css-loader hashes the whole name:

.styles__input-wrapper___2xh6W.styles__-container-width--100px-___PPtoO {/* ... */}

Sorry if this is the wrong spot to tag this onto, but it seemed somewhat similar to the desired functionality I was looking for with css-loader. See this issue post on react-css-module if you want more details/discussion on my issue.

[Chaptykov]

+1

I would want to generate shortest unique valid classnames ([_A-Za-z][_\-A-Za-z0-9]+) to decrease bundle size.

Is there some news about this issue?

[RayProud]

+1

[andreypopp]

I believe name generation uses this: https://github.com/webpack/loader-utils#interpolatename

So you can use [folder] for the directory your component is in.

Also, please do not post +1 in comments, there's a separate GiHub reactions feature for that.

[longlho]

@andreypopp so my use case specifically is that since I control all the CSS classnames in the project, I can create custom unique-enough class name within my domain (so for example, I know I have 67 different class names, I can just make them incremental like cn1 to cn67).

[Chaptykov]

Yes, I saw loaderUtils.interpolateName. But all features of interpolateName are based on original selector's data or random value. It is useless if I want to use custom names. For example, based on selector's index number.

a, …, z, A, …, Z, aa, …, az, …

There is an example of similar method in postcss-modules.

[MrCheater]

+

[longlho]

in case someone's still interested I've exposed it in my fork