Case insensitive options?

Would it be possible to have case insensitive configuration options in the plugin configuration in tsconfig.json?

Personally, I've already found myself getting the wrong casing on two options (postcssOptions and classNameTransform) and I don't think it would too difficult to implement. This would also be a non-breaking change.

[mrmckeb]

Hi @applemonkey496, I'm not sure I understand the issue properly sorry. Can you please add a little detail/some example of what you'd like to see?

If we allowed case insensitive classnames, that wouldn't match any real world project configuration - is that what you meant?

tl;dr

If you incorrectly capitalise the name of any configuration option, it still gets parsed properly.
For example, accidentally entering postcssOptions will work the same as entering postCssOptions.

---

As for how you could implement it, before doing anything else with the configuration object, pass it to a function to parse it.
In this function, for each key in the configuration object put it into lowercase and compare with a Map of lowercase configuration options to properly cased configuration options. If it matches one of them, you adjust it appropriately.

I'm making it sound a lot more complicated than it is. It could be as simple as:

const casings = new Map([
    // Format:
    // ['lowercaseversion', 'properlyCasedVersion']
    ['postcssoptions', 'postCssOptions'],
    ['classnametransform', 'classnameTransform']
])

function parseOptions(options: {}) {
    let parsed = {}
    for (key in Object.keys(options)) {
        const k = key.toLowerCase()
        if (casings.has(k)) {
            parsed[casings.get(k)] = options[key]
        } else {
            throw new Error(`Invalid configuration option ${key}.`)
        }
    }
    return parsed
}

Because we're using Map this whole thing should complete in O(n) time. (This is just an idea though, I haven't tested this code.)

---

As for not matching real world project configurations, if you mean that no other projects use this setup, I would somewhat agree in that it is uncommon but not nonexistent. TypeScript itself had a debate over this for tsconfig options (microsoft/TypeScript#1933), although they ended up going against it. Nevertheless, tsc's CLI options behave in this case-insensitive way, so it's not like this behaviour doesn't exist anywhere.

So, although, yes, implementing this would put this project in the minority, I personally don't think there's anything wrong with that. Adding this feature doesn't hurt anyone, it just prevents them from making mistakes.

[mrmckeb]

I understand what you mean now, sorry. I thought you were talking about the classnames themselves and that's why I was confused - as allowing any case would be chaotic for projects.

I understand why this could be confusing for some user for PostCSS particularly, as I can see the arguments for postcss, as despite the casing it is one word.

I actually think the bigger issue here is that TypeScript itself doesn't "assist" users in this configuration. At the time the plugin's name is set, TypeScript could theoretically autocomplete/validate keys/values. On our side, everything is strongly typed in this plugin, down to third-party options/configurations.

We also don't have any way to clearly provide user errors - which would also immediately solve this (as we could just say that an option is invalid and suggest checking the case).

I was chatting to another collaborator about this today and we think we'll mirror the decision on the TypeScript side and keep keys case-sensitive for now.

Thanks for your time and detailed explanation, and for the references on the TypeScript side.

Now that you bring up the tsconfig autocomplete, I think it's worth posting an feature request over on the TypeScript repo.

[mrmckeb]

Thank you, I've also jumped in on that thread!

[mrmckeb]

I did a little thinking/research yesterday/today, and what I feel we can do in this case is support postcss along with postCss. We might also change the default (recommendation) to be postcss.

I can see that other tools are using all lowercase for PostCSS, and want to help avoid situations like this in future. Examples below:

• https://vitejs.dev/config/#css-postcss
• https://webpack.js.org/loaders/postcss-loader/

[mrmckeb]

This is now released, thanks for your feedback and patience!
https://github.com/mrmckeb/typescript-plugin-css-modules/releases/tag/v3.4.0