@instructure/emotion 8.10.3-snapshot.2 → 8.10.3-snapshot.25

package/es/withStyle.js

@@ -26,12 +26,14 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { forwardRef, useState } from 'react';
 import { isEqual } from 'lodash';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { warn } from '@instructure/console';
 import { decorator } from '@instructure/ui-decorator';
-import { useTextDirectionContext } from '@instructure/ui-i18n';
-import { bidirectionalPolyfill } from './styleUtils/bidirectionalPolyfill';
 import { getComponentThemeOverride } from './getComponentThemeOverride';
 import { useTheme } from './useTheme';
-
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
 /**
  * ---
  * category: utilities/themes
@@ -100,26 +102,36 @@ import { useTheme } from './useTheme';
  * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
+
 const withStyle = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
   const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
     const theme = useTheme();
-    const dir = useTextDirectionContext();
+
+    if (props.styles) {
+      warn(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
+    }
+
+    if (props.makeStyles) {
+      warn(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+    }
+
     const componentProps = { ...ComposedComponent.defaultProps,
-      ...props
+      ...props,
+      ...defaultValues
     };
     const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps);
     const componentTheme = typeof generateComponentTheme === 'function' ? { ...generateComponentTheme(theme),
       ...themeOverride
     } : {};
 
-    const _useState = useState(generateStyle ? bidirectionalPolyfill(generateStyle(componentTheme, componentProps, {}), dir) : {}),
+    const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
           _useState2 = _slicedToArray(_useState, 2),
           styles = _useState2[0],
           setStyles = _useState2[1];
 
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = bidirectionalPolyfill(generateStyle(componentTheme, componentProps, extraArgs), dir);
+      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
 
       if (!isEqual(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
@@ -127,10 +139,11 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
     };
 
     return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
-      ref: ref,
+      ref: ref
+    }, props, {
       makeStyles: makeStyleHandler,
       styles: styles
-    }, props));
+    }));
   });
   hoistNonReactStatics(WithStyle, ComposedComponent); // we have to pass these on, because sometimes users
   // access propTypes of the component in other components
@@ -145,8 +158,8 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
   // eslint-disable-next-line no-param-reassign
 
   ComposedComponent.defaultProps = { ...ComposedComponent.defaultProps,
-    makeStyles: () => {},
-    styles: {}
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
   };
 
   if (process.env.NODE_ENV !== 'production') {

package/lib/withStyle.js

@@ -17,11 +17,9 @@ var _lodash = require("lodash");
 
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
-var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
-
-var _uiI18n = require("@instructure/ui-i18n");
+var _console = require("@instructure/console");
 
-var _bidirectionalPolyfill = require("./styleUtils/bidirectionalPolyfill");
+var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
 
 var _getComponentThemeOverride = require("./getComponentThemeOverride");
 
@@ -50,7 +48,10 @@ var _useTheme = require("./useTheme");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
 /**
  * ---
  * category: utilities/themes
@@ -119,26 +120,36 @@ var _useTheme = require("./useTheme");
  * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
+
 const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
   const WithStyle = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     const theme = (0, _useTheme.useTheme)();
-    const dir = (0, _uiI18n.useTextDirectionContext)();
+
+    if (props.styles) {
+      (0, _console.warn)(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
+    }
+
+    if (props.makeStyles) {
+      (0, _console.warn)(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+    }
+
     const componentProps = { ...ComposedComponent.defaultProps,
-      ...props
+      ...props,
+      ...defaultValues
     };
     const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps);
     const componentTheme = typeof generateComponentTheme === 'function' ? { ...generateComponentTheme(theme),
       ...themeOverride
     } : {};
 
-    const _useState = (0, _react.useState)(generateStyle ? (0, _bidirectionalPolyfill.bidirectionalPolyfill)(generateStyle(componentTheme, componentProps, {}), dir) : {}),
+    const _useState = (0, _react.useState)(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
           _useState2 = (0, _slicedToArray2.default)(_useState, 2),
           styles = _useState2[0],
           setStyles = _useState2[1];
 
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = (0, _bidirectionalPolyfill.bidirectionalPolyfill)(generateStyle(componentTheme, componentProps, extraArgs), dir);
+      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
 
       if (!(0, _lodash.isEqual)(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
@@ -146,10 +157,11 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
     };
 
     return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
-      ref: ref,
+      ref: ref
+    }, props, {
       makeStyles: makeStyleHandler,
       styles: styles
-    }, props));
+    }));
   });
   (0, _hoistNonReactStatics.default)(WithStyle, ComposedComponent); // we have to pass these on, because sometimes users
   // access propTypes of the component in other components
@@ -164,8 +176,8 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
   // eslint-disable-next-line no-param-reassign
 
   ComposedComponent.defaultProps = { ...ComposedComponent.defaultProps,
-    makeStyles: () => {},
-    styles: {}
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
   };
 
   if (process.env.NODE_ENV !== 'production') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "8.10.3-snapshot.2+ccdf8f43b",
+  "version": "8.10.3-snapshot.25+ed32a6c3b",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -26,20 +26,20 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/react": "^11.4.1",
-    "@instructure/console": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/shared-types": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-decorator": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-i18n": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-themes": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-utils": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/console": "8.10.3-snapshot.25+ed32a6c3b",
+    "@instructure/shared-types": "8.10.3-snapshot.25+ed32a6c3b",
+    "@instructure/ui-decorator": "8.10.3-snapshot.25+ed32a6c3b",
+    "@instructure/ui-i18n": "8.10.3-snapshot.25+ed32a6c3b",
+    "@instructure/ui-themes": "8.10.3-snapshot.25+ed32a6c3b",
+    "@instructure/ui-utils": "8.10.3-snapshot.25+ed32a6c3b",
     "emotion-theming": "^10.0.27",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-test-utils": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-babel-preset": "8.10.3-snapshot.25+ed32a6c3b",
+    "@instructure/ui-test-utils": "8.10.3-snapshot.25+ed32a6c3b",
     "@types/lodash": "^4.14.171",
     "cpy-cli": "^3.1.1"
   },
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "ccdf8f43b56a8edef32600281692dfeb436d5a01"
+  "gitHead": "ed32a6c3b14ddb7fbbb5b543d9871a296f06e4c0"
 }

package/src/withStyle.tsx

@@ -32,9 +32,8 @@ import type {
 import { isEqual } from 'lodash'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 
+import { warn } from '@instructure/console'
 import { decorator } from '@instructure/ui-decorator'
-import { useTextDirectionContext } from '@instructure/ui-i18n'
-import { bidirectionalPolyfill } from './styleUtils/bidirectionalPolyfill'
 
 import { getComponentThemeOverride } from './getComponentThemeOverride'
 import { useTheme } from './useTheme'
@@ -76,6 +75,11 @@ type WithStyleProps<
   ? WithStylePrivateProps<Style>
   : WithStylePrivateProps<Style> & ThemeOverrideProp<Theme>
 
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+}
+
 /**
  * ---
  * category: utilities/themes
@@ -159,11 +163,25 @@ const withStyle = decorator(
       allowedProps?: string[]
     } = forwardRef((props, ref) => {
       const theme = useTheme()
-      const dir = useTextDirectionContext()
 
+      if (props.styles) {
+        warn(
+          false,
+          `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`,
+          props.styles
+        )
+      }
+
+      if (props.makeStyles) {
+        warn(
+          false,
+          `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`
+        )
+      }
       const componentProps: Props = {
         ...ComposedComponent.defaultProps,
-        ...props
+        ...props,
+        ...defaultValues
       }
 
       const themeOverride = getComponentThemeOverride(
@@ -182,20 +200,14 @@ const withStyle = decorator(
           : {}
 
       const [styles, setStyles] = useState(
-        generateStyle
-          ? bidirectionalPolyfill(
-              generateStyle(componentTheme, componentProps, {}),
-              // @ts-expect-error TODO: this shouldn't be "auto" (INSTUI-3241)
-              dir
-            )
-          : {}
+        generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}
       )
 
       const makeStyleHandler: WithStyleProps['makeStyles'] = (extraArgs) => {
-        const calculatedStyles = bidirectionalPolyfill(
-          generateStyle(componentTheme, componentProps, extraArgs),
-          // @ts-expect-error TODO: this shouldn't be "auto" (INSTUI-3241)
-          dir
+        const calculatedStyles = generateStyle(
+          componentTheme,
+          componentProps,
+          extraArgs
         )
         if (!isEqual(calculatedStyles, styles)) {
           setStyles(calculatedStyles)
@@ -205,9 +217,9 @@ const withStyle = decorator(
       return (
         <ComposedComponent
           ref={ref}
+          {...props}
           makeStyles={makeStyleHandler}
           styles={styles}
-          {...props}
         />
       )
     })
@@ -230,8 +242,8 @@ const withStyle = decorator(
     // eslint-disable-next-line no-param-reassign
     ComposedComponent.defaultProps = {
       ...ComposedComponent.defaultProps,
-      makeStyles: () => {},
-      styles: {}
+      makeStyles: defaultValues.makeStyles,
+      styles: defaultValues.styles
     }
 
     if (process.env.NODE_ENV !== 'production') {

package/types/withStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withStyle.d.ts","sourceRoot":"","sources":["../src/withStyle.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAiBnE,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,gBAAgB,CAAA;AASvB,aAAK,qBAAqB,CACxB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAElB,EAAE,GACF;IACE,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;CAC3D,CAAA;AAEL,aAAK,iBAAiB,CAAC,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAAI;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAC/B,CAAA;AAED,aAAK,cAAc,CACjB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,EACpD,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAClB,qBAAqB,CAAC,KAAK,CAAC,GAC5B,qBAAqB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,QAAA,MAAM,SAAS,oFAgGd,CAAA;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"withStyle.d.ts","sourceRoot":"","sources":["../src/withStyle.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAgBnE,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,gBAAgB,CAAA;AASvB,aAAK,qBAAqB,CACxB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAElB,EAAE,GACF;IACE,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;CAC3D,CAAA;AAEL,aAAK,iBAAiB,CAAC,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAAI;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAC/B,CAAA;AAED,aAAK,cAAc,CACjB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,EACpD,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAClB,qBAAqB,CAAC,KAAK,CAAC,GAC5B,qBAAqB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAO3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,QAAA,MAAM,SAAS,oFAwGd,CAAA;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/es/styleUtils/bidirectionalPolyfill.js

@@ -1,183 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-import { isObject } from 'lodash';
-import { consoleLog as log } from '@instructure/console';
-
-/**
- * ---
- * category: utilities/themes
- * ---
- * Polyfills Bi-directional [CSS proposal from W3C](https://drafts.csswg.org/css-logical-props/) to support direction-sensitive rules, a.k.a Left-To-Right (LTR) and Right-To-Left (RTL) in all browsers.
- *
- * Based on formerly used [postcss-bidirection](https://github.com/gasolin/postcss-bidirection) plugin.
- * @module bidirectionalPolyfill
- * @param {object} styles - styles object of a component
- * @param {string} dir - "ltr" of "rtl" direction
- * @returns {{}} styles object with Bi-directional properties polyfilled
- */
-const DEBUG = false;
-const SUPPORT_PROPS = ['float', 'clear', 'textAlign', 'paddingInlineStart', 'paddingInlineEnd', 'borderInlineStart', 'borderInlineEnd', 'borderInlineStartColor', 'borderInlineEndColor', 'borderInlineStartStyle', 'borderInlineEndStyle', 'borderInlineStartWidth', 'borderInlineEndWidth', 'borderInlineStartTop', 'borderInlineEndTop', 'borderTopInlineStartRadius', 'borderTopInlineEndRadius', 'borderBottomInlineStartRadius', 'borderBottomInlineEndRadius', 'marginInlineStart', 'marginInlineEnd', 'offsetInlineStart', 'offsetInlineEnd', 'insetInlineStart', 'insetInlineEnd'];
-
-function processProps({
-  originalProp,
-  originalValue
-}, textDirection) {
-  const isLtr = textDirection === 'ltr';
-  let prop = originalProp;
-  let value = originalValue;
-  const start = isLtr ? 'Left' : 'Right';
-  const end = isLtr ? 'Right' : 'Left';
-
-  switch (prop) {
-    case 'float':
-    case 'clear':
-    case 'textAlign':
-      if (['start', 'end'].indexOf(value) !== -1) {
-        if (value === 'start') {
-          value = start.toLowerCase();
-        } else {
-          value = end.toLowerCase();
-        }
-      }
-
-      break;
-
-    case 'paddingInlineStart':
-      prop = 'padding' + start;
-      break;
-
-    case 'paddingInlineEnd':
-      prop = 'padding' + end;
-      break;
-
-    case 'borderInlineStart':
-      prop = 'border' + start;
-      break;
-
-    case 'borderInlineEnd':
-      prop = 'border' + end;
-      break;
-
-    case 'borderInlineStartColor':
-      prop = 'border' + start + 'Color';
-      break;
-
-    case 'borderInlineEndColor':
-      prop = 'border' + end + 'Color';
-      break;
-
-    case 'borderInlineStartWidth':
-      prop = 'border' + start + 'Width';
-      break;
-
-    case 'borderInlineEndWidth':
-      prop = 'border' + end + 'Width';
-      break;
-
-    case 'borderInlineStartStyle':
-      prop = 'border' + start + 'Style';
-      break;
-
-    case 'borderInlineEndStyle':
-      prop = 'border' + end + 'Style';
-      break;
-
-    case 'borderTopInlineStartRadius':
-      prop = 'borderTop' + start + 'Radius';
-      break;
-
-    case 'borderTopInlineEndRadius':
-      prop = 'borderTop' + end + 'Radius';
-      break;
-
-    case 'borderBottomInlineStartRadius':
-      prop = 'borderBottom' + start + 'Radius';
-      break;
-
-    case 'borderBottomInlineEndRadius':
-      prop = 'borderBottom' + end + 'Radius';
-      break;
-
-    case 'marginInlineStart':
-      prop = 'margin' + start;
-      break;
-
-    case 'marginInlineEnd':
-      prop = 'margin' + end;
-      break;
-
-    case 'insetInlineStart':
-    case 'offsetInlineStart':
-      prop = start.toLowerCase();
-      break;
-
-    case 'insetInlineEnd':
-    case 'offsetInlineEnd':
-      prop = end.toLowerCase();
-      break;
-
-    default:
-      break;
-  }
-
-  if (DEBUG) log(`${originalProp}: ${originalValue} => ${prop}: ${value}`);
-  return {
-    prop,
-    value
-  };
-}
-
-const isSupportedProps = prop => SUPPORT_PROPS.indexOf(prop) > -1;
-
-const processStyleProps = (propsObj, dir) => isObject(propsObj) ? Object.entries(propsObj).reduce((accumulator, [originalProp, originalValue]) => {
-  if (isObject(originalValue)) {
-    return { ...accumulator,
-      [originalProp]: processStyleProps(originalValue, dir)
-    };
-  }
-
-  if (isSupportedProps(originalProp) && typeof originalValue !== 'undefined') {
-    const _processProps = processProps({
-      originalProp,
-      originalValue
-    }, dir),
-          prop = _processProps.prop,
-          value = _processProps.value;
-
-    return { ...accumulator,
-      [prop]: value
-    };
-  }
-
-  return { ...accumulator,
-    [originalProp]: originalValue
-  };
-}, {}) : propsObj;
-
-const bidirectionalPolyfill = (styles, dir) => Object.entries(styles).reduce((accumulator, [style, props]) => ({ ...accumulator,
-  [style]: processStyleProps(props, dir)
-}), {});
-
-export default bidirectionalPolyfill;
-export { bidirectionalPolyfill };

