@patternfly/react-styles 2.3.6 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.4.0 (2019-03-18)
+
+
+### Bug Fixes
+
+* **Dropdown:** fix d.ts file to make props optional ([#1593](https://github.com/patternfly/patternfly-react/issues/1593)) ([a2c6645](https://github.com/patternfly/patternfly-react/commit/a2c6645)), closes [#1584](https://github.com/patternfly/patternfly-react/issues/1584)
+
+
+### Features
+
+* **umd:** add umd for styles, tokens, and icons ([#1599](https://github.com/patternfly/patternfly-react/issues/1599)) ([4ca1a5c](https://github.com/patternfly/patternfly-react/commit/4ca1a5c))
+
+
+
+
+
+## 2.3.9 (2019-03-14)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 2.3.8 (2019-03-13)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 2.3.7 (2019-03-11)
+
+
+### Bug Fixes
+
+* **build:** Support running the test suite under Windows ([#1255](https://github.com/patternfly/patternfly-react/issues/1255)) [ci skip] ([851756e](https://github.com/patternfly/patternfly-react/commit/851756e))
+* **tsconfig:** avatar tsx change ([#1535](https://github.com/patternfly/patternfly-react/issues/1535)) ([8107f5c](https://github.com/patternfly/patternfly-react/commit/8107f5c))
+
+
+
+
+
 ## 2.3.6 (2019-03-08)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/dist/esm/build/util.js

@@ -38,7 +38,7 @@ export function writeCSSJSFile(rootPath, originalPath, destinationPath, contents
 
 export function getRelativeImportPath(from, to) {
   var parsedTo = path.parse(to);
-  var newImportPath = path.normalize(path.join(relative(from, parsedTo.dir), parsedTo.base).replace(/\\/g, ''));
+  var newImportPath = path.normalize(path.join(relative(from, parsedTo.dir), parsedTo.base));
   return newImportPath.startsWith('.') ? newImportPath : './' + newImportPath;
 }
 

package/dist/js/StyleSheet.d.ts

@@ -1,5 +1,8 @@
 import { StyleDeclarationStatic } from './utils';
-import { cx, Interpolation } from 'emotion';
+import { Interpolation } from 'emotion';
+import { ClassNameArg } from 'create-emotion';
+
+type emotionCss = (...classNames: Array<ClassNameArg | StyleDeclarationStatic>) => string;
 
 export interface StyleSheetStatic {
   parse(cssString: string): StyleSheetValueStatic;
@@ -15,4 +18,4 @@ export type StyleSheetValueStatic = {
 
 export const StyleSheet: StyleSheetStatic;
 
-export const css: typeof cx;
+export const css: emotionCss;

package/dist/js/build/util.js

@@ -63,7 +63,7 @@ function writeCSSJSFile(rootPath, originalPath, destinationPath, contents) {
 
 function getRelativeImportPath(from, to) {
   var parsedTo = _path2.default.parse(to);
-  var newImportPath = _path2.default.normalize(_path2.default.join((0, _relative2.default)(from, parsedTo.dir), parsedTo.base).replace(/\\/g, ''));
+  var newImportPath = _path2.default.normalize(_path2.default.join((0, _relative2.default)(from, parsedTo.dir), parsedTo.base));
   return newImportPath.startsWith('.') ? newImportPath : './' + newImportPath;
 }
 

package/dist/umd/StyleSheet.js

@@ -0,0 +1,98 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'emotion', './utils'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('emotion'), require('./utils'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.emotion, global.utils);
+    global.StyleSheet = mod.exports;
+  }
+})(this, function (exports, _emotion, _utils) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.StyleSheet = undefined;
+  exports.css = css;
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }return target;
+  };
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
+    } else {
+      obj[key] = value;
+    }return obj;
+  }
+
+  var StyleSheet = exports.StyleSheet = {
+    create: function create(styleObj) {
+      var keys = Object.keys(styleObj);
+      if (keys.length > 0) {
+        return keys.reduce(function (prev, key) {
+          return _extends({}, prev, _defineProperty({}, key, (0, _emotion.css)(styleObj[key])));
+        }, {});
+      }
+      return (0, _emotion.css)(styleObj);
+    },
+    parse: function parse(input) {
+      var classes = (0, _utils.getCSSClasses)(input);
+      if (!classes) {
+        return {};
+      }
+
+      return classes.reduce(function (map, className) {
+        var key = (0, _utils.formatClassName)(className);
+        if (map[key]) {
+          return map;
+        }
+
+        var value = (0, _utils.createStyleDeclaration)(className, input);
+
+        if ((0, _utils.isModifier)(className)) {
+          map.modifiers[key] = value;
+        } else {
+          map[key] = value;
+        }
+
+        return map;
+      }, {
+        modifiers: {},
+        inject: function inject() {
+          return (0, _emotion.injectGlobal)(input);
+        },
+        raw: input
+      });
+    }
+  };
+
+  function css() {
+    var filteredStyles = [];
+
+    for (var _len = arguments.length, styles = Array(_len), _key = 0; _key < _len; _key++) {
+      styles[_key] = arguments[_key];
+    }
+
+    styles.forEach(function (style) {
+      if ((0, _utils.isValidStyleDeclaration)(style)) {
+        style.__inject();
+        filteredStyles.push((0, _utils.getClassName)(style));
+        return;
+      }
+      filteredStyles.push(style);
+    });
+
+    return _emotion.cx.apply(undefined, filteredStyles);
+  }
+});

package/dist/umd/build/babel/index.js

@@ -0,0 +1,31 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './plugin'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./plugin'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.plugin);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _plugin) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, 'default', {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_plugin).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});

package/dist/umd/build/babel/plugin.js

@@ -0,0 +1,167 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', '@babel/helper-plugin-utils', 'path', 'resolve-from', '../util', '../../StyleSheet'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('@babel/helper-plugin-utils'), require('path'), require('resolve-from'), require('../util'), require('../../StyleSheet'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.helperPluginUtils, global.path, global.resolveFrom, global.util, global.StyleSheet);
+    global.plugin = mod.exports;
+  }
+})(this, function (exports, _helperPluginUtils, _path, _resolveFrom, _util, _StyleSheet) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _resolveFrom2 = _interopRequireDefault(_resolveFrom);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }return target;
+  };
+
+  /* eslint-disable no-case-declarations */
+
+
+  var defaultOptions = {
+    extensions: ['.css'],
+    srcDir: './src',
+    useModules: false
+  };
+
+  exports.default = (0, _helperPluginUtils.declare)(function (_ref) {
+    var t = _ref.types;
+
+    var outputFiles = new Set();
+
+    function getVariableName(path) {
+      if (path.node.specifiers && path.node.specifiers[0] && path.node.specifiers[0].local) {
+        return path.node.specifiers[0].local.name;
+      }
+      return null;
+    }
+
+    function getLastImportIndex(path) {
+      var lastImportIndex = 0;
+      path.container.forEach(function (p, i) {
+        if (t.isImportDeclaration(p)) {
+          lastImportIndex = i;
+        }
+      });
+      return lastImportIndex;
+    }
+
+    function getPackageImportIndex(path) {
+      return path.container.findIndex(function (p) {
+        return t.isImportDeclaration(p) && p.source.value === _util.packageName;
+      });
+    }
+
+    function createStyleSheetImport(path) {
+      return t.importDeclaration([t.importSpecifier(t.identifier('__PF__' + _util.styleSheetToken), t.identifier(_util.styleSheetToken))], t.stringLiteral(_util.packageName));
+    }
+
+    function validateReferences(referencePaths, styleObject) {
+      var nestedProperties = {
+        modifier: 'modifiers'
+      };
+      referencePaths.forEach(function (rp) {
+        if (!t.isMemberExpression(rp.parentPath.node)) {
+          return;
+        }
+        var propName = rp.parentPath.node.property.name;
+        if (Object.values(nestedProperties).includes(propName)) {
+          var nestedNode = rp.parentPath.parentPath.node;
+          if (!t.isMemberExpression(nestedNode)) {
+            return;
+          }
+          var nestedPropertyName = nestedNode.property.name;
+          if (!styleObject[propName][nestedPropertyName]) {
+            throw rp.buildCodeFrameError(nestedPropertyName + ' is not a valid ' + (propName === nestedProperties.modifier ? 'modifier' : 'property'));
+          }
+        } else if (!styleObject[propName]) {
+          throw rp.buildCodeFrameError(propName + ' does not exist');
+        }
+      });
+    }
+
+    return {
+      visitor: {
+        ImportDeclaration: function ImportDeclaration(path, _ref2) {
+          var file = _ref2.file,
+              _ref2$opts = _ref2.opts,
+              opts = _ref2$opts === undefined ? {} : _ref2$opts;
+
+          var options = _extends({}, defaultOptions, opts);
+          var value = path.node.source.value;
+
+          var ext = (0, _path.extname)(value);
+          if (options.extensions.includes(ext) && getVariableName(path)) {
+            var rootPath = file.opts.sourceRoot || process.cwd();
+            var scriptDirectory = (0, _path.dirname)((0, _path.resolve)(file.opts.filename));
+            var cssfilePath = (0, _resolveFrom2.default)(scriptDirectory, value);
+            var cssString = (0, _util.getCSS)(cssfilePath);
+            var varName = getVariableName(path);
+            var bindings = path.scope.bindings;
+
+            var styleObject = _StyleSheet.StyleSheet.parse(cssString);
+
+            validateReferences(bindings[varName].referencePaths, styleObject);
+
+            if (!options.outDir) {
+              var lastImportIndex = getLastImportIndex(path);
+              var pfStylesImportIndex = getPackageImportIndex(path);
+
+              if (pfStylesImportIndex === -1) {
+                path.getSibling(lastImportIndex).insertAfter(createStyleSheetImport());
+                lastImportIndex++;
+                pfStylesImportIndex = lastImportIndex;
+              }
+
+              var pfStylesImportPath = path.getSibling(pfStylesImportIndex);
+              var styleSheetSpecifier = pfStylesImportPath.node.specifiers.find(function (s) {
+                return t.isImportSpecifier(s) && s.imported.name === _util.styleSheetToken;
+              });
+              if (!styleSheetSpecifier) {
+                styleSheetSpecifier = t.importSpecifier(t.identifier('__PF__' + _util.styleSheetToken), t.identifier(_util.styleSheetToken));
+                pfStylesImportPath.node.specifiers.push(styleSheetSpecifier);
+              }
+              var varDeclaration = t.variableDeclaration('const', [t.variableDeclarator(t.identifier(varName), t.callExpression(t.memberExpression(t.identifier(styleSheetSpecifier.local.name), t.identifier('parse')), [t.stringLiteral(cssString)]))]);
+              path.getSibling(lastImportIndex).insertAfter(varDeclaration);
+              path.remove();
+            } else {
+              var srcDir = options.srcDir,
+                  outDir = options.outDir;
+
+              var cssOutputPath = (0, _util.getCSSOutputPath)(outDir, rootPath, cssfilePath);
+
+              var scriptOutputPath = (0, _path.resolve)(file.opts.filename).replace((0, _path.resolve)(srcDir), outDir);
+
+              if (!outputFiles.has(cssOutputPath)) {
+                (0, _util.writeCSSJSFile)(rootPath, cssfilePath, cssOutputPath, (0, _util.cssToJS)(cssString, options.useModules));
+                outputFiles.add(cssOutputPath);
+              }
+
+              path.node.source.value = (0, _util.getRelativeImportPath)(scriptOutputPath, cssOutputPath);
+            }
+          }
+        }
+      }
+    };
+  });
+});

