@telus-uds/components-web 3.2.0 → 3.2.1

package/src/utils/index.js

@@ -8,6 +8,7 @@ import isElementFocusable from './isElementFocusable'
 import renderStructuredContent from './renderStructuredContent'
 import useOverlaidPosition from './useOverlaidPosition'
 import scrollToAnchor from './scrollToAnchor'
+import styledComponents from './theming/styled-components'
 
 export {
   deprecate,
@@ -21,5 +22,6 @@ export {
   ssrStyles,
   isElementFocusable,
   useOverlaidPosition,
-  scrollToAnchor
+  scrollToAnchor,
+  styledComponents
 }

package/src/utils/ssr.js

@@ -1,5 +1,5 @@
-import { ServerStyleSheet } from 'styled-components'
 import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
+import styledComponents from './theming/styled-components'
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -21,6 +21,7 @@ const ssrStyles = (
   appName = 'Allium app',
   { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
 ) => {
+  const { ServerStyleSheet } = styledComponents
   const sheet = new ServerStyleSheet()
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement()

package/src/utils/theming/styled-components.js

@@ -0,0 +1,23 @@
+/**
+ * Currently, `styled` is only available as the default export in `styled-components`.
+ * In transpiled/CommonJS environments, that works as expected, but it breaks server-side ESM usage of `styled-components`.
+ *
+ * To make `styled-components` work server-side, instead of:
+ *
+ *  import styled from 'styled-components';
+ *
+ * We must write:
+ *
+ *  import styledWrapper from 'styled-components';
+ *  const styled = styledWrapper.default;
+ *
+ * This approach is confusing and not a viable option for code that should run in both browser and server.
+ */
+
+import _styled, { css, keyframes, createGlobalStyle, ServerStyleSheet } from 'styled-components'
+
+const styled = typeof _styled === 'function' ? _styled : _styled.default
+
+const styledComponents = { styled, css, keyframes, createGlobalStyle, ServerStyleSheet }
+
+export default styledComponents