From a6fc15447cf0027bc8966982a21e488cfd485390 Mon Sep 17 00:00:00 2001
From: alyleui <alyleui@gmail.com>
Date: Sun, 24 Jun 2018 19:32:59 -0500
Subject: [PATCH] perf(flex): generate style only when the key is different

---
 package.json                                  |   4 +-
 .../flex-demo-one.component.html              |   4 +-
 .../responsive-demo-01.component.html         |   1 +
 .../responsive-demo-01.component.ts           |   2 +-
 src/lib/flex/flex.directive.spec.ts           |  26 +--
 src/lib/flex/flex.directive.ts                | 149 +++++++++++-------
 src/lib/responsive/tokens.ts                  |   4 +-
 yarn.lock                                     |  67 +++++---
 8 files changed, 164 insertions(+), 93 deletions(-)

diff --git a/package.json b/package.json
index e7254bc69..d02c398de 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^3.0.1",
+    "ng-packagr": "^4.0.0-rc.2",
     "protractor": "~5.3.0",
     "size-limit": "^0.17.0",
     "ts-node": "~5.0.1",
@@ -105,4 +105,4 @@
       "limit": "150 KB"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/app/components/flex-demo/flex-demo-one/flex-demo-one.component.html b/src/app/components/flex-demo/flex-demo-one/flex-demo-one.component.html
index 02caff502..e9a9fa421 100644
--- a/src/app/components/flex-demo/flex-demo-one/flex-demo-one.component.html
+++ b/src/app/components/flex-demo/flex-demo-one/flex-demo-one.component.html
@@ -1,10 +1,10 @@
-<div class="container" [fxDirection]="direction" [fxWrap]="wrap" [fxAlign]="[align, crossAlign, multiAlign]" color="rgba(0,0,0,.2)">
+<div class="container" [fxDirection]="direction" [fxWrap]="wrap" [fxAlign]="[align, crossAlign, multiAlign].join(' ')" color="rgba(0,0,0,.2)">
   <div class="item" bg="warn" color="auto" *ngFor="let item of items">
     <div>{{ item }}</div>
   </div>
 </div>
 
-<div [fxAlign]="['center']">[fxAlign]="{{ [align, crossAlign, multiAlign] | json }}"</div>
+<div fxAlign="center">[fxAlign]="{{ [align, crossAlign, multiAlign].join(' ') }}"</div>
 <div fxDisplay="inline">
   <ly-radio-group [(ngModel)]="align" fxDirection="column">
     <h3>Main Align</h3>
diff --git a/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.html b/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.html
index 0f32724a3..313774087 100644
--- a/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.html
+++ b/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.html
@@ -3,6 +3,7 @@
     <strong color="warn">{{ item.key }}: </strong>{{ item.mediaQuery }}
   </p>
 </div>
+code <div fx="['align:center:lg', 'align:between:xs']"></div>
 <!-- ···deprecated··· -->
 <!-- <p>Handset         : {{ responsive.observe('Handset') | async | json }}</p>
 <p>Tablet          : {{ responsive.observe('Tablet') | async | json }}</p>
