feat: allow configuring postcss-modules options

readme.md

@@ -65,6 +65,7 @@ Done, you can use the TailwindCSS in the project!
 | `cssModules.enabled`                 | `boolean`         | `false`            | Enables CSS Modules support. When enabled, class names are locally scoped by default, meaning they are unique to the component and won't conflict with other styles. |
 | `cssModules.filter`                  | `RegExp`          | `/\.module\.css$/` | A regular expression to detect which files should be processed as CSS Modules.                                                                                       |
 | `cssModules.exclude`                 | `RegExp[]`        | `[]`               | An array of regular expressions to exclude specific files or paths from CSS Modules processing.                                                                      |
+| `cssModules.options`                 | `object`          | `{}`               | Options to pass to [postcss-modules](https://github.com/madyankin/postcss-modules#usage). `getJSON` and `globalModulePaths` are managed internally.                  |
 
 ## CSS Modules
 
@@ -89,6 +90,20 @@ export const Button = ({ label }) => {
 };
 ```
 
+You can customize postcss-modules behavior using `cssModules.options`:
+
+```js
+tailwindPlugin({
+  cssModules: {
+    enabled: true,
+    options: {
+      generateScopedName: "[name]__[local]___[hash:base64:5]",
+      localsConvention: "camelCaseOnly",
+    },
+  },
+}),
+```
+
 To make css modules work more correctly, add the main CSS file to the excludes:
 
 ```js

source/setup.ts

@@ -22,6 +22,7 @@ export const getSetup =
 				enabled: cssModulesEnabled = false,
 				filter: cssModulesFilter = /\.module\.css$/,
 				exclude: cssModulesExclude = [],
+				options: cssModulesOptions = {},
 			} = {},
 		} = options;
 		const namespace = 'tailwindcss-module';
@@ -41,6 +42,7 @@ export const getSetup =
 			if (isCssModule) {
 				plugins.push(
 					postcssModulesPlugin({
+						...cssModulesOptions,
 						globalModulePaths: cssModulesExclude,
 						getJSON: (_, classes) => cache.set(args.path, classes),
 					}),

source/types.ts

@@ -1,4 +1,10 @@
 import type { AcceptedPlugin as PostcssPlugin } from 'postcss';
+import type postcssModulesPlugin from 'postcss-modules';
+
+type PostcssModulesOptions = Omit<
+	Parameters<typeof postcssModulesPlugin>[0],
+	'getJSON' | 'globalModulePaths'
+>;
 
 export interface TailwindPluginOptions {
 	/**
@@ -23,5 +29,7 @@ export interface TailwindPluginOptions {
 		filter?: RegExp;
 		/** Regex patterns to exclude files from CSS Modules. */
 		exclude?: RegExp[];
+		/** Options to pass to postcss-modules. `getJSON` and `globalModulePaths` are managed internally. */
+		options?: PostcssModulesOptions;
 	};
 }