Merge pull request #3 from akshay-devadiga/bugfix/preserve-style-attr…

…ibutes

Bug Fix: Ensure style tag attributes are preserved during Vue 2 to Vue 3 conversion

tools/vue-composition-converter/index.vue

@@ -265,7 +265,7 @@ worker.addEventListener('message', (event: any) => {
 });
 
 const processCode = () => {
-	const { scriptContent, templateContent, styleContent } = parseSfc(userInput.value);
+	const { scriptContent, templateContent, styleContent, styleAttributes } = parseSfc(userInput.value);
 
 	errorMessage.value = '';
 
@@ -302,7 +302,8 @@ const processCode = () => {
 		const compositionOutput = composeSfc(
 			updatedCode.value,
 			templateContent,
-			styleContent
+			styleContent,
+			styleAttributes
 		);
 
 		updatedCode.value = compositionOutput;

tools/vue-composition-converter/tests/helpers.ts

@@ -19,10 +19,10 @@ const parseCode = (input: string) => {
 };
 
 const formatCode = (input: string) => {
-	const { templateContent, scriptContent, styleContent } = parseSfc(input);
+	const { templateContent, scriptContent, styleContent, styleAttributes } = parseSfc(input);
 	const result = format(parseCode(scriptContent));
 
-	const composedSfc = composeSfc(result, templateContent, styleContent);
+	const composedSfc = composeSfc(result, templateContent, styleContent, styleAttributes);
 	return composedSfc;
 };
 

tools/vue-composition-converter/utils/parse-sfc.ts

@@ -1,6 +1,15 @@
 import type { ElementNode } from '@vue/compiler-dom';
 import { parse } from '@vue/compiler-dom';
 
+/**
+ * Generates a string of attributes from an ElementNode.
+ */
+const getAttributesString = (node: ElementNode | undefined) => {
+	return node?.props?.map((prop) => {
+	  return `${prop.name}${prop.value ? `="${prop.value.content}"` : ''}`;
+	}).join(' ') || '';
+};
+
 /**
  * Parse SFC user input to extract template, script and style
  */
@@ -21,10 +30,13 @@ const parseSfc = (sfcContent:string) => {
 		return (node as ElementNode).tag === 'style';
 	});
 
+	const styleAttributes = getAttributesString(style as ElementNode);
+
 	return {
 		templateContent: template?.innerLoc.source,
 		scriptContent: script?.innerLoc.source,
 		styleContent: style?.innerLoc.source,
+		styleAttributes: styleAttributes || 'scoped'
 	};
 };
 
@@ -36,11 +48,12 @@ const parseSfc = (sfcContent:string) => {
 const composeSfc = (
 	scriptContent:string,
 	templateContent:string,
-	styleContent:string
+	styleContent:string,
+	styleAttributes:string
 ) => {
 	const templateSfc = `<template>${templateContent}</template>`;
 	let scriptSfc = `&lt;script setup&gt;\n${scriptContent}\n&lt;/script&gt;`;
-	const styleSfc = `<style scoped>${styleContent}</style>`;
+	const styleSfc = `<style ${styleAttributes}>${styleContent}</style>`;
 	scriptSfc = scriptSfc.replaceAll('&lt;', '<').replaceAll('&gt;', '>');
 	return [templateSfc, scriptSfc, styleSfc].join('\n\n');
 };