package/dist/umd/build/jest/snapshot-serializer/cssPropertyOverrides.js

@@ -0,0 +1,71 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'cssstyle', 'camel-case'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('cssstyle'), require('camel-case'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.cssstyle, global.camelCase);
+    global.cssPropertyOverrides = mod.exports;
+  }
+})(this, function (exports, _cssstyle, _camelCase) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.addOverrides = addOverrides;
+
+  var _camelCase2 = _interopRequireDefault(_camelCase);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }return target;
+  };
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
+    } else {
+      obj[key] = value;
+    }return obj;
+  }
+
+  var properties = ['grid', 'grid-area', 'grid-auto-columns', 'grid-auto-flow', 'grid-auto-rows', 'grid-column', 'grid-column-end', 'grid-column-gap', 'grid-column-start', 'grid-gap', 'grid-row', 'grid-row-end', 'grid-row-gap', 'grid-row-start', 'grid-template', 'grid-template-areas', 'grid-template-columns', 'grid-template-rows'];
+
+  function createOverride(key) {
+    return {
+      set: function set(v) {
+        this._setProperty(key, v);
+      },
+      get: function get() {
+        return this.getPropertyValue(key);
+      },
+
+      enumerable: true,
+      configurable: true
+    };
+  }
+
+  function addOverrides() {
+    var overrides = properties.reduce(function (acc, property) {
+      var _extends2;
+
+      return _extends({}, acc, (_extends2 = {}, _defineProperty(_extends2, property, createOverride(property)), _defineProperty(_extends2, (0, _camelCase2.default)(property), createOverride(property)), _extends2));
+    }, {});
+    Object.defineProperties(_cssstyle.CSSStyleDeclaration.prototype, overrides);
+  }
+});

