tivac / modular-css

CSS Modules, but better and usable via Rollup, Vite, Webpack, CLI, PostCSS, or JS API
http://m-css.com
MIT License
288 stars 19 forks source link

shortnames: Add possibility to set classname characters #778

Open vladshcherbin opened 4 years ago

vladshcherbin commented 4 years ago

👋 Hey, it would be great if it was possible to set characters, used in shortnames generated classes. For example, I'd prefer them to be only lowercase.

Feature Use Case

namer: shortnames({ letters: [a...z, 0...9] })

// or

namer: shortnames({ case: 'lower' })

Feature Proposal

Add option to set letters used in classes or letter case.

From source code, alphabet package is used inside which already has methods to return only lowercase/uppercase letters.

Btw shortnames is located under packages/namer, wondering why 🤔

tivac commented 4 years ago

Btw shortnames is located under packages/namer, wondering why

That's left over from before this was a monorepo, hasn't been important to rename it but wanted to give the package a more-descriptive name on NPM.

I think this would be really easy to add, based on looking at namer.js:

https://github.com/tivac/modular-css/blob/8a9214eed4141753814a719a533e3096becf2b9b/packages/namer/namer.js#L19

Would need to take an option like shortnames({ identifiers : [ ... ] }), and the default value should be the already-existing everything value from up above.

https://github.com/tivac/modular-css/blob/8a9214eed4141753814a719a533e3096becf2b9b/packages/namer/namer.js#L4

Then it's a matter of using the identifiers param instead of everything whenever value(...) is called.

https://github.com/tivac/modular-css/blob/8a9214eed4141753814a719a533e3096becf2b9b/packages/namer/namer.js#L42

darthmaim commented 4 years ago

I have a package that generates short strings in a given alphabet: darthmaim/short-string.

I even wrote a package specifically for modular-css: darthmaim/modular-css-short-namer, but this will always use the default alphabet.