diff --git a/readme.md b/readme.md index 23824c5..c6ece02 100644 --- a/readme.md +++ b/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 diff --git a/source/setup.ts b/source/setup.ts index e28f387..8dc00b3 100644 --- a/source/setup.ts +++ b/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), }), diff --git a/source/types.ts b/source/types.ts index e30c1b5..c709143 100644 --- a/source/types.ts +++ b/source/types.ts @@ -1,4 +1,10 @@ import type { AcceptedPlugin as PostcssPlugin } from 'postcss'; +import type postcssModulesPlugin from 'postcss-modules'; + +type PostcssModulesOptions = Omit< + Parameters[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; }; }