package/dist/umd/build/jest/snapshot-serializer/cssUtils.js

@@ -0,0 +1,161 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'css', 'jsdom'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('css'), require('jsdom'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.css, global.jsdom);
+    global.cssUtils = mod.exports;
+  }
+})(this, function (exports, _css, _jsdom) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getStyles = exports.getSelectors = undefined;
+
+  var css = _interopRequireWildcard(_css);
+
+  var jsdom = _interopRequireWildcard(_jsdom);
+
+  function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+      return obj;
+    } else {
+      var newObj = {};
+
+      if (obj != null) {
+        for (var key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
+        }
+      }
+
+      newObj.default = obj;
+      return newObj;
+    }
+  }
+
+  function _toConsumableArray(arr) {
+    if (Array.isArray(arr)) {
+      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+        arr2[i] = arr[i];
+      }return arr2;
+    } else {
+      return Array.from(arr);
+    }
+  }
+
+  var JSDOM = jsdom.JSDOM;
+
+  function getSelectors(nodes) {
+    return nodes.reduce(function (selectors, node) {
+      var props = typeof node.props === 'function' ? node.props() : node.props;
+      return [].concat(_toConsumableArray(selectors), [getSelectorsFromProps(props)]);
+    }, []);
+  }
+
+  function getSelectorsFromProps() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    var className = props.className || props.class;
+    if (className) {
+      return className.toString().split(' ').map(function (cn) {
+        return '.' + cn;
+      });
+    }
+    return [];
+  }
+
+  function componentToHex(c) {
+    var hex = c.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }
+
+  function rgbToHex(r, g, b) {
+    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+  }
+
+  function getComputedStyles(classNames, cssStr) {
+    var dom = new JSDOM('<!DOCTYPE html>\n      <head><style>' + cssStr + '</style></head>\n      <body><div class="' + classNames + '"></div>\n      </body>');
+    var cs = dom.window.getComputedStyle(dom.window.document.body.children[0]);
+    var values = {};
+    for (var i = 0; i < cs.length; i++) {
+      var key = cs[i];
+      var value = cs.getPropertyValue(key).replace(/rgb\(([\d|,|\s]+)\)/g, function (full, match) {
+        return rgbToHex.apply(undefined, _toConsumableArray(match.split(',').map(function (n) {
+          return parseInt(n, 10);
+        })));
+      });
+      values[key] = value;
+    }
+    return values;
+  }
+
+  function getStylesAST(bufferedStyles) {
+    var globalCSS = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+    var ast = css.parse(globalCSS + '\n' + bufferedStyles);
+    var vars = {};
+    var getVarValue = function getVarValue(value) {
+      return value.replace(/var\(([\w|-]*)\)/g, function (full, match) {
+        return vars[match];
+      });
+    };
+    ast.stylesheet.rules = ast.stylesheet.rules.map(function (rule) {
+      if (rule.type === 'rule') {
+        rule.declarations = rule.declarations.map(function (decl) {
+          if (decl.type === 'declaration') {
+            var property = decl.property,
+                value = decl.value;
+
+            if (property.startsWith('--')) {
+              vars[property] = getVarValue(value);
+            }
+            decl.value = getVarValue(value);
+          }
+          return decl;
+        });
+      }
+      return rule;
+    });
+    return ast;
+  }
+
+  function formatComputedStyles(nodeSelectors, computedStyles) {
+    var selector = nodeSelectors.join('');
+    var cssString = selector + ' {\n    ' + Object.keys(computedStyles).map(function (k) {
+      return k + ': ' + computedStyles[k] + ';';
+    }).join('\n') + '\n  }';
+    return css.stringify(css.parse(cssString));
+  }
+
+  function getStyles(nodeSelectors, insertedStyles, globalCSS) {
+    if (!nodeSelectors.length) {
+      return '';
+    }
+    var ast = getStylesAST(insertedStyles, globalCSS);
+    return nodeSelectors.reduce(function (acc, sel) {
+      if (!sel.length) {
+        return acc;
+      }
+
+      var re = new RegExp('(' + sel.join('|') + ')', 'g');
+      if (!re.test(insertedStyles)) {
+        return acc;
+      }
+
+      var computedStyles = getComputedStyles(sel.map(function (s) {
+        return s.replace('.', '');
+      }).join(' '), css.stringify(ast));
+
+      return [].concat(_toConsumableArray(acc), [formatComputedStyles(sel, computedStyles)]);
+    }, []).join('\n');
+  }
+
+  exports.getSelectors = getSelectors;
+  exports.getStyles = getStyles;
+});

