Merge pull request #9 from Microsoft/bugfix/tree-shake-css

Workaround for #8

Author: bengry

libs/fabric/src/lib/components/command-bar/command-bar.module.ts

@@ -4,7 +4,9 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as OverflowSetCss from 'office-ui-fabric-react/lib-amd/components/OverflowSet/OverflowSet.scss';
 import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
+import { noop } from '../../utils/noop';
 import { FabContextualMenuModule } from '../contextual-menu/contextual-menu.module';
 import { FabCommandBarComponent } from './command-bar.component';
 import {
@@ -18,6 +20,9 @@ import {
   CommandBarOverflowItemsDirective,
 } from './directives/command-bar-items.directives';
 
+// Dummy action to force OverflowSetCss to load and not be tree-shaken away.
+noop(OverflowSetCss);
+
 const components = [
   FabCommandBarComponent,
   CommandBarItemsDirective,

libs/fabric/src/lib/components/date-picker/date-picker.component.ts

@@ -2,8 +2,18 @@
 // Licensed under the MIT License.
 
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
-import { IDatePickerProps } from 'office-ui-fabric-react/lib/DatePicker';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { IDatePickerProps } from 'office-ui-fabric-react';
 
 @Component({
   selector: 'fab-date-picker',

libs/fabric/src/lib/components/date-picker/date-picker.module.ts

@@ -4,9 +4,14 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
+import { DatePicker } from 'office-ui-fabric-react';
+import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
+import { noop } from '../../utils/noop';
 import { FabDatePickerComponent } from './date-picker.component';
 
+// Dummy action to force CalendarCss to load and not be tree-shaken away.
+noop(CalendarCss);
+
 const components = [FabDatePickerComponent];
 
 @NgModule({

libs/fabric/src/lib/components/hover-card/hover-card.module.ts

@@ -4,9 +4,14 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { HoverCard, ExpandingCard } from 'office-ui-fabric-react/lib/HoverCard';
+import * as HoverCardCss from 'office-ui-fabric-react/lib-amd/components/HoverCard/HoverCardPage.global.scss';
+import { ExpandingCard, HoverCard } from 'office-ui-fabric-react/lib/HoverCard';
+import { noop } from '../../utils/noop';
 import { FabHoverCardComponent } from './hover-card.component';
 
+// Dummy action to force HoverCardCss to load and not be tree-shaken away.
+noop(HoverCardCss);
+
 const components = [
   FabHoverCardComponent,
   // FabExpandingCardComponent,

libs/fabric/src/lib/components/panel/panel.module.ts

@@ -4,9 +4,14 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as PanelCss from 'office-ui-fabric-react/lib-amd/components/Panel/Panel.scss';
 import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import { noop } from '../../utils/noop';
 import { FabPanelComponent } from './panel.component';
 
+// Dummy action to force PanelCss to load and not be tree-shaken away.
+noop(PanelCss);
+
 const components = [FabPanelComponent];
 
 @NgModule({

libs/fabric/src/lib/components/pickers/base-picker/base-picker.module.ts

@@ -4,7 +4,12 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as BasePickerCss from 'office-ui-fabric-react/lib-amd/components/pickers/BasePicker.scss';
 import { BasePicker } from 'office-ui-fabric-react/lib/pickers';
+import { noop } from '../../../utils/noop';
+
+// Dummy action to force BasePickerCss to load and not be tree-shaken away.
+noop(BasePickerCss);
 
 @NgModule({
   imports: [CommonModule],

libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.module.ts

@@ -4,9 +4,14 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as TagItemCss from 'office-ui-fabric-react/lib-amd/components/pickers/TagPicker/TagItem.scss';
+import { TagPicker } from 'office-ui-fabric-react/lib/components/pickers';
+import { noop } from '../../../utils/noop';
 import { FabBasePickerModule } from '../base-picker/base-picker.module';
 import { FabTagPickerComponent } from './tag-picker.component';
-import { TagPicker } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker';
+
+// Dummy action to force TagItemCss to load and not be tree-shaken away.
+noop(TagItemCss);
 
 const components = [FabTagPickerComponent];
 

libs/fabric/src/lib/components/tooltip/tooltip.module.ts

@@ -4,9 +4,13 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as TooltipHostCss from 'office-ui-fabric-react/lib-amd/components/Tooltip/TooltipHost.scss';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { noop } from '../../utils/noop';
 import { FabTooltipHostComponent } from './tooltip-host.component';
 
+// Dummy action to force TooltipHostCss to load and not be tree-shaken away.
+noop(TooltipHostCss);
 const components = [FabTooltipHostComponent];
 
 @NgModule({

libs/fabric/src/lib/utils/noop.ts

@@ -0,0 +1,6 @@
+/**
+ * Noop function - doesn't do anything
+ */
+export const noop = (...args: any[]) => {
+  args.forEach(Object.keys);
+};