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

package/es/withStyle.js

@@ -28,8 +28,6 @@ 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 = {
@@ -109,7 +107,6 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
   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);
@@ -128,13 +125,13 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
       ...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);

package/lib/withStyle.js

@@ -21,10 +21,6 @@ var _console = require("@instructure/console");
 
 var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
 
-var _uiI18n = require("@instructure/ui-i18n");
-
-var _bidirectionalPolyfill = require("./styleUtils/bidirectionalPolyfill");
-
 var _getComponentThemeOverride = require("./getComponentThemeOverride");
 
 var _useTheme = require("./useTheme");
@@ -129,7 +125,6 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
   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);
@@ -148,13 +143,13 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
       ...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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "8.10.3-snapshot.23+5aaa29662",
+  "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.23+5aaa29662",
-    "@instructure/shared-types": "8.10.3-snapshot.23+5aaa29662",
-    "@instructure/ui-decorator": "8.10.3-snapshot.23+5aaa29662",
-    "@instructure/ui-i18n": "8.10.3-snapshot.23+5aaa29662",
-    "@instructure/ui-themes": "8.10.3-snapshot.23+5aaa29662",
-    "@instructure/ui-utils": "8.10.3-snapshot.23+5aaa29662",
+    "@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.23+5aaa29662",
-    "@instructure/ui-test-utils": "8.10.3-snapshot.23+5aaa29662",
+    "@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": "5aaa296621d72faebe1a809a8895a8185587008d"
+  "gitHead": "ed32a6c3b14ddb7fbbb5b543d9871a296f06e4c0"
 }

package/src/withStyle.tsx

@@ -34,8 +34,6 @@ 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'
@@ -165,7 +163,6 @@ const withStyle = decorator(
       allowedProps?: string[]
     } = forwardRef((props, ref) => {
       const theme = useTheme()
-      const dir = useTextDirectionContext()
 
       if (props.styles) {
         warn(
@@ -181,7 +178,6 @@ const withStyle = decorator(
           `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,
@@ -204,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)

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;AAkBnE,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,oFAgHd,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"}