@telus-uds/components-base 1.69.0 → 1.70.0

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Sat, 18 Nov 2023 02:25:11 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Nov 2023 21:13:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.70.0
+
+Mon, 27 Nov 2023 21:13:27 GMT
+
+### Minor changes
+
+- Add SSR support for media queries (wlsdud194@hotmail.com)
+
 ## 1.69.0
 
-Sat, 18 Nov 2023 02:25:11 GMT
+Sat, 18 Nov 2023 02:32:49 GMT
 
 ### Minor changes
 

package/lib/utils/index.js

@@ -168,6 +168,18 @@ Object.keys(_props).forEach(function (key) {
     }
   });
 });
+var _ssrMediaQuery = require("./ssr-media-query");
+Object.keys(_ssrMediaQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ssrMediaQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssrMediaQuery[key];
+    }
+  });
+});
 var _info = _interopRequireDefault(require("./info"));
 var _useCopy = _interopRequireDefault(require("./useCopy"));
 var _useHash = _interopRequireDefault(require("./useHash"));

package/lib/utils/ssr-media-query/create-stylesheet.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _inject = require("./utils/inject");
+var _createDeclarationBlock = _interopRequireDefault(require("./utils/create-declaration-block"));
+var _hash = _interopRequireDefault(require("./hash"));
+var _common = require("./utils/common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  let ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
+    if (_Platform.default.OS === 'web') {
+      cleanStyles = (0, _common.deepClone)(stylesWithQuery);
+      mediaQueriesAndPseudoClasses.forEach(query => {
+        var _ids;
+        const css = (0, _createDeclarationBlock.default)(stylesWithQuery[key][query]);
+        const stringHash = `rnmq-${(0, _hash.default)(`${key}${query}${css}`)}`;
+        const rule = (0, _common.createCssRule)(query, stringHash, css);
+        (0, _inject.addCss)(`${stringHash}`, rule);
+        delete cleanStyles[key][query];
+        ids = {
+          ...ids,
+          [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
+        };
+      });
+    } else {
+      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+      mediaQueriesAndPseudoClasses.forEach(str => {
+        if ((0, _common.isMedia)(str)) {
+          const mqStr = str.replace('@media', '');
+          const {
+            width,
+            height
+          } = _Dimensions.default.get('window');
+          const isMatchingMediaQuery = _cssMediaquery.default.match(mqStr, {
+            width,
+            height,
+            orientation: width > height ? 'landscape' : 'portrait',
+            'aspect-ratio': width / height
+          });
+          if (isMatchingMediaQuery) {
+            cleanStyles = {
+              ...cleanStyles,
+              [key]: {
+                ...cleanStyles[key],
+                ...stylesWithQuery[key][str]
+              }
+            };
+          }
+        }
+        delete cleanStyles[key][str];
+      });
+    }
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+var _default = createStyleSheet;
+exports.default = _default;

package/lib/utils/ssr-media-query/hash.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hash;
+/* eslint-disable no-bitwise */
+function hash(text) {
+  if (!text) {
+    return '';
+  }
+  let hashValue = 5381;
+  let index = text.length - 1;
+  while (index) {
+    hashValue = hashValue * 33 ^ text.charCodeAt(index);
+    index -= 1;
+  }
+  return (hashValue >>> 0).toString(16);
+}

package/lib/utils/ssr-media-query/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleSheet = void 0;
+Object.defineProperty(exports, "createMediaQueryStyles", {
+  enumerable: true,
+  get: function () {
+    return _createMediaQueryStyles.default;
+  }
+});
+var _createStylesheet = _interopRequireDefault(require("./create-stylesheet"));
+var _createMediaQueryStyles = _interopRequireDefault(require("./utils/create-media-query-styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyleSheet = {
+  create: _createStylesheet.default
+};
+exports.StyleSheet = StyleSheet;

package/lib/utils/ssr-media-query/utils/common.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPseudo = exports.isMediaOrPseudo = exports.isMedia = exports.deepClone = exports.createCssRule = void 0;
+const isMedia = query => query.indexOf('@media') === 0;
+exports.isMedia = isMedia;
+const isPseudo = query => query.indexOf(':') === 0;
+exports.isPseudo = isPseudo;
+const isMediaOrPseudo = query => isMedia(query) || isPseudo(query);
+exports.isMediaOrPseudo = isMediaOrPseudo;
+const deepClone = obj => JSON.parse(JSON.stringify(obj));
+exports.deepClone = deepClone;
+const createCssRule = (query, stringHash, css) => {
+  let rule;
+  const dataMediaSelector = `[data-media~="${stringHash}"]`;
+  if (isMedia(query)) {
+    rule = `${query} {${dataMediaSelector} ${css}}`;
+  } else {
+    rule = `${dataMediaSelector}${query} ${css}`;
+  }
+  return rule;
+};
+exports.createCssRule = createCssRule;

package/lib/utils/ssr-media-query/utils/create-declaration-block.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createReactDOMStyle = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle"));
+var _prefixStyles = _interopRequireDefault(require("react-native-web/dist/cjs/modules/prefixStyles"));
+var _hyphenateStyleName = _interopRequireDefault(require("./hyphenate-style-name"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const createDeclarationBlock = style => {
+  const domStyle = (0, _prefixStyles.default)((0, _createReactDOMStyle.default)(style));
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = (0, _hyphenateStyleName.default)(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(';');
+    }
+    return `${prop}:${value} !important`;
+  }).sort().join(';');
+  return `{${declarationsString};}`;
+};
+var _default = createDeclarationBlock;
+exports.default = _default;

package/lib/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _systemConstants = require("@telus-uds/system-constants");
+/**
+ * @typedef { Object } CssStyles
+ * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param {ViewportStyles} viewportStyles
+ * @returns { MediaQueryStyles }
+ */
+function createMediaQueryStyles(viewportStyles) {
+  const viewportsArray = Object.keys(viewportStyles);
+  const mediaQueries = Object.entries(viewportStyles).reduce((acc, _ref) => {
+    let [viewport, styles] = _ref;
+    const minWidth = _systemConstants.viewports.map.get(viewport);
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
+    const maxWidth = _systemConstants.viewports.map.get(nextViewport);
+    const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
+    return {
+      ...acc,
+      [mediaQuery]: styles
+    };
+  }, {});
+  return mediaQueries;
+}
+var _default = createMediaQueryStyles;
+exports.default = _default;

package/lib/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+const toHyphenLower = match => `-${match.toLowerCase()}`;
+const hyphenateStyleName = name => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name];
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
+};
+var _default = hyphenateStyleName;
+exports.default = _default;

package/lib/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasCss = exports.flush = exports.addCss = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const rules = {};
+const hasCss = (id, text) => {
+  var _rules$id$text, _rules$id$text$includ;
+  return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
+};
+exports.hasCss = hasCss;
+const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    var _rules$id;
+    rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
+    rules[id].text = (((_rules$id = rules[id]) === null || _rules$id === void 0 ? void 0 : _rules$id.text) || '') + text;
+  }
+};
+exports.addCss = addCss;
+const flush = () => {
+  if (_Platform.default.OS === 'web') {
+    return /*#__PURE__*/_react.default.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules).map(key => rules[key].text).join('\n')
+      }
+    });
+  }
+  return {};
+};
+exports.flush = flush;

