@voiceflow/style 1.1.0

package/src/__fixtures__/InlineThemedButton/index.ts

@@ -0,0 +1,4 @@
+import { InlineThemedButton as InlineThemedButtonComponent } from './InlineThemedButton.component';
+import * as css from './InlineThemedButton.css';
+
+export const InlineThemedButton = Object.assign(InlineThemedButtonComponent, { css });

package/src/__fixtures__/InlineVarButton/InlineVarButton.component.tsx

@@ -0,0 +1,12 @@
+import type { ButtonProps } from '../Button';
+import * as S from './InlineVarButton.styled';
+
+export interface InlineVarButtonProps extends ButtonProps {
+  brandColor: string;
+}
+
+export const InlineVarButton: React.FC<InlineVarButtonProps> = ({ brandColor, onClick, children }) => (
+  <S.Base onClick={onClick} vars={{ brandColor }}>
+    {children}
+  </S.Base>
+);

package/src/__fixtures__/InlineVarButton/InlineVarButton.css.ts

@@ -0,0 +1,12 @@
+import { createVar, style } from '@/main';
+
+export const colorVar = createVar();
+
+export const base = style({
+  vars: {
+    [colorVar]: 'red',
+  },
+
+  backgroundColor: colorVar,
+  borderRadius: 0,
+});

package/src/__fixtures__/InlineVarButton/InlineVarButton.styled.ts

@@ -0,0 +1,10 @@
+import { styled } from '@/main';
+
+import { Button } from '../Button';
+import { base, colorVar } from './InlineVarButton.css';
+
+export const Base = styled.button([Button.Base, base], {
+  vars: {
+    brandColor: colorVar,
+  },
+});

package/src/__fixtures__/InlineVarButton/index.ts

@@ -0,0 +1,4 @@
+import { InlineVarButton as InlineVarButtonComponent } from './InlineVarButton.component';
+import * as css from './InlineVarButton.css';
+
+export const InlineVarButton = Object.assign(InlineVarButtonComponent, { css });

package/src/__fixtures__/RecipeButton/RecipeButton.component.tsx

@@ -0,0 +1,13 @@
+import type { RecipeVariants } from '@/main';
+
+import type { ButtonProps } from '../Button';
+import type { complex } from './RecipeButton.css';
+import * as S from './RecipeButton.styled';
+
+export type RecipeButtonProps = ButtonProps & RecipeVariants<typeof complex>;
+
+export const RecipeButton: React.FC<RecipeButtonProps> = ({ color, fontSize, onClick, children }) => (
+  <S.Base variants={{ color, fontSize }} onClick={onClick}>
+    {children}
+  </S.Base>
+);

package/src/__fixtures__/RecipeButton/RecipeButton.css.ts

@@ -0,0 +1,22 @@
+import { recipe } from '@/main';
+
+export const complex = recipe({
+  base: {
+    border: '1px dashed black',
+  },
+  variants: {
+    color: {
+      ok: { backgroundColor: 'cyan' },
+      warn: { backgroundColor: 'orange' },
+    },
+    fontSize: {
+      sm: { fontSize: 10 },
+      md: { fontSize: 14 },
+      lg: { fontSize: 18 },
+    },
+  },
+
+  defaultVariants: {
+    fontSize: 'lg',
+  },
+});

package/src/__fixtures__/RecipeButton/RecipeButton.styled.ts

@@ -0,0 +1,6 @@
+import { styled } from '@/main';
+
+import { Button } from '../Button';
+import { complex } from './RecipeButton.css';
+
+export const Base = styled.button(complex, [Button.Base]);

package/src/__fixtures__/RecipeButton/index.ts

@@ -0,0 +1,4 @@
+import { RecipeButton as RecipeButtonComponent } from './RecipeButton.component';
+import * as css from './RecipeButton.css';
+
+export const RecipeButton = Object.assign(RecipeButtonComponent, { css });

package/src/__fixtures__/ReuseCSS/ReuseCSS.component.tsx

@@ -0,0 +1,8 @@
+import type { ButtonProps } from '../Button';
+import { base } from './ReuseCSS.css';
+
+export const ReuseCSS: React.FC<ButtonProps> = ({ onClick, children }) => (
+  <button className={base} onClick={onClick}>
+    {children}
+  </button>
+);

