feat(size-report): add proper size report check

.circleci/config.yml

@@ -12,6 +12,12 @@ references:
   - src/icons/PfIcons/
   js_deps_cache_key: &js_deps_cache_key
     js-deps-v{{.Environment.CACHE_VERSION}}-{{checksum "package-lock.json"}}
+  size_report_paths: &size_report_paths
+  - dist/size-report.json
+  size_report_cache_key: &size_report_cache_key
+    size-report-v{{.Environment.CACHE_VERSION}}-{{ .Branch }}
+  size_report_master_cache_key: &size_report_master_cache_key
+    size-report-v{{.Environment.CACHE_VERSION}}-master
   attach_workspace: &attach_workspace
     attach_workspace:
       at: ~/project
@@ -108,12 +114,24 @@ jobs:
     - run:
         name: Lint JS
         command: npm run lint:js
-    - run:
-        name: Lint CSS Size
-        command: npm run lint:size
+        when: always
     - run:
         name: Lint CSS
         command: npm run lint:css
+        when: always
+    - restore_cache:
+        keys:
+        - *size_report_master_cache_key
+    - run:
+        name: Lint CSS Size
+        command: .circleci/css-size-report/css-size-report.sh
+        when: always
+    - persist_to_workspace:
+        root: ~/project
+        paths: *size_report_paths
+    - save_cache:
+        paths: *size_report_paths
+        key: *size_report_cache_key
   deploy:
     docker:
     - image: circleci/node:10

.circleci/css-size-report/css-size-report.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+# A simple script that will check to see if the previous patternfly has been installed to .circleci/css-size-report/nodemodules.
+# this installtion is used to calculate size changes in css files..
+
+cd $(dirname $0)
+
+# log levels
+INFO="INFO"
+WARN="WARNING"
+ERR="ERROR"
+
+logMsg() {
+  local _msg=${1}
+  echo "${INFO}: ${_msg}"
+}
+
+logErr() {
+  local _msg=${1}
+  echo "${ERR}: ${_msg}"
+}
+
+setup() {
+  if [ ! -d "./node_modules/@patternfly/patternfly" ]; then
+    logMsg "setup previous version of patternfly for css comparisons"
+
+    if npm i -D @patternfly/patternfly; then
+      logMsg "setup ran successfully"
+    else
+      logErr "setup failed"
+      exit 1
+    fi
+
+  else
+    logMsg "setup already done"
+  fi
+}
+
+run() {
+  logMsg "generating css report differences"
+  if node sizeReport.js; then
+    logMsg "report ran successfully"
+  else
+    logErr "report failed"
+    exit 1
+  fi
+}
+
+## execute
+setup
+run

.circleci/css-size-report/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "tmp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "",
+  "devDependencies": {
+    "@patternfly/patternfly": "^2.56.3"
+  }
+}

.circleci/css-size-report/sizeReport.js