package/lib/utils/ssr.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
+var _inject = require("./ssr-media-query/utils/inject");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /** @typedef {import('react').ComponentType} ReactComponent */
@@ -102,7 +103,7 @@ const ssrStyles = function () {
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), (0, _inject.flush)()];
     }
   };
 };

package/lib-module/utils/index.js

@@ -4,6 +4,7 @@ export * from './children';
 export * from './input';
 export * from './pressability';
 export * from './props';
+export * from './ssr-media-query';
 export { default as info } from './info';
 export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';

package/lib-module/utils/ssr-media-query/create-stylesheet.js

@@ -0,0 +1,68 @@
+import mediaQuery from 'css-mediaquery';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import Platform from "react-native-web/dist/exports/Platform";
+import { addCss } from './utils/inject';
+import createDeclarationBlock from './utils/create-declaration-block';
+import hash from './hash';
+import { isMediaOrPseudo, isMedia, deepClone, createCssRule } from './utils/common';
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  let ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
+    if (Platform.OS === 'web') {
+      cleanStyles = deepClone(stylesWithQuery);
+      mediaQueriesAndPseudoClasses.forEach(query => {
+        var _ids;
+        const css = createDeclarationBlock(stylesWithQuery[key][query]);
+        const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
+        const rule = createCssRule(query, stringHash, css);
+        addCss(`${stringHash}`, rule);
+        delete cleanStyles[key][query];
+        ids = {
+          ...ids,
+          [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
+        };
+      });
+    } else {
+      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+      mediaQueriesAndPseudoClasses.forEach(str => {
+        if (isMedia(str)) {
+          const mqStr = str.replace('@media', '');
+          const {
+            width,
+            height
+          } = Dimensions.get('window');
+          const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+            width,
+            height,
+            orientation: width > height ? 'landscape' : 'portrait',
+            'aspect-ratio': width / height
+          });
+          if (isMatchingMediaQuery) {
+            cleanStyles = {
+              ...cleanStyles,
+              [key]: {
+                ...cleanStyles[key],
+                ...stylesWithQuery[key][str]
+              }
+            };
+          }
+        }
+        delete cleanStyles[key][str];
+      });
+    }
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+export default createStyleSheet;