diff --git a/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.ts b/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.ts
index 1a5beaf8e..35e5647c8 100644
--- a/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.ts
+++ b/src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.ts
@@ -13,7 +13,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 })
 export class ResponsiveDemo01Component implements OnDestroy {
   private _subscription: Subscription;
-  private queries: {key: string, mediaQuery: string}[] = [];
+  queries: {key: string, mediaQuery: string}[] = [];
   constructor(
     @Inject(LY_MEDIA_QUERIES) mediaQueries: { [key: string]: string; },
     public responsive: Responsive
diff --git a/src/lib/flex/flex.directive.spec.ts b/src/lib/flex/flex.directive.spec.ts
index 9daa67aa6..619946984 100644
--- a/src/lib/flex/flex.directive.spec.ts
+++ b/src/lib/flex/flex.directive.spec.ts
@@ -34,8 +34,8 @@ describe('LyFlex', () => {
     const computedStyleEl1 = getComputedStyle(element1);
     const computedStyleEl2 = getComputedStyle(element2);
     expect(element1.className.split(' ').length).toEqual(2);
-    expect(testComponent.items.first.fxAlign).toEqual([ 'center', 'center' ]);
-    expect(computedStyleEl1.justifyContent).toEqual('center');
+    expect(testComponent.items.first.fxAlign).toEqual('between center');
+    expect(computedStyleEl1.justifyContent).toEqual('space-between');
     expect(computedStyleEl1.display).toEqual('flex');
     expect(computedStyleEl1.alignItems).toEqual('center');
     expect(computedStyleEl1.alignContent).toEqual('center');
@@ -55,7 +55,13 @@ describe('LyFlex', () => {
     fixture.detectChanges();
 
     const testComponent = fixture.componentInstance;
-    expect(testComponent.fx.fxAlign).toEqual(`start stretch stretch`);
+    const element = fixture.debugElement.query(By.css('div')).nativeElement;
+    const computedStyleEl = getComputedStyle(element);
+    expect(testComponent.fx.fxAlign).toEqual(`start stretch`);
+    expect(computedStyleEl.justifyContent).toEqual('flex-start');
+    expect(computedStyleEl.display).toEqual('flex');
+    expect(computedStyleEl.alignItems).toEqual('stretch');
+    expect(computedStyleEl.alignContent).toEqual('stretch');
   });
 
   it('should set default `row wrap` on `fxFlow`', () => {
@@ -67,11 +73,10 @@ describe('LyFlex', () => {
     const computedStyle = getComputedStyle(element);
     expect(computedStyle.flexFlow).toEqual('row wrap');
     expect(testComponent.fx.fxFlow).toEqual('row wrap');
-    testComponent.fx.fxFlow = 'row wrap';
     testComponent.fx.fxFlow = 'row nowrap';
     expect(testComponent.fx.fxFlow).toEqual('row nowrap');
-    testComponent.fx.fxFlow = ['row', 'nowrap'];
-    expect(testComponent.fx.fxFlow).toEqual(['row', 'nowrap']);
+    testComponent.fx.fxFlow = 'row nowrap';
+    expect(testComponent.fx.fxFlow).toEqual('row nowrap');
 
   });
 
@@ -82,10 +87,10 @@ describe('LyFlex', () => {
     const testComponent = fixture.componentInstance;
     const element = fixture.debugElement.query(By.css('div')).nativeElement;
     const computedStyle = getComputedStyle(element);
-    expect(computedStyle.display).toEqual('inline-flex');
-    expect(testComponent.fx.fxDisplay).toEqual('inline');
-    testComponent.fx.fxDisplay = 'inline';
     expect(testComponent.fx.fxDisplay).toEqual('inline');
+    expect(computedStyle.display).toEqual('inline-flex');
+    // testComponent.fx.fxDisplay = 'inline';
+    // expect(testComponent.fx.fxDisplay).toEqual('inline');
   });
 
   it('should set default `row` on `fxDirection`', () => {
@@ -112,12 +117,11 @@ describe('LyFlex', () => {
     const computedStyle = getComputedStyle(element);
     expect(computedStyle.flexWrap).toEqual('wrap');
     expect(testComponent.fx.fxWrap).toEqual('wrap');
-    testComponent.fx.fxWrap = 'wrap';
   });
 });
 
 @Component({template: `
-  <div a [fxAlign]="['center', 'center']"></div>
+  <div a fxAlign="between center"></div>
   <div b fxAlign="center center"></div>
 `})
 class FlexAlign {
diff --git a/src/lib/flex/flex.directive.ts b/src/lib/flex/flex.directive.ts
index 28a666a49..16f972a84 100644
--- a/src/lib/flex/flex.directive.ts
+++ b/src/lib/flex/flex.directive.ts
@@ -24,15 +24,16 @@ enum __align {
 
 export type FxDirection = 'row' | 'rowReverse' | 'column' | 'columnReverse' | null;
 export type FxWrap = 'nowrap' | 'wrap' | 'wrap-reverse' | null;
-export type FxFlow = [FxDirection, FxWrap] | string;
+/** [FxDirection, FxWrap] */
+export type FxFlow = string;
 export type FxJustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | null;
 export type FxAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | null;
 export type FxAlignContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch' | null;
 export type FxAlignItemsAndContent = 'start' | 'center' | 'end' | 'stretch' | null;
 /**
- * TODO: remove array type, FxAlign = string;
+ * [FxJustifyContent] | [FxJustifyContent, FxAlignItemsAndContent] | [FxJustifyContent, FxAlignItems, FxAlignContent]
  */
-export type FxAlign = [FxJustifyContent] | [FxJustifyContent, FxAlignItemsAndContent] | [FxJustifyContent, FxAlignItems, FxAlignContent] | string;
+export type FxAlign = string;
 
 @Directive({
   // tslint:disable-next-line:directive-selector
@@ -42,25 +43,28 @@ export type FxAlign = [FxJustifyContent] | [FxJustifyContent, FxAlignItemsAndCon
 export class LyFlex implements OnChanges {
   private _fxDisplay: 'flex' | 'inline';
   private fxDisplayClass: string;
-  private _fxFlow: FxFlow; // <FxDirection> + <FxWrap>
+
+  /** <FxDirection> + <FxWrap> */
+  private _fxFlow: FxFlow;
   private fxFlowClass: string;
+
   private _fxAlign: FxAlign;
   private fxAlignClass: string;
+
   private _fxDirection: FxDirection;
   private fxDirectionClass: string;
+
   private _fxWrap: FxWrap;
   private fxWrapClass: string;
-  private _currentClassname: string;
 
   @Input()
-  set fx(val: string) {
-    // code
+  set fx(val: string[]) {
+    // code <div fx="['align:center:lg', 'align:between:xs']"></div>
   }
   @Input()
   set fxDisplay(val: 'flex' | 'inline') {
-    if (this._fxDisplay !== val) {
-      this._fxDisplay = val || 'flex';
-      const newClass = this._createDisplayClass(this._fxDisplay);
+    if (this.fxDisplay !== val) {
+      const newClass = this._createDisplayClass(val);
       this.coreTheme.updateClassName(this.elementRef.nativeElement, this.renderer, newClass, this.fxDisplayClass);
       this.fxDisplayClass = newClass;
     }
@@ -71,17 +75,8 @@ export class LyFlex implements OnChanges {
 
   @Input()
   set fxFlow(val: FxFlow) {
-    if (this._fxFlow !== val) {
-      const newVal = val || 'row wrap';
-      const key = typeof val === 'string' ? newVal as string : `${val[0]} ${val[1]}`;
-      this._fxFlow = val || key;
-
-      /** create Style */
-      const newClass = this.coreTheme.setUpStyle(key,
-        () => (
-          `flex-flow:${key}`
-        )
-      );
+    if (this.fxFlow !== val) {
+      const newClass = this._createFlowClass(val);
       /** Add class */
       this.coreTheme.updateClassName(this.elementRef.nativeElement, this.renderer, newClass, this.fxFlowClass);
       this.fxFlowClass = newClass;
@@ -93,23 +88,10 @@ export class LyFlex implements OnChanges {
 
   @Input()
   set fxAlign(val: FxAlign) {
-    if (this._fxAlign !== val) {
-      const arrayVal = typeof val === 'string' ? val.split(' ') : val;
-
-      const justifyContent = arrayVal[0] || 'start';
-      const alignItems = arrayVal[1] || 'stretch';
-      const alignContent = arrayVal[2];
-
-      const key = !!val && typeof val === 'string' ? val : `${justifyContent} ${alignItems} ${alignContent || alignItems}`;
-      this._fxAlign = val || key;
+    if (this.fxAlign !== val) {
       /** create Style */
-      const newClass = this.coreTheme.setUpStyle(key, {
-        '': () => (
-        `justify-content:${__align[justifyContent]};` +
-        `align-items:${__align[alignItems]};` +
-        `align-content:${__align[alignContent || alignItems]};`
-        )
-      });
+      const newClass = this._createAlignClass(val);
+
       /** Add class */
       this.coreTheme.updateClassName(this.elementRef.nativeElement, this.renderer, newClass, this.fxAlignClass);
       this.fxAlignClass = newClass;
@@ -125,11 +107,7 @@ export class LyFlex implements OnChanges {
       const newKey = val || 'row';
       this._fxDirection = newKey;
       /** create Style */
-      const newClass = this.coreTheme.setUpStyle(newKey, {
-        '': () => (
-          `flex-direction:${__align[newKey]};`
-        )
-      });
+      const newClass = this._createDirectionClass(val);
       this.coreTheme.updateClassName(this.elementRef.nativeElement, this.renderer, newClass, this.fxDirectionClass);
       this.fxDirectionClass = newClass;
     }
@@ -140,15 +118,9 @@ export class LyFlex implements OnChanges {
 
   @Input()
   set fxWrap(val: FxWrap) {
-    if (this._fxWrap !== val) {
-      const newKey = val || 'wrap';
-      this._fxWrap = newKey;
+    if (this.fxWrap !== val) {
       /** create Style */
-      const newClass = this.coreTheme.setUpStyle(val, {
-        '': () => (
-          `flex-wrap:${__align[newKey]};`
-        )
-      });
+      const newClass = this._createWrapClass(val);
       this.coreTheme.updateClassName(this.elementRef.nativeElement, this.renderer, newClass, this.fxWrapClass);
       this.fxWrapClass = newClass;
     }
@@ -164,19 +136,82 @@ export class LyFlex implements OnChanges {
   ) { }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (!this.fxDisplayClass) {
+    if (!this._fxDisplay && !this.fxDisplayClass) {
       /** Set default display */
       this.fxDisplay = null;
     }
   }
 
-  private _createDisplayClass(val: 'flex' | 'inline' = 'flex') {
-    return this.coreTheme.setUpStyle(
-      `k-fx-display-${val}`,
-        () => {
-          return val === 'inline' ? `display:inline-flex;` : `display:flex;`;
-        }
+  private _createDisplayClass(val: 'flex' | 'inline') {
+    this._checkVal(val);
+
+    this._fxDisplay = val || 'flex';
+    return this.coreTheme.setUpStyle(`k-fx-display:${this.fxDisplay}`,
+      () => (
+        val === 'inline' ? `display:inline-flex;` : `display:flex;`
+      )
+    );
+  }
+
+  private _createFlowClass(val: string) {
+    this._checkVal(val);
+
+    this._fxFlow = val || 'row wrap';
+
+    /** create Style */
+    return this.coreTheme.setUpStyle(`k-fx-flow:${this.fxFlow}`,
+      () => `flex-flow:${this.fxFlow}`
+    );
+  }
+
+  private _createAlignClass(val: string) {
+    this._checkVal(val);
+
+    this._fxAlign = val || 'start stretch';
+    /** create Style */
+    return this.coreTheme.setUpStyle(`k-fx-align:${this.fxAlign}`,
+      () => {
+        const arrayVal = this.fxAlign.split(' ');
+
+        const justifyContent = arrayVal[0] || 'start';
+        const alignItems = arrayVal[1] || 'stretch';
+        const alignContent = arrayVal[2];
+        return (
+          `justify-content:${__align[justifyContent]};` +
+          `align-items:${__align[alignItems]};` +
+          `align-content:${__align[alignContent || alignItems]};`
+        );
+      }
     );
   }
 
+  private _createDirectionClass(val: FxDirection) {
+
+    this._fxDirection = val || 'row';
+    /** create Style */
+    return this.coreTheme.setUpStyle(`k-fx-direction:${this.fxDirection}`, {
+      '': () => (
+        `flex-direction:${__align[this.fxDirection]};`
+      )
+    });
+  }
+
+  private _createWrapClass(val: FxWrap) {
+    this._fxWrap = val || 'wrap';
+    /** create Style */
+    return this.coreTheme.setUpStyle(`k-fx-wrap:${this.fxWrap}`, {
+      '': () => (
+        `flex-wrap:${__align[this.fxWrap]};`
+      )
+    });
+  }
+
+  /** Check if value is string else emit error */
+  private _checkVal(val: any) {
+    if (isDevMode() && Array.isArray(val)) {
+      console.warn(val, this.elementRef, `\n🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋🠋`);
+      throw new Error(`value: '${val}' is not a string in`);
+    }
+  }
+
 }
diff --git a/src/lib/responsive/tokens.ts b/src/lib/responsive/tokens.ts
index e5991a0b7..33c5d46ff 100644
--- a/src/lib/responsive/tokens.ts
+++ b/src/lib/responsive/tokens.ts
@@ -1,3 +1,5 @@
 import { InjectionToken } from '@angular/core';
 
-export const LY_MEDIA_QUERIES = new InjectionToken<any>('ly·media·queries');
+export const LY_MEDIA_QUERIES = new InjectionToken<LyMediaQueries>('ly·media·queries');
+
+export interface LyMediaQueries { [key: string]: string; }
diff --git a/yarn.lock b/yarn.lock
index 314df5053..5b9b7646d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1686,7 +1686,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@4.1.x, clean-css@^4.1.11, clean-css@^4.x:
+clean-css@4.1.x, clean-css@^4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
   dependencies:
@@ -3472,6 +3472,12 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  dependencies:
+    locate-path "^3.0.0"
+
 firebase-tools@^3.18.4:
   version "3.18.4"
   resolved "https://registry.yarnpkg.com/firebase-tools/-/firebase-tools-3.18.4.tgz#49fb40e1e1a7c977921b7b3ece12da8cdb139550"
@@ -5545,6 +5551,13 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
 lodash._isnative@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._isnative/-/lodash._isnative-2.4.1.tgz#3ea6404b784a7be836c7b57580e1cdf79b14832c"
@@ -6142,14 +6155,16 @@ next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
-ng-packagr@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-3.0.1.tgz#16f8c108d06f8dfcfb6c90c250c7b8a46889468c"
+ng-packagr@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-4.0.0-rc.2.tgz#350e3084190a4f7394811b1e0c9b8fb8e7576955"
   dependencies:
     "@ngtools/json-schema" "^1.1.0"
     autoprefixer "^8.0.0"
     browserslist "^3.0.0"
     chalk "^2.3.1"
+    chokidar "^2.0.3"
+    clean-css "^4.1.11"
     commander "^2.12.0"
     cpx "^1.5.0"
     fs-extra "^6.0.0"
@@ -6159,16 +6174,14 @@ ng-packagr@^3.0.1:
     node-sass "^4.5.3"
     node-sass-tilde-importer "^1.0.0"
     postcss "^6.0.2"
-    postcss-clean "^1.1.0"
     postcss-url "^7.3.0"
-    read-pkg-up "^3.0.0"
+    read-pkg-up "^4.0.0"
     rimraf "^2.6.1"
-    rollup "^0.59.0"
+    rollup "^0.60.0"
     rollup-plugin-commonjs "^9.1.3"
     rollup-plugin-node-resolve "^3.0.0"
     rollup-plugin-sourcemaps "^0.4.2"
     rxjs "^6.0.0"
-    strip-bom "^3.0.0"
     stylus "^0.54.5"
     uglify-js "^3.0.7"
     update-notifier "^2.3.0"
@@ -6612,12 +6625,24 @@ p-limit@^1.0.0, p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
+p-limit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
+  dependencies:
+    p-try "^2.0.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
   dependencies:
     p-limit "^1.1.0"
 
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  dependencies:
+    p-limit "^2.0.0"
+
 p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
@@ -6632,6 +6657,10 @@ p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
 
+p-try@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+
 package-json@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-1.2.0.tgz#c8ecac094227cdf76a316874ed05e27cc939a0e0"
@@ -6897,13 +6926,6 @@ postcss-calc@^5.2.0:
     postcss-message-helpers "^2.0.0"
     reduce-css-calc "^1.2.6"
 
-postcss-clean@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-clean/-/postcss-clean-1.1.0.tgz#c2d61d5d8caf19a585adba16897726c2674c4207"
-  dependencies:
-    clean-css "^4.x"
-    postcss "^6.x"
-
 postcss-colormin@^2.1.8:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
@@ -7185,7 +7207,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.22, postcss@^6.x:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.22:
   version "6.0.22"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
   dependencies:
@@ -7475,6 +7497,13 @@ read-pkg-up@^3.0.0:
     find-up "^2.0.0"
     read-pkg "^3.0.0"
 
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
 read-pkg@^1.0.0, read-pkg@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -7854,9 +7883,9 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
-rollup@^0.59.0:
-  version "0.59.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.59.4.tgz#6f80f7017c22667ff1bf3e62adf8624a44cc44aa"
+rollup@^0.60.0:
+  version "0.60.7"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.60.7.tgz#2b62ef9306f719b1ab85a7814b3e6596ac51fae8"
   dependencies:
     "@types/estree" "0.0.39"
     "@types/node" "*"