package/dist/umd/build/jest/snapshot-serializer/index.js

@@ -0,0 +1,37 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './serializer'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./serializer'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.serializer);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _serializer) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, 'default', {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_serializer).default;
+    }
+  });
+  Object.defineProperty(exports, 'createSerializer', {
+    enumerable: true,
+    get: function () {
+      return _serializer.createSerializer;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});

package/dist/umd/build/jest/snapshot-serializer/reactUtils.js

@@ -0,0 +1,51 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.reactUtils = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  };
+
+  var _typeof = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
+    return typeof obj === "undefined" ? "undefined" : _typeof2(obj);
+  } : function (obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof2(obj);
+  };
+
+  function getNodes(node) {
+    var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+    if (node.children) {
+      var children = typeof node.children === 'function' ? node.children() : node.children;
+
+      children.forEach(function (child) {
+        return getNodes(child, nodes);
+      });
+    }
+
+    if ((typeof node === 'undefined' ? 'undefined' : _typeof(node)) === 'object') {
+      nodes.push(node);
+    }
+
+    return nodes;
+  }
+
+  exports.getNodes = getNodes;
+});

package/dist/umd/build/jest/snapshot-serializer/serializer.js

@@ -0,0 +1,52 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './cssUtils', './reactUtils', '../../../utils', './cssPropertyOverrides'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./cssUtils'), require('./reactUtils'), require('../../../utils'), require('./cssPropertyOverrides'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.cssUtils, global.reactUtils, global.utils, global.cssPropertyOverrides);
+    global.serializer = mod.exports;
+  }
+})(this, function (exports, _cssUtils, _reactUtils, _utils, _cssPropertyOverrides) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.createSerializer = createSerializer;
+  function createSerializer() {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref$globalCSS = _ref.globalCSS,
+        globalCSS = _ref$globalCSS === undefined ? '' : _ref$globalCSS;
+
+    (0, _cssPropertyOverrides.addOverrides)();
+    function test(val) {
+      return val && !val.withStyles && val.$$typeof === Symbol.for('react.test.json');
+    }
+
+    function print(val, printer) {
+      var nodes = (0, _reactUtils.getNodes)(val);
+      nodes.forEach(function (node) {
+        node.withStyles = true;
+      });
+
+      var selectors = (0, _cssUtils.getSelectors)(nodes);
+      var styles = (0, _cssUtils.getStyles)(selectors, (0, _utils.getInsertedStyles)().join(''), globalCSS);
+      var code = printer(val);
+      if (styles) {
+        return styles + '\n\n' + code;
+      }
+      return code;
+    }
+
+    return {
+      test: test,
+      print: print
+    };
+  }
+
+  exports.default = createSerializer();
+});

