Fix mangling in astro

stylify · Mar 14, 2023 · 51185e6 · 51185e6
1 parent e8c08f2
commit 51185e6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/packages/astro/tests/jest/astrov2.test.ts b/packages/astro/tests/jest/astrov2.test.ts
@@ -20,20 +20,28 @@ fse.copySync(path.join(bundleTestDir, 'input'), buildTmpDir);
 execSync(`cd ${buildTmpDir} && yarn install && yarn build`);
 
 const indexHtmlPart = `
-	<body class="c d">
-		<h1 class="e f g">Layout</h1>
-		<h1 class="g">Hello World!</h1><h2 class="j h k i"></h2><h3 class="e">Another text</h3><h2 class="a b">Subtitle</h2>
+	<body class="e f">
+		<h1 class="g h i">Layout</h1>
+		<h1 class="i">Hello World!</h1><h2 class="l j m k"></h2><h3 class="g">Another text</h3><h2 class="a b">Subtitle</h2>
+
+<strong class=" c d ">
+	Text
+</strong>
 	</body></html>
 `.trim();
 
 const secondHtmlPart = `
-	<body class="c d">
-		<h1 class="e f g">Layout</h1>
-		<h1 class="l">Hello World 2!</h1><h2 class="a b">Subtitle</h2>
+	<body class="e f">
+		<h1 class="g h i">Layout</h1>
+		<h1 class="n">Hello World 2!</h1><h2 class="a b">Subtitle</h2>
+
+<strong class=" c d ">
+	Text
+</strong>
 	</body></html>
 `.trim();
 
-const cssFilePart = ':root{--blue: darkblue}.a{color:orange}.b{font-size:24px}.c{text-align:center}.d{color:#00008b}.e{font-size:48px}.f{margin-top:24px}.g{color:purple}.j{font-weight:700}.k{font-size:12px}.l{color:lightpurple}@media (min-width: 1024px){.h{color:darkpurple}.i{font-size:24px}}';
+const cssFilePart = ':root{--blue: darkblue}.a{color:orange}.b{font-size:24px}.c{color:test}.d{font-size:123px}.e{text-align:center}.f{color:#00008b}.g{font-size:48px}.h{margin-top:24px}.i{color:purple}.l{font-weight:700}.m{font-size:12px}.n{color:lightpurple}@media (min-width: 1024px){.j{color:darkpurple}.k{font-size:24px}}';
 
 test('Astro v2', async (): Promise<void> => {
  	const [indexHtmlFileEntry] = FastGlob.sync(path.join(buildTmpDir, 'dist', 'index.html'));

diff --git a/packages/astro/tests/jest/astrov2/input/src/components/Subtitle.astro b/packages/astro/tests/jest/astrov2/input/src/components/Subtitle.astro
@@ -1 +1,13 @@
+---
+const Tag = 'strong';
+---
 <h2 class="color:orange font-size:24px">Subtitle</h2>
+
+<Tag
+	class={`
+		color:test
+		font-size:123px
+	`}
+	>
+	Text
+</Tag>
diff --git a/packages/stylify/src/Compiler/defaultPreset.ts b/packages/stylify/src/Compiler/defaultPreset.ts
@@ -52,7 +52,9 @@ export const defaultPreset = {
 		'(?:^|\\s+)class=\\\\"([^"]+)\\\\"',
 		`(?:^|\\s+)class=\\\\'([^']+)\\\\'`,
 		// Svelte
-		'(?:^|\\s+)class:(\\S+)=[{"\']'
+		'(?:^|\\s+)class:(\\S+)=[{"\']',
+		// Objects
+		'(?:^|\\s+)"class":\\s*`([^`]+)`'
 	],
 	screens: {
 		tosm: maxWidthScreen('639px'),