refactor(matchClasses): class renaming regex to be safer

README.md

@@ -94,7 +94,7 @@ type RenameOptions = {
    * The default is to match the name with word boundaries on either side, but you can change this to match only the start or end of the name, or to match more or less than a whole word.
    *
    * @default ```js
-   * (key: string) => `(:^|[^-&;:_])(${key})(?![a-zA-Z0-9_-])(:$|[^-&;:_\./])`
+   * (key: string) => `(:^|[^&;:_/\[\\]a-zA-Z0-9_.-])(${key})(?=$|[^&;:_/\[\\]a-zA-Z0-9_.-])`
    * ```
    */
   matchClasses?: (key: string) => string;

src/index.ts

@@ -115,13 +115,13 @@ export default function renameIntegration(
 
             Object.keys(classMap).forEach((key) => {
               const regex = new RegExp(
-                _options.matchClasses?.(escapeRegExp(key)),
+                _options.matchClasses(escapeRegExp(key)),
                 'g',
               );
 
               content = content.replaceAll(
                 regex,
-                `$1${classMap[key as keyof typeof classMap]}$3`,
+                `$1${classMap[key as keyof typeof classMap]}`,
               );
             });
 

src/options.ts

@@ -1,3 +1,5 @@
+import { matchClasses } from './utils.js';
+
 import type { RenameOptions } from './types.js';
 
 export const defaultOptions = {
@@ -6,6 +8,5 @@ export const defaultOptions = {
     by: 'whole',
   },
   targetExt: ['html', 'js'],
-  matchClasses: (key: string) =>
-    `(:^|[^-&;:_])(${key})(?![a-zA-Z0-9_-])(:$|[^-&;:_\./])`,
+  matchClasses,
 } satisfies RenameOptions;

src/types.ts

@@ -56,7 +56,7 @@ export type RenameOptions =
        * The default is to match the name with word boundaries on either side, but you can change this to match only the start or end of the name, or to match more or less than a whole word.
        *
        * @default ```js
-       * (key: string) => `(:^|[^-&;:_])(${key})(?![a-zA-Z0-9_-])(:$|[^-&;:_\./])`
+       * (key: string) => `(:^|[^&;:_/\[\\]a-zA-Z0-9_.-])(${key})(?=$|[^&;:_/\[\\]a-zA-Z0-9_.-])`
        * ```
        */
       matchClasses?: (key: string) => string;

src/utils.ts

@@ -2,13 +2,14 @@ import { readdir } from 'node:fs/promises';
 import { resolve } from 'node:path';
 import postcssRename from 'postcss-rename';
 
-import type { AstroConfig } from 'astro';
 import type { InternalRenameOptions } from './types.js';
 import type { Options as PostcssRenameOptions } from 'postcss-rename';
-import type { CSSOptions, UserConfig } from 'vite'; // import CSSOptions type
+import type { CSSOptions, UserConfig } from 'vite';
 
 export const MAPS_DIRECTORY = './class-maps';
 
+export const matchClasses = (key: string) =>
+  `(:^|[^&;:_/\[\\]a-zA-Z0-9_.-])(${key})(?=$|[^&;:_/\[\\]a-zA-Z0-9_.-])`;
 export const escapeRegExp = (string: string) =>
   string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 export const calculatePercent = (before: number, after: number) =>
@@ -55,20 +56,16 @@ export const getPostCssConfig = async (
 
 export const getViteConfiguration = async (
   options: InternalRenameOptions['rename'],
-  viteConfig: AstroConfig['vite'],
+  viteConfig: UserConfig,
 ) => {
   // We need to manually load postcss config files because when inlining the tailwind and autoprefixer plugins,
   // that causes vite to ignore postcss config files
   const postcssConfigResult = await getPostCssConfig(
     viteConfig.root,
     viteConfig.css?.postcss,
   );
-  const postcssOptions =
-    (postcssConfigResult && postcssConfigResult.options) || {};
-  const postcssPlugins =
-    postcssConfigResult && postcssConfigResult.plugins
-      ? postcssConfigResult.plugins.slice()
-      : [];
+  const postcssOptions = postcssConfigResult?.options ?? {};
+  const postcssPlugins = postcssConfigResult?.plugins?.slice() ?? [];
 
   postcssPlugins.push(postcssRename(options as PostcssRenameOptions));