From 0e7e64802288d3eb5e4706ebd39d758eba3e8412 Mon Sep 17 00:00:00 2001
From: RodrigoTomeES <rotome@unirioja.es>
Date: Sun, 5 Nov 2023 18:19:24 +0100
Subject: [PATCH] refactor(matchClasses): class renaming regex to be safer

---
 README.md      |  2 +-
 src/index.ts   |  4 ++--
 src/options.ts |  5 +++--
 src/types.ts   |  2 +-
 src/utils.ts   | 15 ++++++---------
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index f0dc740..ba65e09 100644
--- a/README.md
+++ b/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;
diff --git a/src/index.ts b/src/index.ts
index de2f49d..24386bc 100644
--- a/src/index.ts
+++ b/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]}`,
               );
             });
 
diff --git a/src/options.ts b/src/options.ts
index 9f30698..4cbe861 100644
--- a/src/options.ts
+++ b/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;
diff --git a/src/types.ts b/src/types.ts
index 01d322f..6c47614 100644
--- a/src/types.ts
+++ b/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;
diff --git a/src/utils.ts b/src/utils.ts
index 5ea6560..748819b 100644
--- a/src/utils.ts
+++ b/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,7 +56,7 @@ 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
@@ -63,12 +64,8 @@ export const getViteConfiguration = async (
     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));