@@ -0,0 +1,118 @@
+const fs = require('fs');
+const glob = require('glob');
+const path = require('path');
+const Octokit = require('@octokit/rest');
+
+const octokit = new Octokit({ auth: process.env.GH_PR_TOKEN });
+
+const owner = process.env.CIRCLE_PROJECT_USERNAME; // patternfly
+const repo = process.env.CIRCLE_PROJECT_REPONAME;
+const prnum = process.env.CIRCLE_PR_NUMBER;
+
+const exitCode = 0;
+const results = {};
+// size of the previous version cee file being tested
+let prevResult;
+// percentage difference of css files
+let diff;
+// the number of files that have changed
+let totalFiles = 0;
+// the color of the result size value.
+let sizeCol = 'green';
+
+let html = '<table>';
+html += '<tr>';
+html += `<td>Name</td>`;
+html += `<td>Current(kb)</td>`;
+html += `<td>Previous(kb)</td>`;
+html += `<td>Diff %</td>`;
+html += '</tr>';
+
+// @todo add: 'dist/patternfly.css', 'dist/patternfly.min.css'
+glob
+  .sync('../../dist/components/**/*.css')
+  // .filter(file => prevResults[file])
+  .map(file => ({ file, size: fs.statSync(file).size }))
+  // .sort(by size)
+  .forEach(({ file, size }) => {
+    if (size >= 10000) {
+      sizeCol = '#E74C3C';
+    } else if (size > 8000 && size < 10000) {
+      sizeCol = '#F1C40F';
+    } else {
+      sizeCol = '#229954';
+    }
+    prevResult = glob
+      .sync(`node_modules/@patternfly/patternfly/**/${path.basename(file)}`)
+      .map(file => ({ file, size: fs.statSync(file).size }.size));
+
+    diff = size !== 0 ? Math.abs(((size - prevResult) / size) * 100).toPrecision(2) : 0;
+
+    if ( parseFloat(diff) !== parseFloat('0') ) {
+      totalFiles++;
+      html += '<tr>';
+      html += `<td>${path.basename(file)}</td>`; // Name
+      html += `<td><font color=${sizeCol}>${size}</font></td>`; // Current
+      html += `<td>${prevResult}</td>`; // Previous
+      if (diff > 0) {
+        html += `<td><font color='#E74C3C'>${diff}</font></td>`;
+      } else if (diff < 0) {
+        html += `<td><font color='#229954'>${diff}</font></td>`;
+      } else {
+        html += `<td>${diff}</td>`;
+      }
+      html += '<tr>';
+      results[file] = size;
+    }
+  });
+
+if ( totalFiles == 0) {
+  html += '<tr>';
+  html += `<td colspan="4">There are no changes in CSS file sizes</td>`
+  html += '<tr>';
+}
+
+html += '</table>';
+console.log(html);
+
+if (prnum) {
+  octokit.issues
+    .listComments({
+      owner,
+      repo,
+      issue_number: prnum
+    })
+    .then(res => res.data)
+    .then(comments => {
+      let commentBody = '';
+      const existingComment = comments.find(comment => comment.user.login === 'patternfly-build');
+      if (existingComment) {
+        commentBody += existingComment.body;
+      }
+
+      commentBody += '\n';
+      commentBody += html;
+
+      if (existingComment) {
+        octokit.issues
+          .updateComment({
+            owner,
+            repo,
+            comment_id: existingComment.id,
+            body: commentBody
+          })
+          .then(() => console.log('Updated comment!'));
+      } else {
+        octokit.issues
+          .createComment({
+            owner,
+            repo,
+            issue_number: prnum,
+            body: commentBody
+          })
+          .then(() => console.log('Created comment!'));
+      }
+    });
+}
+
+process.exit(exitCode);

gulpfile.js

@@ -301,29 +301,6 @@ function lintCSSComments() {
     });
 }
 
-function lintCSSSize(cb) {
-  const patternflyPath = path.resolve(__dirname, './dist/patternfly.css');
-  const patternflyMinPath = path.resolve(__dirname, './dist/patternfly.min.css');
-
-  const patternflySize = fs.statSync(patternflyPath).size;
-  const patternflyMinSize = fs.statSync(patternflyMinPath).size;
-  const errors = [];
-  // At time of writing is 609013
-  console.log(`patternfly.css is ${patternflySize / 1000}KB`);
-  if (patternflySize > 650000) {
-    errors.push(`patternfly.css is ${patternflySize / 1000}KB > 650KB`);
-  }
-  // At time of writing is 532807
-  console.log(`patternfly.min.css is ${patternflyMinSize / 1000}KB`);
-  if (patternflyMinSize > 600000) {
-    errors.push(`patternfly.min.css is ${patternflyMinSize / 1000}KB > 600KB`);
-  }
-  if (errors.length > 0) {
-    cb(errors.join('\n'));
-  }
-  cb();
-}
-
 module.exports = {
   build: series(clean, compileSASS, minifyCSS, pfIcons, copyFA, copySource),
   compileSASS,
@@ -338,6 +315,5 @@ module.exports = {
   copyAssets,
   lintCSSFunctions,
   lintCSSComments,
-  lintCSSSize,
-  lintCSS: parallel(lintCSSFunctions, lintCSSComments, lintCSSSize)
+  lintCSS: parallel(lintCSSFunctions, lintCSSComments)
 };