From 16b3c459fe45aff3ec0657bb1238bc6ae5e76f7b Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Thu, 16 Jul 2020 17:13:09 -0700 Subject: [PATCH] fix: rollup minify selectors should retain spaces --- ...tml-fragment.js => transform-fragments.js} | 17 ++++++++++- .../fast-components-msft/rollup.config.js | 19 +++++++++---- .../src/progress/progress/progress.styles.ts | 13 +++++---- .../src/slider/slider.styles.ts | 6 +--- .../fast-components/rollup.config.js | 21 ++++++++++---- .../src/progress/progress/progress.styles.ts | 13 +++++---- .../fast-element/rollup.config.js | 28 +++++++++++++++---- .../fast-foundation/rollup.config.js | 17 ++++++++--- 8 files changed, 97 insertions(+), 37 deletions(-) rename build/{transform-html-fragment.js => transform-fragments.js} (59%) diff --git a/build/transform-html-fragment.js b/build/transform-fragments.js similarity index 59% rename from build/transform-html-fragment.js rename to build/transform-fragments.js index 5f4edb59f48..841cdb7625d 100644 --- a/build/transform-html-fragment.js +++ b/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 index c31ea9ef951..86e6fadd447 100644 --- 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,7 +37,11 @@ export default [ }, }, }), - minifyTaggedCSSTemplate({ parserOptions }), + transformTaggedTemplate({ + tagsToProcess: ["css"], + transformer: transformCSSFragment, + parserOptions, + }), transformTaggedTemplate({ tagsToProcess: ["html"], transformer: transformHTMLFragment, @@ -41,6 +49,7 @@ export default [ }), 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 index 812c29b9259..91a8281fa1e 100644 --- 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 index 68fbd66d660..5d681790d35 100644 --- 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 index 03b8934a5c4..c0e8e169b76 100644 --- 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 index 79baada1da3..bcc6bbc48c1 100644 --- 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 index 6d639e65d70..1f5b65ed616 100644 --- 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,6 +28,8 @@ export default [ }, ], plugins: [ + resolve(), + commonJS(), typescript({ tsconfigOverride: { compilerOptions: { @@ -25,13 +37,19 @@ export default [ }, }, }), - 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 index fb5ef389ec4..d1154eddcee 100644 --- 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,7 +37,11 @@ export default [ }, }, }), - minifyTaggedCSSTemplate({ parserOptions }), + transformTaggedTemplate({ + tagsToProcess: ["css"], + transformer: transformCSSFragment, + parserOptions, + }), transformTaggedTemplate({ tagsToProcess: ["html"], transformer: transformHTMLFragment, @@ -41,6 +49,7 @@ export default [ }), filesize({ showMinifiedSize: false, + showBrotliSize: true, }), ], },