fix: rollup minify selectors should retain spaces

microsoft · Jul 17, 2020 · 16b3c45 · 16b3c45
1 parent a0b8658
commit 16b3c45
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 37 deletions.
diff --git a/build/transform-html-fragment.js → build/transform-fragments.js b/build/transform-html-fragment.js → build/transform-fragments.js
@@ -4,7 +4,7 @@ const spaceBetweenTags = /(>)\s+(<)/g;
 const spaceBetweenAttrs = /(["'\w])(?!\s*>)\s+/g;
 const openEnded = /(?:[^="'\w])?(["'\w])\s*$/g;
 
-export default function transformHTMLFragment(data) {
+export function transformHTMLFragment(data) {
     // if the chunk is only space, collapse and return it
     if (data.match(onlySpace)) {
         return data.replace(onlySpace, " ");
@@ -25,3 +25,18 @@ export default function transformHTMLFragment(data) {
 
     return data.trim();
 }
+
+const separators = /\s*([\{\};])\s*/gm;
+const lastProp = /;\s*(\})/gm;
+const endingSpaces = / ?\s+$/gm;
+
+export function transformCSSFragment(data) {
+    // Remove extra space, but not too much
+    data = data.replace(separators, "$1");
+
+    // Remove semicolons followed by property list end
+    data = data.replace(lastProp, "$1");
+
+    // space might be between property values or between selectors
+    return data.replace(endingSpaces, " ");
+}
diff --git a/packages/web-components/fast-components-msft/rollup.config.js b/packages/web-components/fast-components-msft/rollup.config.js
@@ -1,13 +1,17 @@
 import commonJS from "rollup-plugin-commonjs";
 import filesize from "rollup-plugin-filesize";
-import minifyTaggedCSSTemplate from "rollup-plugin-minify-tagged-css-template";
-import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
 import resolve from "rollup-plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
+import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
 import typescript from "rollup-plugin-typescript2";
-import transformHTMLFragment from "../../../build/transform-html-fragment";
+import {
+    transformCSSFragment,
+    transformHTMLFragment,
+} from "../../../build/transform-fragments";
 
-const parserOptions = { sourceType: "module" };
+const parserOptions = {
+    sourceType: "module",
+};
 
 export default [
     {
@@ -33,14 +37,19 @@ export default [
                     },
                 },
             }),
-            minifyTaggedCSSTemplate({ parserOptions }),
+            transformTaggedTemplate({
+                tagsToProcess: ["css"],
+                transformer: transformCSSFragment,
+                parserOptions,
+            }),
             transformTaggedTemplate({
                 tagsToProcess: ["html"],
                 transformer: transformHTMLFragment,
                 parserOptions,
             }),
             filesize({
                 showMinifiedSize: false,
+                showBrotliSize: true,
             }),
         ],
     },

diff --git a/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts
@@ -48,7 +48,7 @@ export const ProgressStyles = css`
         height: 100%;
         background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
-        animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
+        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
         width: 40%;
         animation: indeterminate-1 2s infinite;
     }
@@ -59,12 +59,13 @@ export const ProgressStyles = css`
         height: 100%;
         background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
-        animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
+        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
         width: 60%;
         animation: indeterminate-2 2s infinite;
     }
 
-    :host(.paused) .indeterminate-indicator-1, :host(.paused) .indeterminate-indicator-2 {
+    :host(.paused) .indeterminate-indicator-1,
+    :host(.paused) .indeterminate-indicator-2 {
         animation-play-state: paused;
         background-color: ${neutralFillRestBehavior.var};
     }
@@ -88,7 +89,7 @@ export const ProgressStyles = css`
         100% {
             opacity: 0;
             transform: translateX(300%);
-        },
+        }
     }
 
     @keyframes indeterminate-2 {
@@ -106,8 +107,8 @@ export const ProgressStyles = css`
         100% {
             transform: translateX(166.66%);
             opacity: 1;
-        },
-    },
+        }
+    }
 `.withBehaviors(
     accentForegroundRestBehavior,
     neutralFillRestBehavior,

diff --git a/packages/web-components/fast-components-msft/src/slider/slider.styles.ts b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts
@@ -17,10 +17,6 @@ import {
 } from "../styles";
 
 export const SliderStyles = css`