package/src/__fixtures__/ReuseCSS/ReuseCSS.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@/main';
+
+import { Button } from '../Button';
+
+export const base = style([
+  Button.css.base,
+  {
+    backgroundColor: 'red',
+    borderRadius: 0,
+  },
+]);

package/src/__fixtures__/ReuseCSS/index.ts

@@ -0,0 +1,4 @@
+import { ReuseCSS as ReuseCSSComponent } from './ReuseCSS.component';
+import * as css from './ReuseCSS.css';
+
+export const ReuseCSS = Object.assign(ReuseCSSComponent, { css });

package/src/__fixtures__/ReuseStyled/ReuseStyled.component.tsx

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '../Button';
+import * as S from './ReuseStyled.styled';
+
+export const ReuseStyled: React.FC<ButtonProps> = ({ onClick, children }) => (
+  <S.Base onClick={onClick}>{children}</S.Base>
+);

package/src/__fixtures__/ReuseStyled/ReuseStyled.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@/main';
+
+export const override = style({
+  border: '1px solid red',
+  margin: 2,
+});

package/src/__fixtures__/ReuseStyled/ReuseStyled.styled.ts

@@ -0,0 +1,6 @@
+import { styled } from '@/main';
+
+import { Button } from '../Button';
+import { override } from './ReuseStyled.css';
+
+export const Base = styled.button([Button.Base, override]);

package/src/__fixtures__/ReuseStyled/index.ts

@@ -0,0 +1,4 @@
+import { ReuseStyled as ReuseStyledComponent } from './ReuseStyled.component';
+import * as css from './ReuseStyled.css';
+
+export const ReuseStyled = Object.assign(ReuseStyledComponent, { css });

package/src/__fixtures__/ThemedButton/ThemedButton.component.tsx

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '../Button';
+import * as S from './ThemedButton.styled';
+
+export const ThemedButton: React.FC<ButtonProps> = ({ onClick, children }) => (
+  <S.Base onClick={onClick}>{children}</S.Base>
+);

package/src/__fixtures__/ThemedButton/ThemedButton.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@/main';
+
+import * as Theme from '../theme.css';
+
+export const themed = style({
+  color: Theme.vars.color.brand,
+  borderRadius: 0,
+});

package/src/__fixtures__/ThemedButton/ThemedButton.styled.ts

@@ -0,0 +1,6 @@
+import { styled } from '@/main';
+
+import { Button } from '../Button';
+import { themed } from './ThemedButton.css';
+
+export const Base = styled.button([Button.Base, themed]);

package/src/__fixtures__/ThemedButton/index.ts

@@ -0,0 +1,4 @@
+import { ThemedButton as ThemedButtonComponent } from './ThemedButton.component';
+import * as css from './ThemedButton.css';
+
+export const ThemedButton = Object.assign(ThemedButtonComponent, { css });

package/src/__fixtures__/VariantButton/VariantButton.component.tsx

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '../Button';
+import type { variants } from './VariantButton.css';
+import * as S from './VariantButton.styled';
+
+export interface VariantButtonProps extends ButtonProps {
+  variant: keyof typeof variants;
+}
+
+export const VariantButton: React.FC<VariantButtonProps> = ({ variant, onClick, children }) => (
+  <S.Base variant={variant} onClick={onClick}>
+    {children}
+  </S.Base>
+);

package/src/__fixtures__/VariantButton/VariantButton.css.ts

@@ -0,0 +1,6 @@
+import { styleVariants } from '@/main';
+
+export const variants = styleVariants({
+  primary: { borderWidth: 2, borderColor: 'pink' },
+  secondary: { borderWidth: 2, borderColor: 'blue' },
+});

package/src/__fixtures__/VariantButton/VariantButton.styled.ts

@@ -0,0 +1,6 @@
+import { styled } from '@/main';
+
+import { Button } from '../Button';
+import { variants } from './VariantButton.css';
+
+export const Base = styled.button(variants, [Button.Base]);

package/src/__fixtures__/VariantButton/index.ts