package/lib/styleUtils/bidirectionalPolyfill.js

@@ -1,193 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.bidirectionalPolyfill = exports.default = void 0;
-
-var _lodash = require("lodash");
-
-var _console = require("@instructure/console");
-
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/themes
- * ---
- * Polyfills Bi-directional [CSS proposal from W3C](https://drafts.csswg.org/css-logical-props/) to support direction-sensitive rules, a.k.a Left-To-Right (LTR) and Right-To-Left (RTL) in all browsers.
- *
- * Based on formerly used [postcss-bidirection](https://github.com/gasolin/postcss-bidirection) plugin.
- * @module bidirectionalPolyfill
- * @param {object} styles - styles object of a component
- * @param {string} dir - "ltr" of "rtl" direction
- * @returns {{}} styles object with Bi-directional properties polyfilled
- */
-const DEBUG = false;
-const SUPPORT_PROPS = ['float', 'clear', 'textAlign', 'paddingInlineStart', 'paddingInlineEnd', 'borderInlineStart', 'borderInlineEnd', 'borderInlineStartColor', 'borderInlineEndColor', 'borderInlineStartStyle', 'borderInlineEndStyle', 'borderInlineStartWidth', 'borderInlineEndWidth', 'borderInlineStartTop', 'borderInlineEndTop', 'borderTopInlineStartRadius', 'borderTopInlineEndRadius', 'borderBottomInlineStartRadius', 'borderBottomInlineEndRadius', 'marginInlineStart', 'marginInlineEnd', 'offsetInlineStart', 'offsetInlineEnd', 'insetInlineStart', 'insetInlineEnd'];
-
-function processProps({
-  originalProp,
-  originalValue
-}, textDirection) {
-  const isLtr = textDirection === 'ltr';
-  let prop = originalProp;
-  let value = originalValue;
-  const start = isLtr ? 'Left' : 'Right';
-  const end = isLtr ? 'Right' : 'Left';
-
-  switch (prop) {
-    case 'float':
-    case 'clear':
-    case 'textAlign':
-      if (['start', 'end'].indexOf(value) !== -1) {
-        if (value === 'start') {
-          value = start.toLowerCase();
-        } else {
-          value = end.toLowerCase();
-        }
-      }
-
-      break;
-
-    case 'paddingInlineStart':
-      prop = 'padding' + start;
-      break;
-
-    case 'paddingInlineEnd':
-      prop = 'padding' + end;
-      break;
-
-    case 'borderInlineStart':
-      prop = 'border' + start;
-      break;
-
-    case 'borderInlineEnd':
-      prop = 'border' + end;
-      break;
-
-    case 'borderInlineStartColor':
-      prop = 'border' + start + 'Color';
-      break;
-
-    case 'borderInlineEndColor':
-      prop = 'border' + end + 'Color';
-      break;
-
-    case 'borderInlineStartWidth':
-      prop = 'border' + start + 'Width';
-      break;
-
-    case 'borderInlineEndWidth':
-      prop = 'border' + end + 'Width';
-      break;
-
-    case 'borderInlineStartStyle':
-      prop = 'border' + start + 'Style';
-      break;
-
-    case 'borderInlineEndStyle':
-      prop = 'border' + end + 'Style';
-      break;
-
-    case 'borderTopInlineStartRadius':
-      prop = 'borderTop' + start + 'Radius';
-      break;
-
-    case 'borderTopInlineEndRadius':
-      prop = 'borderTop' + end + 'Radius';
-      break;
-
-    case 'borderBottomInlineStartRadius':
-      prop = 'borderBottom' + start + 'Radius';
-      break;
-
-    case 'borderBottomInlineEndRadius':
-      prop = 'borderBottom' + end + 'Radius';
-      break;
-
-    case 'marginInlineStart':
-      prop = 'margin' + start;
-      break;
-
-    case 'marginInlineEnd':
-      prop = 'margin' + end;
-      break;
-
-    case 'insetInlineStart':
-    case 'offsetInlineStart':
-      prop = start.toLowerCase();
-      break;
-
-    case 'insetInlineEnd':
-    case 'offsetInlineEnd':
-      prop = end.toLowerCase();
-      break;
-
-    default:
-      break;
-  }
-
-  if (DEBUG) (0, _console.consoleLog)(`${originalProp}: ${originalValue} => ${prop}: ${value}`);
-  return {
-    prop,
-    value
-  };
-}
-
-const isSupportedProps = prop => SUPPORT_PROPS.indexOf(prop) > -1;
-
-const processStyleProps = (propsObj, dir) => (0, _lodash.isObject)(propsObj) ? Object.entries(propsObj).reduce((accumulator, [originalProp, originalValue]) => {
-  if ((0, _lodash.isObject)(originalValue)) {
-    return { ...accumulator,
-      [originalProp]: processStyleProps(originalValue, dir)
-    };
-  }
-
-  if (isSupportedProps(originalProp) && typeof originalValue !== 'undefined') {
-    const _processProps = processProps({
-      originalProp,
-      originalValue
-    }, dir),
-          prop = _processProps.prop,
-          value = _processProps.value;
-
-    return { ...accumulator,
-      [prop]: value
-    };
-  }
-
-  return { ...accumulator,
-    [originalProp]: originalValue
-  };
-}, {}) : propsObj;
-
-const bidirectionalPolyfill = (styles, dir) => Object.entries(styles).reduce((accumulator, [style, props]) => ({ ...accumulator,
-  [style]: processStyleProps(props, dir)
-}), {});
-
-exports.bidirectionalPolyfill = bidirectionalPolyfill;
-var _default = bidirectionalPolyfill;
-exports.default = _default;

package/src/styleUtils/bidirectionalPolyfill.ts

@@ -1,213 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { isObject } from 'lodash'
-import { consoleLog as log } from '@instructure/console'
-
-import type { StyleObject } from '../EmotionTypes'
-
-type Direction = 'ltr' | 'rtl'
-
-/**
- * ---
- * category: utilities/themes
- * ---
- * Polyfills Bi-directional [CSS proposal from W3C](https://drafts.csswg.org/css-logical-props/) to support direction-sensitive rules, a.k.a Left-To-Right (LTR) and Right-To-Left (RTL) in all browsers.
- *
- * Based on formerly used [postcss-bidirection](https://github.com/gasolin/postcss-bidirection) plugin.
- * @module bidirectionalPolyfill
- * @param {object} styles - styles object of a component
- * @param {string} dir - "ltr" of "rtl" direction
- * @returns {{}} styles object with Bi-directional properties polyfilled
- */
-
-const DEBUG = false
-const SUPPORT_PROPS = [
-  'float',
-  'clear',
-  'textAlign',
-  'paddingInlineStart',
-  'paddingInlineEnd',
-  'borderInlineStart',
-  'borderInlineEnd',
-  'borderInlineStartColor',
-  'borderInlineEndColor',
-  'borderInlineStartStyle',
-  'borderInlineEndStyle',
-  'borderInlineStartWidth',
-  'borderInlineEndWidth',
-  'borderInlineStartTop',
-  'borderInlineEndTop',
-  'borderTopInlineStartRadius',
-  'borderTopInlineEndRadius',
-  'borderBottomInlineStartRadius',
-  'borderBottomInlineEndRadius',
-  'marginInlineStart',
-  'marginInlineEnd',
-  'offsetInlineStart',
-  'offsetInlineEnd',
-  'insetInlineStart',
-  'insetInlineEnd'
-]
-
-function processProps(
-  {
-    originalProp,
-    originalValue
-  }: { originalProp: string; originalValue: string | number },
-  textDirection: Direction
-) {
-  const isLtr = textDirection === 'ltr'
-
-  let prop = originalProp
-  let value = originalValue
-  const start = isLtr ? 'Left' : 'Right'
-  const end = isLtr ? 'Right' : 'Left'
-
-  switch (prop) {
-    case 'float':
-    case 'clear':
-    case 'textAlign':
-      if (['start', 'end'].indexOf(value as string) !== -1) {
-        if (value === 'start') {
-          value = start.toLowerCase()
-        } else {
-          value = end.toLowerCase()
-        }
-      }
-      break
-    case 'paddingInlineStart':
-      prop = 'padding' + start
-      break
-    case 'paddingInlineEnd':
-      prop = 'padding' + end
-      break
-    case 'borderInlineStart':
-      prop = 'border' + start
-      break
-    case 'borderInlineEnd':
-      prop = 'border' + end
-      break
-    case 'borderInlineStartColor':
-      prop = 'border' + start + 'Color'
-      break
-    case 'borderInlineEndColor':
-      prop = 'border' + end + 'Color'
-      break
-    case 'borderInlineStartWidth':
-      prop = 'border' + start + 'Width'
-      break
-    case 'borderInlineEndWidth':
-      prop = 'border' + end + 'Width'
-      break
-    case 'borderInlineStartStyle':
-      prop = 'border' + start + 'Style'
-      break
-    case 'borderInlineEndStyle':
-      prop = 'border' + end + 'Style'
-      break
-    case 'borderTopInlineStartRadius':
-      prop = 'borderTop' + start + 'Radius'
-      break
-    case 'borderTopInlineEndRadius':
-      prop = 'borderTop' + end + 'Radius'
-      break
-    case 'borderBottomInlineStartRadius':
-      prop = 'borderBottom' + start + 'Radius'
-      break
-    case 'borderBottomInlineEndRadius':
-      prop = 'borderBottom' + end + 'Radius'
-      break
-    case 'marginInlineStart':
-      prop = 'margin' + start
-      break
-    case 'marginInlineEnd':
-      prop = 'margin' + end
-      break
-    case 'insetInlineStart':
-    case 'offsetInlineStart':
-      prop = start.toLowerCase()
-      break
-    case 'insetInlineEnd':
-    case 'offsetInlineEnd':
-      prop = end.toLowerCase()
-      break
-    default:
-      break
-  }
-
-  if (DEBUG) log(`${originalProp}: ${originalValue} => ${prop}: ${value}`)
-
-  return { prop, value }
-}
-
-const isSupportedProps = (prop: string) => SUPPORT_PROPS.indexOf(prop) > -1
-
-const processStyleProps = (
-  propsObj: StyleObject | string | number | undefined,
-  dir: Direction
-): StyleObject | string | number | undefined =>
-  isObject(propsObj)
-    ? Object.entries(propsObj).reduce(
-        (accumulator, [originalProp, originalValue]) => {
-          if (isObject(originalValue)) {
-            return {
-              ...accumulator,
-              [originalProp]: processStyleProps(originalValue, dir)
-            }
-          }
-
-          if (
-            isSupportedProps(originalProp) &&
-            typeof originalValue !== 'undefined'
-          ) {
-            const { prop, value } = processProps(
-              { originalProp, originalValue },
-
-              dir
-            )
-
-            return { ...accumulator, [prop]: value }
-          }
-
-          return { ...accumulator, [originalProp]: originalValue }
-        },
-        {}
-      )
-    : propsObj
-
-const bidirectionalPolyfill = <S extends StyleObject>(
-  styles: S,
-  dir: Direction
-) =>
-  Object.entries(styles).reduce(
-    (accumulator, [style, props]) => ({
-      ...accumulator,
-      [style]: processStyleProps(props, dir)
-    }),
-    {}
-  ) as S
-
-export default bidirectionalPolyfill
-export { bidirectionalPolyfill }

package/types/styleUtils/bidirectionalPolyfill.d.ts

@@ -1,6 +0,0 @@
-import type { StyleObject } from '../EmotionTypes';
-declare type Direction = 'ltr' | 'rtl';
-declare const bidirectionalPolyfill: <S extends StyleObject>(styles: S, dir: Direction) => S;
-export default bidirectionalPolyfill;
-export { bidirectionalPolyfill };
-//# sourceMappingURL=bidirectionalPolyfill.d.ts.map

package/types/styleUtils/bidirectionalPolyfill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bidirectionalPolyfill.d.ts","sourceRoot":"","sources":["../../src/styleUtils/bidirectionalPolyfill.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,aAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AA0K9B,QAAA,MAAM,qBAAqB,0CAEpB,SAAS,MAQR,CAAA;AAER,eAAe,qBAAqB,CAAA;AACpC,OAAO,EAAE,qBAAqB,EAAE,CAAA"}