package/dist/umd/build/jest/transform.js

@@ -0,0 +1,35 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'fbjs-scripts/jest/createCacheKeyFunction', '../util'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('fbjs-scripts/jest/createCacheKeyFunction'), require('../util'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.createCacheKeyFunction, global.util);
+    global.transform = mod.exports;
+  }
+})(this, function (exports, _createCacheKeyFunction, _util) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getCacheKey = undefined;
+  exports.process = process;
+
+  var _createCacheKeyFunction2 = _interopRequireDefault(_createCacheKeyFunction);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  function process(src) {
+    return (0, _util.cssToJS)((0, _util.minifyCSS)(src), false);
+  }
+
+  var getCacheKey = exports.getCacheKey = (0, _createCacheKeyFunction2.default)([]);
+});

package/dist/umd/build/loader/index.js

@@ -0,0 +1,23 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', '../util'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('../util'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.util);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _util) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.default = pfStyleLoader;
+  function pfStyleLoader(source) {
+    return (0, _util.cssToJS)(source, false);
+  }
+});

package/dist/umd/build/util.js

@@ -0,0 +1,94 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'path', 'fs', 'css', 'fs-extra', 'relative'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('path'), require('fs'), require('css'), require('fs-extra'), require('relative'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.path, global.fs, global.css, global.fsExtra, global.relative);
+    global.util = mod.exports;
+  }
+})(this, function (exports, _path, _fs, _css, _fsExtra, _relative) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.styleSheetToken = exports.packageName = undefined;
+  exports.cssToJS = cssToJS;
+  exports.getCSS = getCSS;
+  exports.minifyCSS = minifyCSS;
+  exports.writeCSSJSFile = writeCSSJSFile;
+  exports.getRelativeImportPath = getRelativeImportPath;
+  exports.getCSSOutputPath = getCSSOutputPath;
+
+  var _path2 = _interopRequireDefault(_path);
+
+  var _css2 = _interopRequireDefault(_css);
+
+  var _relative2 = _interopRequireDefault(_relative);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  var packageName = exports.packageName = '@patternfly/react-styles';
+  var styleSheetToken = exports.styleSheetToken = 'StyleSheet';
+
+  function cssToJS(cssString) {
+    var useModules = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    if (useModules) {
+      return 'import { ' + styleSheetToken + ' } from \'' + packageName + '\';\nexport default ' + styleSheetToken + '.parse(`' + cssString + '`);\n';
+    }
+
+    return 'const { ' + styleSheetToken + ' } = require(\'' + packageName + '\');\nmodule.exports = ' + styleSheetToken + '.parse(`' + cssString + '`);\n';
+  }
+
+  function getCSS(pathToCSSFile) {
+    var rawCss = (0, _fs.readFileSync)(pathToCSSFile, 'utf8').replace('@charset "UTF-8";', '');
+    return minifyCSS(rawCss);
+  }
+
+  function minifyCSS(cssString) {
+    return _css2.default.stringify(_css2.default.parse(cssString.replace('@charset "UTF-8";', '')), {
+      compress: true
+    });
+  }
+
+  function writeCSSJSFile(rootPath, originalPath, destinationPath, contents) {
+    (0, _fsExtra.outputFileSync)(destinationPath, contents);
+    var removeRE = new RegExp(rootPath + '/?');
+    var inFormatted = originalPath.replace(removeRE, '');
+    var outFormatted = destinationPath.replace(removeRE, '');
+    console.log(inFormatted + ' -> ' + outFormatted); // eslint-disable-line
+  }
+
+  function getRelativeImportPath(from, to) {
+    var parsedTo = _path2.default.parse(to);
+    var newImportPath = _path2.default.normalize(_path2.default.join((0, _relative2.default)(from, parsedTo.dir), parsedTo.base));
+    return newImportPath.startsWith('.') ? newImportPath : './' + newImportPath;
+  }
+
+  function getCSSOutputPath(outDir, rootPath, pathToCSSFile) {
+    return _path2.default.join(_path2.default.resolve(rootPath, outDir), getFormattedCSSOutputPath(pathToCSSFile));
+  }
+
+  function getFormattedCSSOutputPath(pathToCSSFile) {
+    var _path$parse = _path2.default.parse(pathToCSSFile),
+        dir = _path$parse.dir,
+        name = _path$parse.name;
+
+    var formattedDir = dir;
+    var nodeText = 'node_modules';
+    var nodeIndex = formattedDir.lastIndexOf(nodeText);
+    if (nodeIndex !== -1) {
+      formattedDir = formattedDir.substring(nodeIndex + nodeText.length);
+    }
+    return _path2.default.join(formattedDir, name + '.css.js');
+  }
+});

