Regular expressions array for selectors areas

packages/astro/src/index.ts

@@ -49,10 +49,10 @@ export const stylify = (options: ConfigInterface = {}): AstroIntegration => {
 					compiler: {
 						mangleSelectors: options.compiler?.mangleSelectors ?? !isDev,
 						selectorsAreas: [
-							'(?:^|\\s+)class=\\{((?:.|\\n)+)\\}',
-							'(?:^|\\s+)class:list=\\{\\[((?:.|\\n)+)\\]\\}',
-							`addAttribute\\(([\\s\\S\\n]+), (?:"|\\')class:list(?:"|\\')\\)`,
-							`addAttribute\\(([\\s\\S\\n]+), (?:"|')class(?:"|')\\)`
+							/(?:^|\s+)class=\{((?:.|\n)+)\}/,
+							/(?:^|\s+)class:list=\{\[((?:.|\n)+)\]\}/,
+							/addAttribute\(([\s\S\n]+), (?:"|')class:list(?:"|')\)/,
+							/addAttribute\(([\s\S\n]+), (?:"|')class(?:"|')\)/
 						]
 					},
 					bundles: generateDefaultBundle

packages/bundler/tests/jest/multiple-files.test.ts

@@ -16,7 +16,7 @@ const bundler = new Bundler({
 	filesBaseDir: bundleTestDir,
 	compiler: {
 		mangleSelectors: true,
-		selectorsAreas: ['(?:^|\\s+)n:class="([^"]+)"', '(?:^|\\s+)v-bind:class="([^"]+)"']
+		selectorsAreas: [/(?:^|\s+)n:class="([^"]+)"/, /(?:^|\s+)v-bind:class="([^"]+)"/]
 	}
 });
 

packages/nuxt/src/module.ts

@@ -165,7 +165,7 @@ export default defineNuxtModule<NuxtModuleConfigInterface>({
 					id: 'nuxtRollup',
 					dev: nuxtIsInDevMode,
 					compiler: {
-						selectorsAreas: ['"className":\\[([^\\]]+)\\]']
+						selectorsAreas: [/"className":\[([^\]]+)\]/]
 					}
 				}
 			);

packages/stylify/src/Compiler/Compiler.ts

@@ -94,7 +94,7 @@ export interface CompilerConfigInterface {
 	pregenerate?: PregenerateType,
 	components?: ComponentType,
 	ignoredAreas?: RegExp[],
-	selectorsAreas?: string[],
+	selectorsAreas?: RegExp[],
 	cssVariablesEnabled?: boolean,
 	injectVariablesIntoCss?: boolean
 	matchCustomSelectors?: boolean
@@ -170,7 +170,7 @@ export class Compiler {
 
 	public pregenerate = '';
 
-	public selectorsAreas = [];
+	public selectorsAreas: RegExp[] = [];
 
 	public customSelectors: Record<string, CustomSelectorsInterface> = {};
 
@@ -382,7 +382,7 @@ export class Compiler {
 		if (rewriteOnlyInSelectorsAreas) {
 			for (const rewriteSelectorAreaRegExpString of this.selectorsAreas) {
 				rawContent = rawContent.replace(
-					new RegExp(rewriteSelectorAreaRegExpString, 'g'),
+					new RegExp(rewriteSelectorAreaRegExpString.source, 'g'),
 					(contentToReplace, contentToRewrite) => {
 						areasToRewrite.push({ contentToReplace, contentToRewrite });
 						return '';
@@ -473,7 +473,7 @@ export class Compiler {
 
 		if (matchOnlyInAreas) {
 			for (const selectorAreaRegExpString of this.selectorsAreas) {
-				const regExp = new RegExp(selectorAreaRegExpString, 'g');
+				const regExp = new RegExp(selectorAreaRegExpString.source, 'g');
 				let selectorAreasMatches: RegExpExecArray;
 				while ((selectorAreasMatches = regExp.exec(content))) {
 					contentToProcess += ' ' + selectorAreasMatches[1];

packages/stylify/src/Compiler/defaultPreset.ts

@@ -22,40 +22,40 @@ export const defaultPreset = {
 	],
 	selectorsAreas: [
 		// HTML
-		'(?:^|\\s+)class="([^"]+)"',
-		'(?:^|\\s+)class=\'([^\']+)\'',
+		/(?:^|\s+)class="([^"]+)"/,
+		/(?:^|\s+)class='([^']+)'/,
 		// React
-		'(?:^|\\s+)className="([^"]+)"',
-		'(?:^|\\s+)className=\'([^\']+)\'',
-		'(?:^|\\s+)className=\\{((?:.|\\n)+)\\}',
+		/(?:^|\s+)className="([^"]+)"/,
+		/(?:^|\s+)className='([^']+)'/,
+		/(?:^|\s+)className=\{((?:.|\n)+)\}/,
 		// JSX compiled
-		'(?:^|\\s+)className:\\s*`((?:.|\\n)+)`',
-		'(?:^|\\s+)className:\\s*"([^"]+)"',
-		'(?:^|\\s+)className:\\s*\'([^\']+)"',
+		/(?:^|\s+)className:\s*`((?:.|\n)+)`/,
+		/(?:^|\s+)className:\s*"([^"]+)"/,
+		/(?:^|\s+)className:\s*'([^']+)"/,
 		// Vue and alpinejs
-		'(?:^|\\s+)(?:v-bind|x-bind)?:class="([^"]+)"',
-		'(?:^|\\s+)(?:v-bind|x-bind)?:class=\'([^\']+)\'',
+		/(?:^|\s+)(?:v-bind|x-bind)?:class="([^"]+)"/,
+		/(?:^|\s+)(?:v-bind|x-bind)?:class='([^']+)'/,
 		// Lit
