@biom3/react - npm Package Compare versions

Comparing version 0.0.4-alpha to 0.0.5-alpha

cypress/support/component.ts

@@ -17,8 +17,9 @@ // ***********************************************************
 // Import commands.js using ES2015 syntax:
-import "./commands";
-import "@cypress/code-coverage/support";
+import '@cypress/code-coverage/support';
+import 'cypress-real-events';
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
-import { mount } from "cypress/react";
+import { mount } from 'cypress/react';
 
@@ -37,9 +38,9 @@ // Augment the Cypress namespace to include type definitions for
 
-Cypress.Commands.add("mount", mount); // Example use: cy.mount(<MyComponent />)
+Cypress.Commands.add('mount', mount); // Example use: cy.mount(<MyComponent />)
 
 const compareColor =
   (color: string, property: string) => (targetElement: Element[]) => {
-    const tempElement = document.createElement("div");
+    const tempElement = document.createElement('div');
     tempElement.style.color = color;
-    tempElement.style.display = "none"; // make sure it doesn't actually render
+    tempElement.style.display = 'none'; // make sure it doesn't actually render
     document.body.appendChild(tempElement); // append so that `getComputedStyle` actually works
@@ -56,5 +57,5 @@
   (image: string, property: string) => (targetElement: Element[]) => {
-    const tempElement = document.createElement("div");
-    tempElement.style.background = image.replace(";", "");
-    tempElement.style.display = "none"; // make sure it doesn't actually render
+    const tempElement = document.createElement('div');
+    tempElement.style.background = image.replace(';', '');
+    tempElement.style.display = 'none'; // make sure it doesn't actually render
     document.body.appendChild(tempElement); // append so that `getComputedStyle` actually works
@@ -68,9 +69,9 @@
 Cypress.Commands.overwrite(
-  "should",
+  'should',
   (originalFn: any, subject: any, expectation: any, ...args: any) => {
     const customMatchers = {
-      "have.backgroundImage": compareBgImage(args[0], "backgroundImage"),
-      "have.backgroundColor": compareColor(args[0], "backgroundColor"),
-      "have.color": compareColor(args[0], "color"),
-      "have.borderColor": compareColor(args[0], "borderColor"),
+      'have.backgroundImage': compareBgImage(args[0], 'backgroundImage'),
+      'have.backgroundColor': compareColor(args[0], 'backgroundColor'),
+      'have.color': compareColor(args[0], 'color'),
+      'have.borderColor': compareColor(args[0], 'borderColor'),
     };
@@ -80,3 +81,3 @@
     if (
-      typeof expectation === "string" &&
+      typeof expectation === 'string' &&
       (customMatchers as any)[expectation]
@@ -87,3 +88,3 @@ ) {
     return originalFn(subject, expectation, ...args);
-  }
+  },
 );

nyc.config.js

@@ -8,12 +8,14 @@ // @TODO: once we have components tested, we need to bump this to 90-95
   statements: COVERAGE_THRESHOLD,
-  branch: COVERAGE_THRESHOLD - 10,
-  extends: "@istanbuljs/nyc-config-typescript",
-  include: ["src/**/*.ts", "src/**/*.tsx"],
-  reporter: ["text-summary", "lcov"],
+  branch: COVERAGE_THRESHOLD,
+  extends: '@istanbuljs/nyc-config-typescript',
+  include: ['src/**/*.ts', 'src/**/*.tsx'],
+  reporter: ['text-summary', 'lcov'],
   exclude: [
-    "src/**/*.test.tsx",
-    "src/**/*test.ts",
-    "*.config.ts",
-    "*.config.js",
+    'dist/**/*',
+    'src/**/*.test.tsx',
+    'src/mocks/*',
+    '*.config.ts',
+    '*.config.js',
+    'src/components/Icons/Icon*.tsx',
   ],
 };

package.json

 {
   "name": "@biom3/react",
-  "version": "0.0.4-alpha",
+  "version": "0.0.5-alpha",
   "main": "./dist/index.js",
@@ -14,2 +14,3 @@ "types": "./dist/index.d.ts",
     "test:run": "NODE_ENV=test cypress run --component",
+    "test:run:localcov": "NODE_ENV=test cypress run --component --env coverage=true",
     "test:ci": "NODE_ENV=test cypress run --component --env coverage=true --record",
@@ -36,4 +37,7 @@ "typecheck": "tsc --noEmit",
     "cypress": "^12.1.0",
+    "cypress-real-events": "^1.7.4",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
+    "next": "13.0.0",
+    "next-router-mock": "^0.8.0",
     "tsconfig": "*",
@@ -49,2 +53,3 @@ "tsup": "^6.5.0",
     "lodash.merge": "^4.6.2",
+    "querystring": "^0.2.1",
     "react": "^18.2.0",
@@ -51,0 +56,0 @@ "ts-deepmerge": "^5.0.0"

readme.md

@@ -22,3 +22,3 @@ ![logohd](https://user-images.githubusercontent.com/1452237/205757058-6f0b6602-af1a-4ef9-a7d0-51c5feba1b80.png)
 ```tsx
-import { Box, IconArrowBackward } from "@biom3/react";
+import { Box, IconArrowBackward } from '@biom3/react';
 ```
@@ -34,2 +34,50 @@
 
+### `sx` Nesting
+
+For now, nesting inside `sx` will only allow up to 1 level of nesting. This means that when you are composing custom `sx` styles, you will need to write them like:
+
+```tsx
+<PrimaryButton
+  sx={{
+    background: 'base.gradient.3',
+    span: { color: 'base.color.brand.1' },
+    '&:hover': {
+      background: 'transparent',
+      boxShadow: 'inset 0 0 0 5px rgba(0,0,0,0.1)',
+    },
+    '&:hover span': {
+      color: 'base.color.brand.2',
+    },
+    '&:hover::before': {
+      backgroundImage: 'base.gradient.3',
+    },
+  }}
+>
+  button text
+</PrimaryButton>
+```
+
+as opposed to:
+
+```tsx
+<PrimaryButton
+  sx={{
+    background: 'base.gradient.3',
+    span: { color: 'base.color.brand.1' },
+    '&:hover': {
+      background: 'transparent',
+      boxShadow: 'inset 0 0 0 5px rgba(0,0,0,0.1)',
+      '& span': {
+        color: 'base.color.brand.2',
+      },
+      '&::before': {
+        backgroundImage: 'base.gradient.3',
+      },
+    },
+  }}
+>
+  button text
+</PrimaryButton>
+```
+
 ### Responsive `sx` props
@@ -90,3 +138,3 @@
 ```tsx
-import { Theme } from "@emotion/react";
+import { Theme } from '@emotion/react';
 <Box
@@ -93,0 +141,0 @@ sx={{

src/components/index.ts

@@ -1,5 +0,8 @@
-export * from "./Box";
-export * from "./Heading";
-export * from "./Caption";
-export * from "./Body";
-export * from "./Icons";
+export * from './Body';
+export * from './Box';
+export * from './Buttons';
+// @TODO: Link component is not yet ready for release.
+// export * from './Buttons';
+export * from './Caption';
+export * from './Heading';
+export * from './Icons';

src/hooks/index.ts

@@ -1,1 +0,3 @@
-export { useForwardLocalDomRef } from "./useForwardLocalDomRef";
+export { useConvertSxToEmotionStyles } from './useConvertSxToEmotionStyles';
+export { useForwardLocalDomRef } from './useForwardLocalDomRef';
+export { useTheme } from './useTheme';

src/hooks/useForwardLocalDomRef.ts

@@ -1,5 +0,5 @@
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useEffect, useRef } from 'react';
 
 export const useForwardLocalDomRef = <
-  T extends HTMLOrSVGElement = HTMLOrSVGElement
+  T extends HTMLOrSVGElement = HTMLOrSVGElement,
 >({
@@ -6,0 +6,0 @@ domRef,

src/index.ts

@@ -1,3 +0,4 @@
-export * from "./components";
-export * from "./providers";
-export * from "./types";
+export * from './components';
+export * from './hooks';
+export * from './providers';
+export * from './types';

src/providers/BiomeThemeProvider/index.ts

@@ -1,1 +0,1 @@
-export { BiomeThemeProvider } from "./BiomeThemeProvider";
+export { BiomeThemeProvider } from './BiomeThemeProvider';

src/providers/BiomeThemeProvider/readme.md

@@ -17,3 +17,3 @@ # BiomeThemeProvider
 ```tsx
-import { onDarkBase, ui } from "@biom3/design-tokens";
+import { onDarkBase, ui } from '@biom3/design-tokens';
 <BiomeThemeProvider theme={{ base: onDarkBase, ui }}>
@@ -48,3 +48,3 @@ <App />
 ```tsx
-import { ui, onLightBase, onDarkBase } from "@biom3/design-tokens";
+import { ui, onLightBase, onDarkBase } from '@biom3/design-tokens';
 const DEFAULT_THEME = { base: onLightBase, ui };
@@ -58,4 +58,4 @@ export const LightOrDarkThemeProvider = ({
   // triggered from anywhere in the component tree
-  const [themeBrightness, setThemeBrightness] = useState<"light" | "dark">(
-    "light"
+  const [themeBrightness, setThemeBrightness] = useState<'light' | 'dark'>(
+    'light',
   );
@@ -66,3 +66,3 @@ // @NOTE: default to "light" theme
   useEffect(() => {
-    if (themeBrightness === "light") {
+    if (themeBrightness === 'light') {
       setTheme(DEFAULT_THEME);
@@ -69,0 +69,0 @@ } else {

src/providers/index.ts

@@ -1,1 +0,1 @@
-export { BiomeThemeProvider } from "./BiomeThemeProvider";
+export { BiomeThemeProvider } from './BiomeThemeProvider';

src/types/externalTypeOverides.d.ts

@@ -1,6 +0,6 @@
-import { FullBaseTheme } from "./theme";
-import { ProcessedUiTokens } from "@biom3/design-tokens";
-import type * as CSS from "csstype";
+import { ProcessedUiTokens } from '@biom3/design-tokens';
+import 'csstype';
+import { FullBaseTheme } from './theme';
 
-declare module "csstype" {
+declare module 'csstype' {
   interface Properties {
@@ -12,3 +12,3 @@ // Add a missing property
 
-declare module "@emotion/react" {
+declare module '@emotion/react' {
   export interface Theme {
@@ -15,0 +15,0 @@ // Customise emotion/react's Theme object to be shaped for BIOME

src/types/icon.ts

@@ -1,7 +0,9 @@
-import { BaseComponentPropTypes } from "./shared";
-import { SvgSxComponentProps } from "./sxProps";
+import { BaseComponentPropTypes } from './shared';
+import { SvgSxComponentProps } from './sxProps';
 
 export type IconProps = BaseComponentPropTypes<SVGSVGElement> &
-  SvgSxComponentProps & { variant?: "bold" | "regular" };
+  SvgSxComponentProps & { variant?: 'bold' | 'regular' };
 
-export type SingleVariantIconProps = Omit<IconProps, "variant">;
+export type SingleVariantIconProps = Omit<IconProps, 'variant'>;
+
+export type GenericIconProps = IconProps | SingleVariantIconProps;

src/types/index.ts

@@ -1,6 +0,5 @@
-export type { FullBaseTheme, FullUiTheme } from "./theme";
-export type { IconProps, SingleVariantIconProps } from "./icon";
-export type { AsDomProps, AsDomComponentProps } from "./dom";
-export type { ResponsiveKey, BreakpointTheme } from "./responsive";
-export type { BaseComponentPropTypes } from "./shared";
-export * from "./sxProps";
+export type { AsDomComponentProps, AsDomProps } from './asDom';
+export type { IconProps, SingleVariantIconProps } from './icon';
+export type { BreakpointTheme, ResponsiveKey } from './responsive';
+export type { BaseComponentPropTypes } from './shared';
+export * from './sxProps';

src/types/responsive.ts

@@ -1,4 +0,4 @@
-import { BaseTokens } from "@biom3/design-tokens";
+import { BaseTokens } from '@biom3/design-tokens';
 
-export type ResponsiveKey = keyof BaseTokens["breakpoint"];
+export type ResponsiveKey = keyof BaseTokens['breakpoint'];
 
@@ -5,0 +5,0 @@ export type BreakpointTheme = {

src/types/shared.ts

@@ -1,8 +0,9 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
 export type BaseComponentPropTypes<
-  T extends HTMLOrSVGElement = HTMLOrSVGElement
+  T extends HTMLOrSVGElement = HTMLOrSVGElement,
 > = {
   testId?: string;
   domRef?: MutableRefObject<T | null>;
+  onClick?: () => void;
 };

src/types/sxProps.ts

@@ -1,7 +0,6 @@
-import { ValidSxValues } from "@biom3/design-tokens";
-import { Theme } from "@emotion/react";
-import { ResponsiveKey } from "./responsive";
+import { BiomeTheme, ValidSxValues } from '@biom3/design-tokens';
+import { ResponsiveKey } from './responsive';
 
 export type Measurement = ValidSxValues | MeasurementAsFunction;
-export type MeasurementAsFunction = (theme: Theme) => ValidSxValues;
+export type MeasurementAsFunction = (theme: BiomeTheme) => ValidSxValues;
 export type ResponsiveMeasurement = Measurement | null;
@@ -85,39 +84,39 @@ export type ResponsiveObjectMeasurement = {
 export const shortHandCssRuleMapping = {
-  c: "color",
-  d: "display",
-  f: "flex",
-  o: "order",
-  pos: "position",
-  m: "margin",
-  mt: "marginTop",
-  mb: "marginButton",
-  ml: "marginLeft",
-  mr: "marginRight",
-  mx: "marginX",
-  my: "marginY",
-  p: "padding",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pl: "paddingLeft",
-  px: "paddingX",
-  py: "paddingY",
-  w: "width",
-  maxw: "maxWidth",
-  minw: "minWidth",
-  h: "height",
-  minh: "minHeight",
-  maxh: "maxHeight",
-  bgc: "backgroundColor",
-  bgi: "backgroundImage",
-  bg: "background",
-  b: "border",
-  bl: "borderLeft",
-  br: "borderRight",
-  bt: "borderTop",
-  bb: "borderBottom",
-  brad: "borderRadius",
-  bradtl: "borderTopLeftRadius",
-  bradtr: "borderTopRightRadius",
-  bradbl: "borderBottomLeftRadius",
-  bradbr: "borderBottomRightRadius",
+  c: 'color',
+  d: 'display',
+  f: 'flex',
+  o: 'order',
+  pos: 'position',
+  m: 'margin',
+  mt: 'marginTop',
+  mb: 'marginButton',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mx: 'marginX',
+  my: 'marginY',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pl: 'paddingLeft',
+  px: 'paddingX',
+  py: 'paddingY',
+  w: 'width',
+  maxw: 'maxWidth',
+  minw: 'minWidth',
+  h: 'height',
+  minh: 'minHeight',
+  maxh: 'maxHeight',
+  bgc: 'backgroundColor',
+  bgi: 'backgroundImage',
+  bg: 'background',
+  b: 'border',
+  bl: 'borderLeft',
+  br: 'borderRight',
+  bt: 'borderTop',
+  bb: 'borderBottom',
+  brad: 'borderRadius',
+  bradtl: 'borderTopLeftRadius',
+  bradtr: 'borderTopRightRadius',
+  bradbl: 'borderBottomLeftRadius',
+  bradbr: 'borderBottomRightRadius',
 } as const;
@@ -211,2 +210,11 @@
 
+type BoxShadowProps = MeasurementAndResponsiveMeasurement;
+export type BoxShadowSxProps = {
+  boxShadow: BoxShadowProps;
+};
+
+export type DescendantSxProps = {
+  [key: string]: SxProps;
+};
+
 // @TODO - this needs to be more specific - only certain tokens for specific props?
@@ -225,3 +233,4 @@ export type SxProps = Partial<PositionSxProps> &
   Partial<GridSxProps> &
-  Partial<TransformCxssProps>;
+  Partial<TransformCxssProps> &
+  Partial<BoxShadowSxProps>;
 
@@ -236,6 +245,7 @@ export type SvgElementSxProps = Partial<PositionSxProps> &
   Partial<TransformCxssProps> &
-  Partial<SvgSxProps>;
+  Partial<SvgSxProps> &
+  Partial<BoxShadowSxProps>;
 
 export type SxComponentProps = {
-  sx?: SxProps;
+  sx?: SxProps | DescendantSxProps;
 };
@@ -242,0 +252,0 @@

src/utils/colorHelpers.ts

@@ -1,2 +0,2 @@
-import { SxProps } from "../types";
+import { SxProps } from '../types';
 
@@ -27,5 +27,5 @@ export function hexToRgb(hex: string): { r: number; g: number; b: number } {
   const matches = rgba.match(
-    /rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/
+    /rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/,
   );
-  if (!matches) return "";
+  if (!matches) return '';
 
@@ -32,0 +32,0 @@ const [, r, g, b, a] = matches;

src/utils/componentHelpers.ts

@@ -1,10 +0,10 @@
-import { jsx } from "@emotion/react";
-import { ReactElement } from "react";
+import { jsx } from '@emotion/react';
+import { ReactElement } from 'react';
 
 type Props = { [key: string]: unknown };
-export type ReactElementWithRef = ReactElement & { ref: HTMLOrSVGElement };
+export type ReactElementWithRef = ReactElement & { ref?: HTMLOrSVGElement };
 
 export const cloneElementWithCssProp = (
   element: ReactElementWithRef,
-  props: Props
+  props: Props,
 ) =>
@@ -11,0 +11,0 @@ jsx(element.type, {

src/utils/sharedStyleHelpers.ts

@@ -1,6 +0,6 @@
-import { Theme } from "@emotion/react";
-import merge from "ts-deepmerge";
-import { BaseTokens } from "@biom3/design-tokens";
+import { BaseTokens } from '@biom3/design-tokens';
+import { Theme } from '@emotion/react';
+import merge from 'ts-deepmerge';
 
-type _TupleOf<T, N extends number, R extends unknown[]> = R["length"] extends N
+type _TupleOf<T, N extends number, R extends unknown[]> = R['length'] extends N
   ? R
@@ -17,6 +17,6 @@ : _TupleOf<T, N, [T, ...R]>;
 // Type Helpers
-type GetFontWeights<T extends keyof BaseTokens["text"]> =
-  keyof BaseTokens["text"][T][keyof BaseTokens["text"][T]];
-type GetTypeVariants<T extends keyof BaseTokens["text"]> =
-  keyof BaseTokens["text"][T];
+type GetFontWeights<T extends keyof BaseTokens['text']> =
+  keyof BaseTokens['text'][T][keyof BaseTokens['text'][T]];
+type GetTypeVariants<T extends keyof BaseTokens['text']> =
+  keyof BaseTokens['text'][T];
 
@@ -28,3 +28,3 @@ // @TODO - improve this! add and remove brands at better places.
 
-type RemoveErrorBrand<T> = T extends ErrorBrand<any> ? never : T;
+export type RemoveErrorBrand<T> = T extends ErrorBrand<any> ? never : T;
 
@@ -45,21 +45,21 @@ // @TODO - this is hardcoded for now to allow breakpoints of up to 5
       Fifth: T | null,
-      ...ErrorMessage: ErrorBrand<"You've exceeded the breakpoint limit!">[]
+      ...ErrorMessage: ErrorBrand<"You've exceeded the breakpoint limit!">[],
     ];
 
-function isError(key: any): key is ErrorBrand<any> {
-  return typeof key === "object" && key !== null && "_error" in key;
+export function isError(key: any): key is ErrorBrand<any> {
+  return typeof key === 'object' && key !== null && '_error' in key;
 }
 
 const DEFAULT_TEXT_VARIANTS = {
-  heading: "medium",
-  body: "medium",
-  caption: "medium",
+  heading: 'medium',
+  body: 'medium',
+  caption: 'medium',
 } as const;
 const DEFAULT_TEXT_WEIGHTS = {
-  heading: "regular",
-  body: "regular",
-  caption: "regular",
+  heading: 'regular',
+  body: 'regular',
+  caption: 'regular',
 } as const;
 
-export function renderResponsiveTextStyles<T extends keyof BaseTokens["text"]>({
+export function renderResponsiveTextStyles<T extends keyof BaseTokens['text']>({
   variant,
@@ -97,3 +97,3 @@ weight,
                   responsiveVariant
-                ] as BaseTokens["text"]["heading"]["2xLarge"]
+                ] as BaseTokens['text']['heading']['2xLarge']
               ).regular.fontSize,
@@ -103,3 +103,3 @@ lineHeight: (
                 responsiveVariant
-              ] as BaseTokens["text"]["heading"]["2xLarge"]
+              ] as BaseTokens['text']['heading']['2xLarge']
             ).regular.lineHeight,
@@ -110,3 +110,3 @@ },
       return {};
-    })
+    }),
   );
@@ -128,3 +128,3 @@
                 responsiveWeight
-              ] as BaseTokens["text"]["heading"]["2xLarge"]["regular"]
+              ] as BaseTokens['text']['heading']['2xLarge']['regular']
             ).fontWeight,
@@ -135,3 +135,3 @@ },
       return {};
-    })
+    }),
   );
@@ -138,0 +138,0 @@

src/utils/sxToEmotionStyles.ts

@@ -1,6 +0,10 @@
-import { Theme } from "@emotion/react";
-import merge from "ts-deepmerge";
-import type * as CSS from "csstype";
-import { Gradient, smartPickTokenValue } from "@biom3/design-tokens";
 import {
+  BiomeTheme,
+  Gradient,
+  smartPickTokenValue,
+} from '@biom3/design-tokens';
+import { Theme } from '@emotion/react';
+import type * as CSS from 'csstype';
+import merge from 'ts-deepmerge';
+import {
   MeasurementAndResponsiveMeasurement,
@@ -11,7 +15,7 @@ ResponsiveMeasurement,
   SxProps,
-} from "../types/sxProps";
+} from '../types/sxProps';
 
 export function hasKey<K extends string>(
   key: K,
-  object: {}
+  object: {},
 ): object is { [_ in K]: keyof SxProps } {
@@ -21,3 +25,3 @@ // @TODO: would be awesome to try and get this working
   // ): object is { [_ in K]: {} } {
-  return typeof object === "object" && object !== null && key in object;
+  return typeof object === 'object' && object !== null && key in object;
 }
@@ -37,3 +41,3 @@
   rule: keyof SxProps,
-  value: string
+  value: string,
 ): CSS.Properties {
@@ -51,3 +55,3 @@ const rulePrefix = rule.substring(0, rule.length - 1);
   value: string | null,
-  themeProps: Theme
+  themeProps: Theme,
 ): CSS.Properties {
@@ -58,3 +62,3 @@ if (!value) return {};
 
-  const isGradient = typeof valueFromToken === "object";
+  const isGradient = typeof valueFromToken === 'object';
   if (isGradient && rule.match(/background$|backgroundImage$|^color/)) {
@@ -69,7 +73,7 @@ const gradient = valueFromToken;
           ...styleObject,
-          backgroundClip: "text",
-          textFillColor: "transparent",
+          backgroundClip: 'text',
+          textFillColor: 'transparent',
         }
       : styleObject;
-  } else if (rule.match(/X$|Y$/) && typeof valueFromToken === "string") {
+  } else if (rule.match(/X$|Y$/) && typeof valueFromToken === 'string') {
     return applyXandYStyleAmount(rule, valueFromToken);
@@ -84,3 +88,3 @@ } else {
   values: ResponsiveMeasurement[],
-  themeProps: Theme
+  themeProps: Theme,
 ) {
@@ -92,3 +96,3 @@ const [defaultValue, ...responsiveValues] = values;
       const cssValue =
-        typeof responsiveValue === "function"
+        typeof responsiveValue === 'function'
           ? responsiveValue(themeProps)
@@ -101,3 +105,3 @@ : responsiveValue;
         : {};
-    }
+    },
   );
@@ -108,6 +112,6 @@ const styles: CSS.Properties = {
           rule,
-          typeof defaultValue === "function"
+          typeof defaultValue === 'function'
             ? defaultValue(themeProps)
             : defaultValue,
-          themeProps
+          themeProps,
         )
@@ -123,3 +127,3 @@ : {}),
   values: ResponsiveObjectMeasurement,
-  themeProps: Theme
+  themeProps: BiomeTheme,
 ) {
@@ -136,29 +140,42 @@ const { default: defaultProp, ...responsiveProps } = values;
 
+// @TODO: the types here are not great. might need some work. :(
+export function renderDescendantStylesFromObject(
+  descendantSelector: string,
+  descendantValue: {
+    [key: string]: string | ((theme: BiomeTheme) => string) | null;
+  },
+  themeProps: BiomeTheme,
+) {
+  const descendantStyles = {
+    [descendantSelector]: {},
+  };
+  let key: keyof typeof descendantValue;
+  for (key in descendantValue) {
+    const rule = convertShorthandRule(key as keyof SxProps);
+    const value = descendantValue[key];
+    descendantStyles[descendantSelector] = merge(
+      descendantStyles[descendantSelector],
+      applyStyleAmount(
+        rule,
+        typeof value === 'function' ? value(themeProps) : value,
+        themeProps,
+      ),
+    );
+  }
+  return descendantStyles;
+}
+
 export function chooseWhichStylesToRender(
   rule: keyof SxProps,
   value: MeasurementAndResponsiveMeasurement,
-  themeProps: Theme
+  themeProps: Theme,
 ) {
-  const cssValue = typeof value === "function" ? value(themeProps) : value;
+  const cssValue = typeof value === 'function' ? value(themeProps) : value;
   return Array.isArray(cssValue)
     ? renderResponsiveStyles(rule, cssValue, themeProps)
-    : typeof cssValue === "object"
+    : typeof cssValue === 'object' && cssValue.default
     ? renderResponsiveStylesFromObject(rule, cssValue, themeProps)
+    : typeof cssValue === 'object'
+    ? renderDescendantStylesFromObject(rule, cssValue, themeProps)
     : applyStyleAmount(rule, cssValue, themeProps);
 }
-
-export function convertSxToEmotionStyles(sx: SxProps, themeProps: Theme) {
-  let styles: CSS.Properties[] = [];
-  let rule: keyof SxProps;
-  for (rule in sx) {
-    const value = sx[rule];
-    const longHandRule = convertShorthandRule(rule);
-    value &&
-      styles.push(chooseWhichStylesToRender(longHandRule, value, themeProps));
-  }
-  const flattened = merge({}, ...styles);
-
-  // This is interesting - why has everything become mandatory here?
-  // ! this is a bandaid solution.
-  return flattened as Partial<typeof flattened>;
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

926059

increased by18.93%

Number of package files

146

increased by17.74%

Lines of code

12473

increased by24.36%

Number of lines in readme file

193

increased by33.1%

Worsened metrics

Dependency count

8

increased by14.29%

Dev dependency count

21

increased by16.67%

Dependency changes

• + Addedquerystring@^0.2.1

• + Addedquerystring@0.2.1(transitive)