package/lib-module/utils/ssr-media-query/hash.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-bitwise */
+export default function hash(text) {
+  if (!text) {
+    return '';
+  }
+  let hashValue = 5381;
+  let index = text.length - 1;
+  while (index) {
+    hashValue = hashValue * 33 ^ text.charCodeAt(index);
+    index -= 1;
+  }
+  return (hashValue >>> 0).toString(16);
+}

package/lib-module/utils/ssr-media-query/index.js

@@ -0,0 +1,6 @@
+import createStyleSheet from './create-stylesheet';
+import createMediaQueryStyles from './utils/create-media-query-styles';
+const StyleSheet = {
+  create: createStyleSheet
+};
+export { StyleSheet, createMediaQueryStyles };

package/lib-module/utils/ssr-media-query/utils/common.js

@@ -0,0 +1,15 @@
+const isMedia = query => query.indexOf('@media') === 0;
+const isPseudo = query => query.indexOf(':') === 0;
+const isMediaOrPseudo = query => isMedia(query) || isPseudo(query);
+const deepClone = obj => JSON.parse(JSON.stringify(obj));
+const createCssRule = (query, stringHash, css) => {
+  let rule;
+  const dataMediaSelector = `[data-media~="${stringHash}"]`;
+  if (isMedia(query)) {
+    rule = `${query} {${dataMediaSelector} ${css}}`;
+  } else {
+    rule = `${dataMediaSelector}${query} ${css}`;
+  }
+  return rule;
+};
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule };

package/lib-module/utils/ssr-media-query/utils/create-declaration-block.js

@@ -0,0 +1,16 @@
+import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle';
+import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles';
+import hyphenateStyleName from './hyphenate-style-name';
+const createDeclarationBlock = style => {
+  const domStyle = prefixStyles(createReactDOMStyle(style));
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = hyphenateStyleName(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(';');
+    }
+    return `${prop}:${value} !important`;
+  }).sort().join(';');
+  return `{${declarationsString};}`;
+};
+export default createDeclarationBlock;

package/lib-module/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -0,0 +1,30 @@
+import { viewports } from '@telus-uds/system-constants';
+
+/**
+ * @typedef { Object } CssStyles
+ * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param {ViewportStyles} viewportStyles
+ * @returns { MediaQueryStyles }
+ */
+
+function createMediaQueryStyles(viewportStyles) {
+  const viewportsArray = Object.keys(viewportStyles);
+  const mediaQueries = Object.entries(viewportStyles).reduce((acc, _ref) => {
+    let [viewport, styles] = _ref;
+    const minWidth = viewports.map.get(viewport);
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
+    const maxWidth = viewports.map.get(nextViewport);
+    const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
+    return {
+      ...acc,
+      [mediaQuery]: styles
+    };
+  }, {});
+  return mediaQueries;
+}
+export default createMediaQueryStyles;

