Skip to content

Commit

Permalink
Fix rollup docs for v1 (#6982)
Browse files Browse the repository at this point in the history
# 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.
  • Loading branch information
janechu authored Jun 11, 2024
1 parent 0e3632f commit 62af44f
Showing 1 changed file with 40 additions and 17 deletions.
57 changes: 40 additions & 17 deletions sites/website/versioned_docs/version-1.x/integrations/rollup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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(),
Expand Down

0 comments on commit 62af44f

Please sign in to comment.