package/dist/umd/index.js

@@ -0,0 +1,61 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './StyleSheet', './utils'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./StyleSheet'), require('./utils'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.StyleSheet, global.utils);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _StyleSheet, _utils) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, 'StyleSheet', {
+    enumerable: true,
+    get: function () {
+      return _StyleSheet.StyleSheet;
+    }
+  });
+  Object.defineProperty(exports, 'css', {
+    enumerable: true,
+    get: function () {
+      return _StyleSheet.css;
+    }
+  });
+  Object.defineProperty(exports, 'isValidStyleDeclaration', {
+    enumerable: true,
+    get: function () {
+      return _utils.isValidStyleDeclaration;
+    }
+  });
+  Object.defineProperty(exports, 'getModifier', {
+    enumerable: true,
+    get: function () {
+      return _utils.getModifier;
+    }
+  });
+  Object.defineProperty(exports, 'isModifier', {
+    enumerable: true,
+    get: function () {
+      return _utils.isModifier;
+    }
+  });
+  Object.defineProperty(exports, 'getInsertedStyles', {
+    enumerable: true,
+    get: function () {
+      return _utils.getInsertedStyles;
+    }
+  });
+  Object.defineProperty(exports, 'getClassName', {
+    enumerable: true,
+    get: function () {
+      return _utils.getClassName;
+    }
+  });
+});

