fix: Suggested Rollup config corrupts output html

microsoft · Aug 6, 2023 · 0c4783e · 0c4783e
1 parent 50dba9c
commit 0c4783e
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/sites/website/versioned_docs/version-legacy/integrations/rollup.md b/sites/website/versioned_docs/version-legacy/integrations/rollup.md
@@ -99,6 +99,11 @@ import copy from 'rollup-plugin-copy';
 import serve from 'rollup-plugin-serve';
 import { terser } from 'rollup-plugin-terser';
 
+const parserOptions = {
+  sourceType: 'module',
+  plugins: ['typescript', ['decorators', { decoratorsBeforeExport: true }]],
+};
+
 export default {
   input: 'src/main.ts',
   output: {
@@ -109,23 +114,22 @@ export default {
   },
   plugins: [
     transformTaggedTemplate({
-      tagsToProcess: ['html','css'],
-      parserOptions: {
-        sourceType: "module",
-        plugins: [
-            "typescript",
-            [
-                "decorators",
-                { decoratorsBeforeExport: true }
-            ]
-        ]
+      tagsToProcess: ['css'],
+      transformer: (data) => {
+        if (/\/\*(?![\s\S]*\*\/)[\s\S]*/g.test(data)) {
+          throw new Error('Unterminated comment found in CSS tagged template literal');
+        }
+        return data.replace(/(?:\s*\/\*(?:[\s\S])+?\*\/\s*)|(?:;)\s+(?=\})|\s+(?=\{)|(?<=:)\s+|\s*([{};,])\s*/g, '$1');
+      },
+      parserOptions,
+    }),
+    transformTaggedTemplate({
+      tagsToProcess: ['html'],
+      transformer: (data) => {
+        data = data.replace(/\s*([<>])\s*/g, '$1');
+        return data.replace(/\s{2,}/g, ' ');
       },
-      transformer(data) {
-          data = data.replace(/\s([{}()>~+=^$:!;])\s/gm, '$1');
-          data = data.replace(/([",[]])\s+/gm, '$1');
-          data = data.replace(/\s{2,}/gm, ' ');
-          return data.trim();
-      }
+      parserOptions,
     }),
     typescript(),
     resolve(),
@@ -257,4 +261,4 @@ Replace the contents of the `<body>` in your `index.html` file with the followin
 
 After saving your `index.html` file, run `npm run build` again, and you should see a card with text and a button.
 
-Congratulations! You're now set up to use FAST, Rollup, and TypeScript. You can import and use more components, build your own components, and when you are ready, build and deploy your website or app to production.
+Congratulations! You're now set up to use FAST, Rollup, and TypeScript. You can import and use more components, build your own components, and when you are ready, build and deploy your website or app to production.