connectToStyle.ts

/**
  Helper function for connecting React components with CSS Modules. The helper lets you
  define new React components that just have the right "className" string (and also
  the "style" value if you use CSS Variables).
 
  Things that this takes care of:

   - Some components will always have certain classNames.
   - Some components will conditionally include classNames. (based on props)
   - Some components will have element-level CSS variables. (taken from props)
   - Other props are passed through.
 
   Simple example:
    
      import style from './style.css'
      const s = connectToStyle(style);
      const MyComponent = s('my-class');
 
      render() {
          <MyComponent> stuff </MyComponent>
      }
 
  Renders as: <div class="my-class___a1b2c3"> stuff </div>
 
  Example using conditional CSS classes:
 
      const MyComponent = c('my-class', { maybe: 'highlighted' });
        
      render() {
        <MyComponent highlighted />
      }
 
      Renders as: <div class="my-class_12345 highlighted_12345">
 
  Example using semantic HTML:
 
      const MyComponent = c('my-class', { el: 'header' });
        
      <MyComponent />
 
      Renders as: <header class="my-class_12345"></header>
 
  Example using CSS variables:
 
      const MyComponent = c('my-class', { vars: 'radius' });
        
      <MyComponent radius="30" />
 
      Renders as: <div class="my-class_12345" style="--radius: 30;">
 
  Example using passthrough props:
 
      const MyComponent = c('my-class');
 
      <MyComponent style={{fontWeight: "400"}} />

      Renders as: <div class="my-class_12345" style="font-weight: 400">
 
 
 */

import React from "react";

interface Options {
    el?: string
    maybe?: string
    vars?: string
}

export default function connectToStyle(style) {

    return function newStyleComponent(className, opts: Options = {}) {

        const el = opts.el || 'div';
        const resolvedClassName = style[className] || className;
        const classesMap = {};
        const varsMap = {};

        for (const cssClass of (opts.maybe || '').split(' ')) {
            classesMap[cssClass] = true;
        }

        for (const v of (opts.vars || '').split(' ')) {
            varsMap[v] = true;
        }

        function componentFunc(props) {

            let fullClassName = resolvedClassName;
            let passdownProps: any = {}

            for (const propName in props) {
                const propVal = props[propName];
                if (classesMap[propName]) {

                    if (propVal) {
                        fullClassName += ' ' + style[propName] || propName;
                    }

                } else if (varsMap[propName]) {

                    if (!passdownProps.style)
                        passdownProps.style = {}
                    passdownProps.style[`--${propName}`] = propVal;

                } else {
                    passdownProps[propName] = propVal;
                }
            }

            return React.createElement(el, {
                ...passdownProps,
                className: fullClassName,
            })
        }

        Object.defineProperty(componentFunc, name, { value: `Style(${className})`, writable: false });

        return componentFunc;
    }
}