@@ -0,0 +1,4 @@
+import { VariantButton as VariantButtonComponent } from './VariantButton.component';
+import * as css from './VariantButton.css';
+
+export const VariantButton = Object.assign(VariantButtonComponent, { css });

package/src/__fixtures__/index.ts

@@ -0,0 +1,9 @@
+export * from './Button';
+export * from './InlineThemedButton';
+export * from './InlineVarButton';
+export * from './RecipeButton';
+export * from './ReuseCSS';
+export * from './ReuseStyled';
+export * as Theme from './theme.css';
+export * from './ThemedButton';
+export * from './VariantButton';

package/src/__fixtures__/theme.css.ts

@@ -0,0 +1,21 @@
+import { createTheme } from '@/main';
+
+export const spacing = {
+  sm: '2px',
+  md: '4px',
+  lg: '8px',
+};
+
+export const [light, vars] = createTheme({
+  color: {
+    brand: 'red',
+  },
+  spacing,
+});
+
+export const dark = createTheme(vars, {
+  color: {
+    brand: 'blue',
+  },
+  spacing,
+});

package/src/main.ts

@@ -0,0 +1,6 @@
+export * from './styled';
+export * from './ThemeContext';
+export * from '@vanilla-extract/css';
+export * from '@vanilla-extract/dynamic';
+export * from '@vanilla-extract/recipes';
+export { clsx } from 'clsx';

package/src/styled/constants.ts

@@ -0,0 +1 @@
+export const STYLED_CLASS = Symbol('styled_class');

package/src/styled/factory.test.tsx

@@ -0,0 +1,181 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it } from 'vitest';
+
+import {
+  Button,
+  InlineThemedButton,
+  InlineVarButton,
+  RecipeButton,
+  ReuseCSS,
+  ReuseStyled,
+  Theme,
+  ThemedButton,
+  VariantButton,
+} from '@/__fixtures__';
+import { ThemeProvider } from '@/ThemeContext';
+
+const BASE_STYLE = {
+  padding: '20px',
+  borderRadius: '10px',
+  margin: '10px',
+};
+
+describe('styled factory', () => {
+  describe('static styling', () => {
+    it('should inherit styles from static CSS', () => {
+      render(<Button />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base);
+      expect(el).toHaveStyle(BASE_STYLE);
+    });
+  });
+
+  describe('reusable CSS', () => {
+    it('should extend static CSS with overrides', () => {
+      render(<ReuseCSS />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, ReuseCSS.css.base);
+      expect(el).toHaveStyle({
+        padding: '20px',
+        margin: '10px',
+        backgroundColor: 'red',
+        borderRadius: '0',
+      });
+    });
+  });
+
+  describe('reusable styled components', () => {
+    it('should extend styled component with overrides', () => {
+      render(<ReuseStyled />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, ReuseStyled.css.override);
+      expect(el).toHaveStyle({
+        padding: '20px',
+        border: '1px solid red',
+        margin: '2px',
+      });
+    });
+  });
+
+  describe('style variants', () => {
+    it('should render the primary style variant', () => {
+      render(<VariantButton variant="primary" />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.primary);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        borderWidth: '2px',
+        borderColor: 'pink',
+      });
+    });
+
+    it('should render the secondary style variant', () => {
+      render(<VariantButton variant="secondary" />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.secondary);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        borderWidth: '2px',
+        borderColor: 'blue',
+      });
+    });
+  });
+
+  describe('style recipes', () => {
+    it('should render a recipe with default variants', () => {
+      render(<RecipeButton />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        border: '1px dashed black',
+        fontSize: '18px',
+      });
+    });
+
+    it('should render a recipe with selected variants', () => {
+      render(<RecipeButton fontSize="sm" color="warn" />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        border: '1px dashed black',
+        backgroundColor: 'orange',
+        fontSize: '10px',
+      });
+    });
+  });
+
+  // unable to test CSS variables fully in JSDOM it seems
+  // https://github.com/jsdom/jsdom/pull/3299
+  describe.skip('themed components', () => {
+    it('should render styles from the provided theme', () => {
+      render(
+        <ThemeProvider theme={Theme.light}>
+          <ThemedButton />
+        </ThemeProvider>
+      );
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        color: 'red',
+        borderRadius: '0',
+      });
+    });
+
+    it('should override styles with contextual themes', () => {
+      render(
+        <ThemeProvider theme={Theme.light}>
+          <ThemeProvider theme={Theme.dark}>
+            <ThemedButton />
+          </ThemeProvider>
+        </ThemeProvider>
+      );
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        color: 'blue',
+        borderRadius: '0',
+      });
+    });
+  });
+
+  describe.skip('inline CSS variables', () => {
+    it('should render style from dynamic values', () => {
+      render(<InlineVarButton brandColor="green" />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, InlineVarButton.css.base);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        color: 'green',
+        borderRadius: '0',
+      });
+    });
+  });
+
+  describe.skip('inline theme', () => {
+    it('should render style from inline theme', () => {
+      render(<InlineThemedButton brandColor="green" />);
+
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(Button.css.base, InlineThemedButton.css.themed);
+      expect(el).toHaveStyle({
+        ...BASE_STYLE,
+        color: 'green',
+        borderRadius: '0',
+      });
+    });
+  });
+});

