@cloudflare/style-container 7.4.7 → 7.5.2

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.5.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.1...@cloudflare/style-container@7.5.2) (2021-10-01)
+
+**Note:** Version bump only for package @cloudflare/style-container
+
+
+
+
+
+## [7.5.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.5.0...@cloudflare/style-container@7.5.1) (2021-10-01)
+
+**Note:** Version bump only for package @cloudflare/style-container
+
+
+
+
+
+# [7.5.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.4.8...@cloudflare/style-container@7.5.0) (2021-10-01)
+
+
+### Bug Fixes
+
+* **stratus:** UI-4239 fix type errors, prettier ([1cbf5fb](http://stash.cfops.it:7999/fe/stratus/commits/1cbf5fb))
+
+
+### Features
+
+* **style-container:** UI-4239 upgrade fela packages ([d12e654](http://stash.cfops.it:7999/fe/stratus/commits/d12e654))
+
+
+
+
+
+## [7.4.8](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.4.7...@cloudflare/style-container@7.4.8) (2021-09-29)
+
+**Note:** Version bump only for package @cloudflare/style-container
+
+
+
+
+
 ## [7.4.7](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@7.4.6...@cloudflare/style-container@7.4.7) (2021-09-29)
 
 **Note:** Version bump only for package @cloudflare/style-container

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { combineRules } from 'fela';
-import { ThemeProvider, connect } from 'react-fela';
+import { ThemeProvider, connect, FelaTheme } from 'react-fela';
 import applyStaticStyles from './applyStaticStyles';
 import applyTheme from './applyTheme';
 import createComponent from './createComponent';
@@ -10,4 +10,4 @@ import { isValidElementProp, filterValidElementProps } from './isValidElementPro
 import { WithTheme } from './types';
 export * from './types';
 export declare const withTheme: WithTheme;
-export { createComponent, applyTheme, ThemeProvider, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps };
+export { createComponent, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps };

package/dist/types.d.ts

@@ -4,18 +4,6 @@ import { variables } from '@cloudflare/style-const';
 import type { IRenderer, IStyle } from 'fela';
 import { FelaWithThemeProps } from 'react-fela';
 export { ThemeProvider } from 'react-fela';
-declare module 'fela' {
-    interface IStyle {
-        /**
-         * Supplement animationName with an index signature for defining
-         * keyframes since Fela allows this, but the type definition does
-         * not.
-         */
-        animationName?: CSSProperties['animationName'] | {
-            [key: string]: CSSProperties;
-        };
-    }
-}
 export declare type ElementTag = keyof JSX.IntrinsicElements;
 export declare type BaseType = ElementTag | ComponentType<any>;
 export declare type KeyList<T> = Extract<keyof T, string>[];

package/dist/withRenderer.d.ts

@@ -3,5 +3,5 @@ import { IRenderer } from 'fela';
 interface IWithRendererProps {
     renderer: IRenderer;
 }
-declare function withRenderer<T>(ComponentToWrap: React.ComponentType<T & IWithRendererProps>): React.ComponentType<T>;
+declare function withRenderer<T>(ComponentToWrap: React.ComponentType<T & IWithRendererProps>): React.FC<T>;
 export default withRenderer;

package/es/applyStaticStyles.js

@@ -2,40 +2,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; 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; }
-
 /* eslint-disable behance/no-deprecated */
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { withTheme } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import React, { useContext } from 'react';
+import { withTheme, RendererContext } from 'react-fela'; // eslint-disable-line behance/no-deprecated
 
 import getReactDisplayName from 'react-display-name';
 
 function applyStaticStyles(staticStyles, ComponentToWrap) {
-  class CompWithStaticStyles extends PureComponent {
-    UNSAFE_componentWillMount() {
-      const contextTheme = this.props.theme || {};
-      const result = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
-      this.context.renderer.renderStatic(result);
-    }
-
-    render() {
-      const _this$props = this.props,
-            theme = _this$props.theme,
-            passThroughProps = _objectWithoutProperties(_this$props, ["theme"]);
-
-      return /*#__PURE__*/React.createElement(ComponentToWrap, passThroughProps);
-    }
-
-  }
-
-  _defineProperty(CompWithStaticStyles, "contextTypes", {
-    renderer: PropTypes.object
-  });
-
-  _defineProperty(CompWithStaticStyles, "propTypes", {
-    theme: PropTypes.object
-  });
+  const CompWithStaticStyles = (_ref) => {
+    var _renderer$renderStati;
+
+    let theme = _ref.theme,
+        passThroughProps = _objectWithoutProperties(_ref, ["theme"]);
+
+    const renderer = useContext(RendererContext);
+    const contextTheme = theme || {};
+    const result = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
+    renderer === null || renderer === void 0 ? void 0 : (_renderer$renderStati = renderer.renderStatic) === null || _renderer$renderStati === void 0 ? void 0 : _renderer$renderStati.call(renderer, result);
+    return /*#__PURE__*/React.createElement(ComponentToWrap, passThroughProps);
+  };
 
   const WithThemeHOC = withTheme(CompWithStaticStyles);
   WithThemeHOC.displayName = getReactDisplayName(ComponentToWrap);

package/es/index.js

@@ -1,6 +1,6 @@
 import { combineRules } from 'fela'; // eslint-disable-line behance/no-deprecated
 
-import { ThemeProvider, connect, withTheme as _withTheme } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import { ThemeProvider, connect, withTheme as _withTheme, FelaTheme } from 'react-fela'; // eslint-disable-line behance/no-deprecated
 
 import applyStaticStyles from './applyStaticStyles';
 import applyTheme from './applyTheme';
@@ -11,4 +11,4 @@ import withRenderer from './withRenderer';
 import { isValidElementProp, filterValidElementProps } from './isValidElementProp';
 export * from './types';
 export const withTheme = _withTheme;
-export { createComponent, applyTheme, ThemeProvider, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps };
+export { createComponent, applyTheme, ThemeProvider, FelaTheme, connect, combineRules, createComponentStyles, withRenderer, applyStaticStyles, createStyledComponent, isValidElementProp, filterValidElementProps };

package/es/withRenderer.js

@@ -1,28 +1,19 @@
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-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; }
-
 /* eslint-disable behance/no-deprecated */
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
 import getReactDisplayName from 'react-display-name';
-import PropTypes from 'prop-types';
+import { RendererContext } from 'react-fela';
 
 function withRenderer(ComponentToWrap) {
-  class WithRendererComponent extends Component {
-    render() {
-      return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({
-        renderer: this.context.renderer
-      }, this.props));
-    }
-
-  }
-
-  _defineProperty(WithRendererComponent, "displayName", getReactDisplayName(ComponentToWrap));
-
-  _defineProperty(WithRendererComponent, "contextTypes", {
-    renderer: PropTypes.object
-  });
-
+  const WithRendererComponent = props => {
+    const renderer = useContext(RendererContext);
+    return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({
+      renderer: renderer
+    }, props));
+  };
+
+  WithRendererComponent.displayName = getReactDisplayName(ComponentToWrap);
   return WithRendererComponent;
 }
 

package/lib/applyStaticStyles.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactFela = require("react-fela");
 
 var _reactDisplayName = _interopRequireDefault(require("react-display-name"));
@@ -25,62 +23,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-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; }
-
 function applyStaticStyles(staticStyles, ComponentToWrap) {
-  var CompWithStaticStyles = /*#__PURE__*/function (_PureComponent) {
-    _inherits(CompWithStaticStyles, _PureComponent);
-
-    function CompWithStaticStyles() {
-      _classCallCheck(this, CompWithStaticStyles);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(CompWithStaticStyles).apply(this, arguments));
-    }
-
-    _createClass(CompWithStaticStyles, [{
-      key: "UNSAFE_componentWillMount",
-      value: function UNSAFE_componentWillMount() {
-        var contextTheme = this.props.theme || {};
-        var result = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
-        this.context.renderer.renderStatic(result);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-            theme = _this$props.theme,
-            passThroughProps = _objectWithoutProperties(_this$props, ["theme"]);
-
-        return /*#__PURE__*/_react.default.createElement(ComponentToWrap, passThroughProps);
-      }
-    }]);
-
-    return CompWithStaticStyles;
-  }(_react.PureComponent);
-
-  _defineProperty(CompWithStaticStyles, "contextTypes", {
-    renderer: _propTypes.default.object
-  });
-
-  _defineProperty(CompWithStaticStyles, "propTypes", {
-    theme: _propTypes.default.object
-  });
+  var CompWithStaticStyles = function CompWithStaticStyles(_ref) {
+    var _renderer$renderStati;
+
+    var theme = _ref.theme,
+        passThroughProps = _objectWithoutProperties(_ref, ["theme"]);
+
+    var renderer = (0, _react.useContext)(_reactFela.RendererContext);
+    var contextTheme = theme || {};
+    var result = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
+    renderer === null || renderer === void 0 ? void 0 : (_renderer$renderStati = renderer.renderStatic) === null || _renderer$renderStati === void 0 ? void 0 : _renderer$renderStati.call(renderer, result);
+    return /*#__PURE__*/_react.default.createElement(ComponentToWrap, passThroughProps);
+  };
 
   var WithThemeHOC = (0, _reactFela.withTheme)(CompWithStaticStyles);
   WithThemeHOC.displayName = (0, _reactDisplayName.default)(ComponentToWrap);