-		'(?:^|\\s+)class=\\$\\{((?:.|\n)+)\\}',
+		/(?:^|\s+)class=\$\{((?:.|\n)+)\}/,
 		// Angular
-		'(?:^|\\s+)\\[(?:ngClass|className)\\]="([^"]+)',
-		'(?:^|\\s+)\\[(?:ngClass|className)\\]=\'([^\']+)',
+		/(?:^|\s+)\[(?:ngClass|className)\]="([^"]+)/,
+		/(?:^|\s+)\[(?:ngClass|className)\]='([^']+)/,
 		// Nette
-		'(?:^|\\s+)n:class="([^"]+)"',
-		'(?:^|\\s+)n:class=\'([^\']+)\'',
+		/(?:^|\s+)n:class="([^"]+)"/,
+		/(?:^|\s+)n:class='([^']+)'/,
 		// Twig form widgets
-		'\'class\':\\s*\'([^\']+)\'',
-		'\'class\':\\s*"([^"]+)"',
-		'"class":\\s*"([^"]+)"',
-		'"class":\\s*\'([^\']+)\'',
+		/'class':\s*'([^']+)'/,
+		/'class':\s*"([^"]+)"/,
+		/"class":\s*"([^"]+)"/,
+		/"class":\s*'([^']+)'/,
 		// Escaped default areas
-		'(?:^|\\s+)class=\\\\"([^"]+)\\\\"',
-		`(?:^|\\s+)class=\\\\'([^']+)\\\\'`,
+		/(?:^|\s+)class=\\"([^"]+)\\"/,
+		/(?:^|\s+)class=\\'([^']+)\\'/,
 		// Svelte
-		'(?:^|\\s+)class:(\\S+)=[{"\']',
-		'class=\\{`([^`]+)`\\}',
+		/(?:^|\s+)class:(\S+)=[{"']/,
+		/class=\{`([^`]+)`\}/,
 		// Objects
-		'(?:^|\\s+)"class":\\s*`([^`]+)`'
+		/(?:^|\s+)"class":\s*`([^`]+)`/
 	],
 	screens: {
 		tosm: maxWidthScreen('639px'),

packages/stylify/tests/jest/selectors-mangling.test.ts

@@ -132,8 +132,8 @@ test('Mangling similar areas right behind each other', (): void => {
 		mangleSelectors: true,
 		dev: true,
 		selectorsAreas: [
-			`addAttribute\\(([\\s\\S]+), (?:"|\\')class:list(?:"|\\')\\)`,
-			`addAttribute\\(([\\s\\S]+), (?:"|')class(?:"|')\\)`
+			/addAttribute\(([\s\S]+), (?:"|\\')class:list(?:"|')\)/,
+			/addAttribute\(([\s\S]+), (?:"|')class(?:"|')\)/
 		]
 	});
 
@@ -151,7 +151,7 @@ test('Escaped match area', (): void => {
 		mangleSelectors: true,
 		dev: true,
 		selectorsAreas: [
-			'class=\\\\"([^"]+)\\\\"'
+			/class=\\"([^"]+)\\"/
 		]
 	});