package/src/styled/factory.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx';
+import { createElement } from 'react';
+
+import { useTheme } from '../ThemeContext';
+import { STYLED_CLASS } from './constants';
+import type {
+  DynamicOptions,
+  FirstStyledArgument,
+  SecondStyledArgument,
+  StyledComponent,
+  StyledComponentProps,
+  StyledFactory,
+} from './types';
+import { getDynamicOptions, getStaticClass, useDynamicClass, useInlineStyle } from './utils';
+
+export const styled = new Proxy<{
+  [Tag in keyof JSX.IntrinsicElements]: StyledFactory<Tag>;
+}>({} as any, {
+  get:
+    <Tag extends keyof JSX.IntrinsicElements>(_target: unknown, tag: Tag): StyledFactory<Tag> =>
+    (firstArg: FirstStyledArgument, secondArg?: SecondStyledArgument, thirdArg?: DynamicOptions) => {
+      const staticClass = getStaticClass(firstArg, secondArg);
+      const dynamicOptions = getDynamicOptions(secondArg, thirdArg);
+
+      const StyledComponent = (props: StyledComponentProps<Tag, any, any, { variant?: any; variants?: any }>) => {
+        const themeClass = useTheme();
+        const dynamicClass = useDynamicClass(firstArg, props);
+        const inlineStyle = useInlineStyle(props, dynamicOptions);
+
+        return createElement(tag, {
+          ...(props as React.ComponentProps<Tag>),
+          className: clsx(themeClass, staticClass, dynamicClass, props.className),
+          style: { ...inlineStyle, ...props.style },
+        });
+      };
+
+      return Object.assign(StyledComponent, { [STYLED_CLASS]: staticClass }) as StyledComponent<any>;
+    },
+});

package/src/styled/index.ts

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './factory';
+export * from './types';
+export * from './utils';