package/lib/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   combineRules: true,
   ThemeProvider: true,
   connect: true,
+  FelaTheme: true,
   applyStaticStyles: true,
   applyTheme: true,
   createComponent: true,
@@ -35,6 +36,12 @@ Object.defineProperty(exports, "connect", {
     return _reactFela.connect;
   }
 });
+Object.defineProperty(exports, "FelaTheme", {
+  enumerable: true,
+  get: function get() {
+    return _reactFela.FelaTheme;
+  }
+});
 Object.defineProperty(exports, "applyStaticStyles", {
   enumerable: true,
   get: function get() {

package/lib/withRenderer.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDisplayName = _interopRequireDefault(require("react-display-name"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactFela = require("react-fela");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,52 +21,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-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; }
-
 function withRenderer(ComponentToWrap) {
-  var WithRendererComponent = /*#__PURE__*/function (_Component) {
-    _inherits(WithRendererComponent, _Component);
-
-    function WithRendererComponent() {
-      _classCallCheck(this, WithRendererComponent);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(WithRendererComponent).apply(this, arguments));
-    }
-
-    _createClass(WithRendererComponent, [{
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/_react.default.createElement(ComponentToWrap, _extends({
-          renderer: this.context.renderer
-        }, this.props));
-      }
-    }]);
-
-    return WithRendererComponent;
-  }(_react.Component);
-
-  _defineProperty(WithRendererComponent, "displayName", (0, _reactDisplayName.default)(ComponentToWrap));
-
-  _defineProperty(WithRendererComponent, "contextTypes", {
-    renderer: _propTypes.default.object
-  });
-
+  var WithRendererComponent = function WithRendererComponent(props) {
+    var renderer = (0, _react.useContext)(_reactFela.RendererContext);
+    return /*#__PURE__*/_react.default.createElement(ComponentToWrap, _extends({
+      renderer: renderer
+    }, props));
+  };
+
+  WithRendererComponent.displayName = (0, _reactDisplayName.default)(ComponentToWrap);
   return WithRendererComponent;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/style-container",
   "description": "Cloudflare Style Container",
-  "version": "7.4.7",
+  "version": "7.5.2",
   "types": "./dist/index.d.ts",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -12,15 +12,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/style-const": "^5.0.7",
+    "@cloudflare/style-const": "^5.0.8",
     "@cloudflare/types": "^6.8.24",
-    "fela": "^6.2.0",
-    "fela-tools": "^5.2.0",
-    "fela-utils": "^8.1.0",
+    "fela": "^11.6.1",
+    "fela-tools": "^11.6.1",
+    "fela-utils": "^11.6.1",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.0",
     "react-display-name": "^0.2.3",
-    "react-fela": "^8.0.0",
+    "react-fela": "^11.6.1",
     "underscore.string": "^3.3.4"
   },
   "peerDependencies": {
@@ -36,5 +36,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "03108046e1a2c95fc59a436d8df5f487512778cb"
+  "gitHead": "f43e3fe916c610482a96ef15800b55148f296499"
 }