-    :host([hidden]) {
-        display: none;
-    }
-
     ${display("inline-grid")} :host {
         --thumb-size: calc(${heightNumber} * 0.5);
         --thumb-translate: calc(var(--thumb-size) * 0.5);
@@ -57,7 +53,7 @@ export const SliderStyles = css`
         position: absolute;
         height: calc(var(--thumb-size) * 1px);
         width: calc(var(--thumb-size) * 1px);
-        transition: "all 0.2s ease";
+        transition: all 0.2s ease;
     }
     .thumb-cursor {
         border: none;

diff --git a/packages/web-components/fast-components/rollup.config.js b/packages/web-components/fast-components/rollup.config.js
@@ -1,13 +1,17 @@
 import commonJS from "rollup-plugin-commonjs";
 import filesize from "rollup-plugin-filesize";
-import minifyTaggedCSSTemplate from "rollup-plugin-minify-tagged-css-template";
 import resolve from "rollup-plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
 import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
 import typescript from "rollup-plugin-typescript2";
-import transformHTMLFragment from "../../../build/transform-html-fragment";
+import {
+    transformCSSFragment,
+    transformHTMLFragment,
+} from "../../../build/transform-fragments";
 
-const parserOptions = { sourceType: "module" };
+const parserOptions = {
+    sourceType: "module",
+};
 
 export default [
     {
@@ -33,13 +37,20 @@ export default [
                     },
                 },
             }),
-            minifyTaggedCSSTemplate({ parserOptions }),
+            transformTaggedTemplate({
+                tagsToProcess: ["css"],
+                transformer: transformCSSFragment,
+                parserOptions,
+            }),
             transformTaggedTemplate({
                 tagsToProcess: ["html"],
                 transformer: transformHTMLFragment,
                 parserOptions,
             }),
-            filesize({ showMinifiedSize: false }),
+            filesize({
+                showMinifiedSize: false,
+                showBrotliSize: true,
+            }),
         ],
     },
 ];
diff --git a/packages/web-components/fast-components/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components/src/progress/progress/progress.styles.ts
@@ -48,7 +48,7 @@ export const ProgressStyles = css`
         height: 100%;
         background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
-        animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
+        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
         width: 40%;
         animation: indeterminate-1 2s infinite;
     }
@@ -59,12 +59,13 @@ export const ProgressStyles = css`
         height: 100%;
         background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
-        animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
+        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
         width: 60%;
         animation: indeterminate-2 2s infinite;
     }
 
-    :host(.paused) .indeterminate-indicator-1, :host(.paused) .indeterminate-indicator-2 {
+    :host(.paused) .indeterminate-indicator-1,
+    :host(.paused) .indeterminate-indicator-2 {
         animation-play-state: paused;
         background-color: ${neutralFillRestBehavior.var};
     }
@@ -88,7 +89,7 @@ export const ProgressStyles = css`
         100% {
             opacity: 0;
             transform: translateX(300%);
-        },
+        }
     }
 
     @keyframes indeterminate-2 {
@@ -106,8 +107,8 @@ export const ProgressStyles = css`
         100% {
             transform: translateX(166.66%);
             opacity: 1;
-        },
-    },
+        }
+    }
 `.withBehaviors(
     accentForegroundRestBehavior,
     neutralFillRestBehavior,

diff --git a/packages/web-components/fast-element/rollup.config.js b/packages/web-components/fast-element/rollup.config.js
@@ -1,7 +1,17 @@
+import commonJS from "rollup-plugin-commonjs";
 import filesize from "rollup-plugin-filesize";
-import minifyTaggedCSSTemplate from "rollup-plugin-minify-tagged-css-template";
+import resolve from "rollup-plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
+import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
 import typescript from "rollup-plugin-typescript2";
+import {
+    transformCSSFragment,
+    transformHTMLFragment,
+} from "../../../build/transform-fragments";
+
+const parserOptions = {
+    sourceType: "module",
+};
 
 export default [
     {
@@ -18,20 +28,28 @@ export default [
             },
         ],
         plugins: [
+            resolve(),
+            commonJS(),
             typescript({
                 tsconfigOverride: {
                     compilerOptions: {
                         declaration: false,
                     },
                 },
             }),
-            minifyTaggedCSSTemplate({
-                parserOptions: {
-                    sourceType: "module",
-                },
+            transformTaggedTemplate({
+                tagsToProcess: ["css"],
+                transformer: transformCSSFragment,
+                parserOptions,
+            }),
+            transformTaggedTemplate({
+                tagsToProcess: ["html"],
+                transformer: transformHTMLFragment,
+                parserOptions,
             }),
             filesize({
                 showMinifiedSize: false,
+                showBrotliSize: true,
             }),
         ],
     },

diff --git a/packages/web-components/fast-foundation/rollup.config.js b/packages/web-components/fast-foundation/rollup.config.js
@@ -1,13 +1,17 @@
 import commonJS from "rollup-plugin-commonjs";
 import filesize from "rollup-plugin-filesize";
-import minifyTaggedCSSTemplate from "rollup-plugin-minify-tagged-css-template";
 import resolve from "rollup-plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
 import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
 import typescript from "rollup-plugin-typescript2";
-import transformHTMLFragment from "../../../build/transform-html-fragment";
+import {
+    transformCSSFragment,
+    transformHTMLFragment,
+} from "../../../build/transform-fragments";
 
-const parserOptions = { sourceType: "module" };
+const parserOptions = {
+    sourceType: "module",
+};
 
 export default [
     {
@@ -33,14 +37,19 @@ export default [
                     },
                 },
             }),
-            minifyTaggedCSSTemplate({ parserOptions }),
+            transformTaggedTemplate({
+                tagsToProcess: ["css"],
+                transformer: transformCSSFragment,
+                parserOptions,
+            }),
             transformTaggedTemplate({
                 tagsToProcess: ["html"],
                 transformer: transformHTMLFragment,
                 parserOptions,
             }),
             filesize({
                 showMinifiedSize: false,
+                showBrotliSize: true,
             }),
         ],
     },