package/src/styled/types.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { assignInlineVars } from '@vanilla-extract/dynamic';
+import type { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+
+import type { STYLED_CLASS } from './constants';
+
+export type ThemeContract = Parameters<typeof assignInlineVars>[0];
+
+export interface DynamicOptions<
+  Theme extends ThemeContract | null = ThemeContract,
+  Variables extends Record<string, string> | null = Record<string, string>
+> {
+  /**
+   * the contract for a theme that can be overridden via a `theme` prop
+   */
+  theme?: Theme;
+  /**
+   * variables that can be overridden via a `vars` prop
+   */
+  vars?: Variables;
+}
+
+export type DynamicThemeProps<Theme> = Theme extends ThemeContract
+  ? {
+      /**
+       * inline override for the theme used to style this component
+       */
+      theme?: Parameters<typeof assignInlineVars<Theme>>[1];
+    }
+  : {};
+
+export type DynamicVariablesProps<Variables> = Variables extends Record<string, string>
+  ? {
+      /**
+       * inline override for variables used to styled this component
+       */
+      vars?: Partial<{ [K in keyof Variables]: string }>;
+    }
+  : {};
+
+export type StyledComponentProps<
+  Tag extends keyof JSX.IntrinsicElements,
+  Theme,
+  Variables,
+  Extras extends object = {}
+> = React.ComponentProps<Tag> & DynamicThemeProps<Theme> & DynamicVariablesProps<Variables> & Extras;
+
+export interface StyledComponent<Props = {}> extends React.FunctionComponent<Props> {
+  (props: Props, context?: any): React.ReactElement<any, any> | null;
+  [STYLED_CLASS]: string | null;
+}
+
+export type StyleSource = StyledComponent | string;
+
+export interface StyledFactory<Tag extends keyof JSX.IntrinsicElements> {
+  <
+    Recipe extends RuntimeFn<Record<string, any>>,
+    Theme extends ThemeContract | null = null,
+    Variables extends Record<string, string> | null = null
+  >(
+    recipe: Recipe,
+    sources?: StyleSource[],
+    dynamic?: DynamicOptions<Theme, Variables>
+  ): StyledComponent<StyledComponentProps<Tag, Theme, Variables, { variants: RecipeVariants<Recipe> }>>;
+
+  <
+    Variant extends string,
+    Theme extends ThemeContract | null = null,
+    Variables extends Record<string, string> | null = null
+  >(
+    variants: Record<Variant, string>,
+    sources?: StyleSource[],
+    dynamic?: DynamicOptions<Theme, Variables>
+  ): StyledComponent<StyledComponentProps<Tag, Theme, Variables, { variant: Variant }>>;
+
+  <Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(
+    sources: StyleSource[],
+    dynamic?: DynamicOptions<Theme, Variables>
+  ): StyledComponent<StyledComponentProps<Tag, Theme, Variables>>;
+}
+
+export type FirstStyledArgument<Variants extends {} = any> =
+  | RuntimeFn<Variants>
+  | Record<string, string>
+  | StyleSource[];
+
+export type SecondStyledArgument = StyleSource[] | DynamicOptions;

package/src/styled/utils.ts

@@ -0,0 +1,56 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+
+import { STYLED_CLASS } from './constants';
+import type {
+  DynamicOptions,
+  FirstStyledArgument,
+  SecondStyledArgument,
+  StyledComponentProps,
+  ThemeContract,
+} from './types';
+
+export const getStaticClass = (firstArg: FirstStyledArgument, secondArg?: SecondStyledArgument): string | null => {
+  // eslint-disable-next-line no-nested-ternary
+  const classNames = (Array.isArray(firstArg) ? firstArg : Array.isArray(secondArg) ? secondArg : []).map((source) =>
+    typeof source === 'string' ? source : source[STYLED_CLASS]
+  );
+
+  return classNames.length ? clsx(classNames) : null;
+};
+
+export const getDynamicOptions = (secondArg?: SecondStyledArgument, thirdArg?: DynamicOptions): DynamicOptions | null =>
+  (Array.isArray(secondArg) ? thirdArg : secondArg) ?? null;
+
+export const useDynamicClass = (
+  firstArg: FirstStyledArgument<any>,
+  props: { variant?: string; variants?: Record<string, any> }
+) =>
+  useMemo(() => {
+    if (typeof firstArg === 'function') return firstArg(props.variants);
+    if (Array.isArray(firstArg) || !props.variant) return null;
+
+    return firstArg[props.variant];
+  }, [firstArg, props.variants, props.variant]);
+
+export const useInlineStyle = (
+  props: StyledComponentProps<keyof JSX.IntrinsicElements, ThemeContract, Record<string, string>>,
+  dynamicOptions: DynamicOptions | null
+) => {
+  const { theme, vars } = dynamicOptions ?? {};
+
+  return useMemo(() => {
+    const style = {};
+
+    if (theme && props.theme) {
+      Object.assign(style, assignInlineVars(theme, props.theme));
+    }
+
+    if (vars && props.vars) {
+      Object.assign(style, assignInlineVars(props.vars as Record<string, string>));
+    }
+
+    return style;
+  }, [props.theme, props.vars]);
+};

package/tsconfig.build.cjs.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "build/cjs"
+  }
+}

package/tsconfig.build.esm.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "build/esm"
+  },
+  "tsc-alias": {
+    "resolveFullPaths": true
+  }
+}