From 62af44f5dfcb0bc22b4df577c4e7835f5030a1d9 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 11 Jun 2024 08:21:45 -0700
Subject: [PATCH] Fix rollup docs for v1 (#6982)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

The rollup configuration docs for FAST Element v1 cause corrupted HTML, this change ports over validated configuration options used in Fluent UI web components.
 
### 🎫 Issues

Closes #6795

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [ ] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/master/CODE_OF_CONDUCT.md#our-standards) for this project.
---
 .../version-1.x/integrations/rollup.md        | 57 +++++++++++++------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/sites/website/versioned_docs/version-1.x/integrations/rollup.md b/sites/website/versioned_docs/version-1.x/integrations/rollup.md
index 4050a6ca97b..295c97604bd 100644
--- a/sites/website/versioned_docs/version-1.x/integrations/rollup.md
+++ b/sites/website/versioned_docs/version-1.x/integrations/rollup.md
@@ -99,6 +99,38 @@ import copy from 'rollup-plugin-copy';
 import serve from 'rollup-plugin-serve';
 import { terser } from 'rollup-plugin-terser';
 
+/**
+ * Reduces extra spaces in HTML tagged templates.
+ *
+ * @param {string} data - the fragment value
+ * @returns string
+ */
+export function transformHTMLFragment(data) {
+  data = data.replace(/\s*([<>])\s*/g, '$1'); // remove spaces before and after angle brackets
+  return data.replace(/\s{2,}/g, ' '); // Collapse all sequences to 1 space
+}
+
+/**
+ * Reduces extra spaces in CSS tagged templates.
+ *
+ * Breakdown of this regex:
+ *   (?:\s*\/\*(?:.|\s)+?\*\/\s*)  Remove comments (non-capturing)
+ *   (?:;)\s+(?=\})  Remove semicolons and spaces followed by property list end (non-capturing)
+ *   \s+(?=\{)  Remove spaces before property list start (non-capturing)
+ *   (?<=:)\s+  Remove spaces after property declarations (non-capturing)
+ *   \s*([{};,])\s*  Remove extra spaces before and after braces, semicolons, and commas (captures)
+ *
+ * @param {string} data - the fragment value
+ * @returns string
+ */
+export function transformCSSFragment(data) {
+  return data.replace(/(?:\s*\/\*(?:.|\s)+?\*\/\s*)|(?:;)\s+(?=\})|\s+(?=\{)|(?<=:)\s+|\s*([{};,])\s*/g, '$1');
+}
+
+const parserOptions = {
+  sourceType: 'module',
+};
+
 export default {
   input: 'src/main.ts',
   output: {
@@ -109,23 +141,14 @@ export default {
   },
   plugins: [
     transformTaggedTemplate({
-      tagsToProcess: ['html','css'],
-      parserOptions: {
-        sourceType: "module",
-        plugins: [
-            "typescript",
-            [
-                "decorators",
-                { decoratorsBeforeExport: true }
-            ]
-        ]
-      },
-      transformer(data) {
-          data = data.replace(/\s([{}()>~+=^$:!;])\s/gm, '$1');
-          data = data.replace(/([",[]])\s+/gm, '$1');
-          data = data.replace(/\s{2,}/gm, ' ');
-          return data.trim();
-      }
+      tagsToProcess: ['css'],
+      transformer: transformCSSFragment,
+      parserOptions,
+    }),
+    transformTaggedTemplate({
+      tagsToProcess: ['html'],
+      transformer: transformHTMLFragment,
+      parserOptions,
     }),
     typescript(),
     resolve(),