package/dist/umd/server.js

@@ -0,0 +1,24 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'emotion-server'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('emotion-server'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.emotionServer);
+    global.server = mod.exports;
+  }
+})(this, function (exports, _emotionServer) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.renderStatic = renderStatic;
+  function renderStatic(renderFn) {
+    var html = (0, _emotionServer.renderStylesToString)(renderFn());
+    return { html: html };
+  }
+});

package/dist/umd/utils.js

@@ -0,0 +1,83 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', 'camel-case', 'emotion'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('camel-case'), require('emotion'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.camelCase, global.emotion);
+    global.utils = mod.exports;
+  }
+})(this, function (exports, _camelCase, _emotion) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.isValidStyleDeclaration = isValidStyleDeclaration;
+  exports.createStyleDeclaration = createStyleDeclaration;
+  exports.isModifier = isModifier;
+  exports.getModifier = getModifier;
+  exports.formatClassName = formatClassName;
+  exports.getCSSClasses = getCSSClasses;
+  exports.getClassName = getClassName;
+  exports.getInsertedStyles = getInsertedStyles;
+
+  var _camelCase2 = _interopRequireDefault(_camelCase);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  function isValidStyleDeclaration(styleObj) {
+    return Boolean(styleObj) && typeof styleObj.__className === 'string' && typeof styleObj.__inject === 'function';
+  }
+
+  function createStyleDeclaration(className, rawCss) {
+    return {
+      __className: className.replace('.', '').trim(),
+      __inject: function __inject() {
+        (0, _emotion.injectGlobal)(rawCss);
+      }
+    };
+  }
+
+  function isModifier(className) {
+    return Boolean(className && className.startsWith) && className.startsWith('.pf-m-');
+  }
+
+  function getModifier(styleObj, modifier, defaultModifier) {
+    if (!styleObj) {
+      return null;
+    }
+
+    var modifiers = styleObj.modifiers || styleObj;
+    return modifiers[modifier] || modifiers[(0, _camelCase2.default)(modifier)] || defaultModifier;
+  }
+
+  function formatClassName(className) {
+    return (0, _camelCase2.default)(className.replace(/pf-((c|l|m|u|is|has)-)?/g, ''));
+  }
+
+  function getCSSClasses(cssString) {
+    return cssString.match(/(\.)(?!\d)([^\s\.,{\[>+~#:)]*)(?![^{]*})/g); //eslint-disable-line
+  }
+
+  function getClassName() {
+    var styleObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    if (typeof styleObj === 'string') {
+      return styleObj;
+    }
+
+    return isValidStyleDeclaration(styleObj) ? styleObj.__className : '';
+  }
+
+  function getInsertedStyles() {
+    return Object.values(_emotion.caches.inserted);
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/js/index.d.ts",
@@ -11,6 +11,14 @@
     "access": "public",
     "tag": "prerelease"
   },
+  "scripts": {
+    "build": "yarn build:babel && node ./scripts/copyTS.js",
+    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm' && yarn build:babel:umd",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
+    "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd",
+    "clean": "rimraf dist"
+  },
   "dependencies": {
     "@babel/helper-plugin-utils": "^7.0.0-beta.48",
     "camel-case": "^3.0.0",
@@ -26,17 +34,10 @@
     "resolve-from": "^4.0.0"
   },
   "devDependencies": {
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2"
   },
   "license": "MIT",
-  "scripts": {
-    "build": "yarn build:babel && yarn build:ts",
-    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
-    "build:ts": "node ./scripts/copyTS.js",
-    "clean": "rimraf dist"
-  },
-  "gitHead": "b0789cefa147a96765ccdaf558211a17f2b9071c"
+  "gitHead": "a9751cf3e68321937adfc456d48952abfbe338ba"
 }