package/lib-module/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,12 @@
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+const toHyphenLower = match => `-${match.toLowerCase()}`;
+const hyphenateStyleName = name => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name];
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
+};
+export default hyphenateStyleName;

package/lib-module/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+const rules = {};
+export const hasCss = (id, text) => {
+  var _rules$id$text, _rules$id$text$includ;
+  return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
+};
+export const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    var _rules$id;
+    rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
+    rules[id].text = (((_rules$id = rules[id]) === null || _rules$id === void 0 ? void 0 : _rules$id.text) || '') + text;
+  }
+};
+export const flush = () => {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/React.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules).map(key => rules[key].text).join('\n')
+      }
+    });
+  }
+  return {};
+};

package/lib-module/utils/ssr.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import AppRegistry from "react-native-web/dist/exports/AppRegistry";
+import { flush } from './ssr-media-query/utils/inject';
 /** @typedef {import('react').ComponentType} ReactComponent */
 /** @typedef {import('react').ReactElement} ReactElement */
+
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -94,7 +96,7 @@ export const ssrStyles = function () {
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), flush()];
     }
   };
 };

package/package.json

@@ -13,6 +13,7 @@
     "@telus-uds/system-constants": "^1.3.0",
     "@telus-uds/system-theme-tokens": "^2.46.0",
     "airbnb-prop-types": "^2.16.0",
+    "css-mediaquery": "^0.1.2",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
@@ -73,5 +74,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.69.0"
+  "version": "1.70.0"
 }

package/src/utils/index.js

@@ -4,7 +4,7 @@ export * from './children'
 export * from './input'
 export * from './pressability'
 export * from './props'
-
+export * from './ssr-media-query'
 export { default as info } from './info'
 export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'

package/src/utils/ssr-media-query/create-stylesheet.js

@@ -0,0 +1,61 @@
+import mediaQuery from 'css-mediaquery'
+import { Dimensions, Platform } from 'react-native'
+import { addCss } from './utils/inject'
+import createDeclarationBlock from './utils/create-declaration-block'
+import hash from './hash'
+import { isMediaOrPseudo, isMedia, deepClone, createCssRule } from './utils/common'
+
+const createStyleSheet = (stylesWithQuery) => {
+  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
+  let cleanStyles
+  let ids = {}
+  Object.keys(stylesWithQuery).forEach((key) => {
+    if (!stylesWithQuery?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    if (Platform.OS === 'web') {
+      cleanStyles = deepClone(stylesWithQuery)
+      mediaQueriesAndPseudoClasses.forEach((query) => {
+        const css = createDeclarationBlock(stylesWithQuery[key][query])
+        const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
+        const rule = createCssRule(query, stringHash, css)
+
+        addCss(`${stringHash}`, rule)
+        delete cleanStyles[key][query]
+
+        ids = {
+          ...ids,
+          [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
+        }
+      })
+    } else {
+      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery))
+      mediaQueriesAndPseudoClasses.forEach((str) => {
+        if (isMedia(str)) {
+          const mqStr = str.replace('@media', '')
+          const { width, height } = Dimensions.get('window')
+
+          const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+            width,
+            height,
+            orientation: width > height ? 'landscape' : 'portrait',
+            'aspect-ratio': width / height
+          })
+
+          if (isMatchingMediaQuery) {
+            cleanStyles = {
+              ...cleanStyles,
+              [key]: { ...cleanStyles[key], ...stylesWithQuery[key][str] }
+            }
+          }
+        }
+
+        delete cleanStyles[key][str]
+      })
+    }
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet

package/src/utils/ssr-media-query/hash.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-bitwise */
+export default function hash(text) {
+  if (!text) {
+    return ''
+  }
+
+  let hashValue = 5381
+  let index = text.length - 1
+
+  while (index) {
+    hashValue = (hashValue * 33) ^ text.charCodeAt(index)
+    index -= 1
+  }
+
+  return (hashValue >>> 0).toString(16)
+}

package/src/utils/ssr-media-query/index.js

@@ -0,0 +1,8 @@
+import createStyleSheet from './create-stylesheet'
+import createMediaQueryStyles from './utils/create-media-query-styles'
+
+const StyleSheet = {
+  create: createStyleSheet
+}
+
+export { StyleSheet, createMediaQueryStyles }

package/src/utils/ssr-media-query/utils/common.js

@@ -0,0 +1,20 @@
+const isMedia = (query) => query.indexOf('@media') === 0
+const isPseudo = (query) => query.indexOf(':') === 0
+const isMediaOrPseudo = (query) => isMedia(query) || isPseudo(query)
+
+const deepClone = (obj) => JSON.parse(JSON.stringify(obj))
+
+const createCssRule = (query, stringHash, css) => {
+  let rule
+  const dataMediaSelector = `[data-media~="${stringHash}"]`
+
+  if (isMedia(query)) {
+    rule = `${query} {${dataMediaSelector} ${css}}`
+  } else {
+    rule = `${dataMediaSelector}${query} ${css}`
+  }
+
+  return rule
+}
+
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule }

package/src/utils/ssr-media-query/utils/create-declaration-block.js

@@ -0,0 +1,21 @@
+import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle'
+import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles'
+import hyphenateStyleName from './hyphenate-style-name'
+
+const createDeclarationBlock = (style) => {
+  const domStyle = prefixStyles(createReactDOMStyle(style))
+  const declarationsString = Object.keys(domStyle)
+    .map((property) => {
+      const value = domStyle[property]
+      const prop = hyphenateStyleName(property)
+      if (Array.isArray(value)) {
+        return value.map((v) => `${prop}:${v}`).join(';')
+      }
+      return `${prop}:${value} !important`
+    })
+    .sort()
+    .join(';')
+  return `{${declarationsString};}`
+}
+
+export default createDeclarationBlock

package/src/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -0,0 +1,31 @@
+import { viewports } from '@telus-uds/system-constants'
+
+/**
+ * @typedef { Object } CssStyles
+ * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param {ViewportStyles} viewportStyles
+ * @returns { MediaQueryStyles }
+ */
+
+function createMediaQueryStyles(viewportStyles) {
+  const viewportsArray = Object.keys(viewportStyles)
+  const mediaQueries = Object.entries(viewportStyles).reduce((acc, [viewport, styles]) => {
+    const minWidth = viewports.map.get(viewport)
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1]
+    const maxWidth = viewports.map.get(nextViewport)
+
+    const mediaQuery = `@media (min-width: ${minWidth}px)${
+      maxWidth ? ` and (max-width: ${maxWidth}px)` : ''
+    }`
+    return { ...acc, [mediaQuery]: styles }
+  }, {})
+
+  return mediaQueries
+}
+
+export default createMediaQueryStyles

package/src/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,15 @@
+const uppercasePattern = /[A-Z]/g
+const msPattern = /^ms-/
+const cache = {}
+
+const toHyphenLower = (match) => `-${match.toLowerCase()}`
+
+const hyphenateStyleName = (name) => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name]
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower)
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName
+}
+
+export default hyphenateStyleName

package/src/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Platform } from 'react-native'
+
+const rules = {}
+
+export const hasCss = (id, text) => {
+  return !!rules[id] && !!rules[id].text?.includes?.(text)
+}
+
+export const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    rules[id] = rules?.[id] || {}
+    rules[id].text = (rules[id]?.text || '') + text
+  }
+}
+
+export const flush = () => {
+  if (Platform.OS === 'web') {
+    return React.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules)
+          .map((key) => rules[key].text)
+          .join('\n')
+      }
+    })
+  }
+  return {}
+}

package/src/utils/ssr.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { AppRegistry } from 'react-native'
+import { flush } from './ssr-media-query/utils/inject'
 /** @typedef {import('react').ComponentType} ReactComponent */
 /** @typedef {import('react').ReactElement} ReactElement */
 
@@ -80,7 +81,8 @@ export const ssrStyles = (appName = 'UDS app', { styleGetters = [], collectStyle
      */
     getStyles: (...existingStyles) => {
       if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles')
-      return [...existingStyles, ...styleGetters.flatMap((getter) => getter())]
+
+      return [...existingStyles, ...styleGetters.flatMap((getter) => getter()), flush()]
     }
   }
 }