@slimr/styled 2.0.3 → 2.0.5

package/README.md

@@ -109,9 +109,9 @@ export function App() {
 }
 ```
 
-### Comparisons
+## Comparisons
 
-#### [Chakra-UI](https://chakra-ui.com/)
+### [Chakra-UI](https://chakra-ui.com/)
 
 - A popular css-in-js lib that inspired this lib
 
@@ -124,7 +124,7 @@ Cons
 
 - Is crazy large bundle impact (80+kb)
 
-#### [Styled-Components](https://github.com/styled-components/styled-components)
+### [Styled-Components](https://github.com/styled-components/styled-components)
 
 - A popular css-in-js lib that inspired this lib
 
@@ -137,7 +137,7 @@ Cons
 - Is massive (~12kb), plus has dependency on emotion (~11kb)
 - Does not support zx prop or css shorthand props
 
-#### [Emotion](https://emotion.sh/docs/introduction)
+### [Emotion](https://emotion.sh/docs/introduction)
 
 - A popular css-in-js lib similar to styled-components
 
@@ -151,7 +151,7 @@ Cons
 - Many features require addons, which make bundle even larger
 - Does not support zx prop or css shorthand props
 
-#### [Goober](https://github.com/cristianbote/goober)
+### [Goober](https://github.com/cristianbote/goober)
 
 - another tiny 1kb styled-components like css-in-js
 

package/{src → cjs}/core.d.ts

@@ -1,9 +1,8 @@
 import { ShorthandProps } from '@slimr/css';
-import { CSSProperties, HTMLAttributes, FC } from 'react';
-
+import { CSSProperties, FC, HTMLAttributes } from 'react';
 type allowableAny = any;
 /** A type that represents all the css properties + shorthand props */
-interface ZxProps extends CSSProperties, ShorthandProps {
+export interface ZxProps extends CSSProperties, ShorthandProps {
 }
 type ZxP = ZxProps;
 type Zx = {
@@ -12,7 +11,7 @@ type Zx = {
 type _Props = {
     [k in keyof Zx as `_${k}`]?: Zx[k];
 };
-interface SCProps extends _Props {
+export interface SCProps extends _Props {
     /** Like zx prop, but applies only on :active */
     _active?: Zx;
     className?: string;
@@ -42,7 +41,7 @@ interface SCProps extends _Props {
     _zx?: Zx;
 }
 /** Styled Component: Like FunctionalComponent but adds SCProps */
-type SC<T extends {
+export type SC<T extends {
     className?: HTMLAttributes<allowableAny>['className'];
 }> = FC<T & SCProps>;
 /**
@@ -50,6 +49,5 @@ type SC<T extends {
  * @param function - a functional component to be styled; must accept a className prop
  * @returns a function that accepts a template string of css returns a decorated functional component
  */
-declare function styledBase<C extends FC<allowableAny>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
-
-export { SC, SCProps, ZxProps, styledBase };
+export declare function styledBase<C extends FC<allowableAny>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
+export {};

package/cjs/core.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styledBase = void 0;
+/* eslint-disable prefer-const */
+const css_1 = require("@slimr/css");
+const react_1 = require("react");
+/** Converts a string to kebab case */
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/** Converts a string to camel case */
+function toCamelCase(str) {
+    return str.replace(/-./g, x => x[1].toUpperCase());
+}
+/** Expands the shorthand props of a zx prop into css full */
+function expandShorthandProps(zx) {
+    return Object.entries(zx).reduce((acc, [k, v]) => {
+        if (k === 'mx') {
+            acc.marginLeft = v;
+            acc.marginRight = v;
+        }
+        else if (k === 'my') {
+            acc.marginTop = v;
+            acc.marginBottom = v;
+        }
+        else if (k === 'px') {
+            acc.paddingLeft = v;
+            acc.paddingRight = v;
+        }
+        else if (k === 'py') {
+            acc.paddingTop = v;
+            acc.paddingBottom = v;
+        }
+        else if (k in css_1.shorthandPropsMap) {
+            acc[toCamelCase(css_1.shorthandPropsMap[k])] = v;
+        }
+        else {
+            acc[k] = v;
+        }
+        return acc;
+    }, {});
+}
+/** Converts a zx prop into css string */
+function zxToCss(zx) {
+    return Object.entries(zx)
+        .map(([k, v]) => {
+        if (!v)
+            return '';
+        k = toKebabCase(k);
+        if (typeof v === 'number')
+            v = v + 'px';
+        if (Array.isArray(v)) {
+            // @ts-expect-error - TS gets confused by the complexity
+            v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']';
+        }
+        return k + ':' + v + ';';
+    })
+        .join('\n');
+}
+/**
+ * A lightweight alternative to styled-components
+ * @param function - a functional component to be styled; must accept a className prop
+ * @returns a function that accepts a template string of css returns a decorated functional component
+ */
+function styledBase(Component) {
+    return (...cssProps) => {
+        const className = (0, css_1.css)(...cssProps);
+        /**
+         * A functional component that accepts Styled Props
+         */
+        const CStyled = (0, react_1.forwardRef)(function CStyled(props, ref) {
+            let { _active, _css, _dark, _focus, _focusVisible, _focusWithin, _hover, _target, _visited, _zx = {}, ...rest } = props;
+            // Pluck out $ prefixed props
+            Object.entries(props).forEach(([k, v]) => {
+                if (k.startsWith('_')) {
+                    // @ts-expect-error - We know the key exists but ts doesn't
+                    _zx[k.slice(1)] = v;
+                    // @ts-expect-error - We know the key exists but ts doesn't
+                    delete rest[k];
+                }
+            });
+            let cssStr = '';
+            if (_active) {
+                cssStr += `
+          &:active {
+          ${zxToCss(_active)}
+          }
+        `;
+            }
+            if (_dark) {
+                cssStr += `
+          @media (prefers-color-scheme: dark) {
+          ${zxToCss(_dark)}
+          }
+        `;
+            }
+            if (_focus) {
+                cssStr += `
+          &:focus {
+          ${zxToCss(_focus)}
+          }
+        `;
+            }
+            if (_focusVisible) {
+                cssStr += `
+          &:focus-visible {
+          ${zxToCss(_focusVisible)}
+          }
+        `;
+            }
+            if (_focusWithin) {
+                cssStr += `
+          &:focus-within {
+          ${zxToCss(_focusWithin)}
+          }
+        `;
+            }
+            if (_hover) {
+                cssStr += `
+          &:hover {
+          ${zxToCss(_hover)}
+          }
+        `;
+            }
+            if (_target) {
+                cssStr += `
+          &:target {
+          ${zxToCss(_target)}
+          }
+        `;
+            }
+            if (_visited) {
+                cssStr += `
+          &:visited {
+          ${zxToCss(_visited)}
+          }
+        `;
+            }
+            const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v));
+            // If has media query styles, use css class. Otherwise favor inline styles
+            if (hasMediaQuery || cssStr) {
+                cssStr = zxToCss(_zx) + cssStr;
+            }
+            else {
+                _zx = expandShorthandProps(_zx);
+                rest.style = { ...rest.style, ..._zx };
+            }
+            return (0, react_1.createElement)(Component, {
+                ref,
+                ...rest,
+                className: (0, css_1.classJoin)(className, _css ? (_css.includes(':') ? (0, css_1.css)(_css) : _css) : undefined, cssStr ? (0, css_1.css)(cssStr) : undefined, props.className),
+            });
+        });
+        CStyled.toString = () => '.' + className;
+        return CStyled;
+    };
+}
+exports.styledBase = styledBase;
+//# sourceMappingURL=core.js.map

package/cjs/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"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"}

package/cjs/core.ts

@@ -0,0 +1,229 @@
+/* eslint-disable prefer-const */
+import {ShorthandProps, TemplateStringProps, classJoin, css, shorthandPropsMap} from '@slimr/css'
+
+import {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type allowableAny = any
+
+/** A type that represents all the css properties + shorthand props */
+export interface ZxProps extends CSSProperties, ShorthandProps {}
+type ZxP = ZxProps
+
+type Zx = {
+  [k in keyof ZxP]:
+    | ZxP[k]
+    | [ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+}
+
+type _Props = {
+  [k in keyof Zx as `_${k}`]?: Zx[k]
+}
+
+export interface SCProps extends _Props {
+  /** Like zx prop, but applies only on :active */
+  _active?: Zx
+  className?: string
+  /** A string of css or classname to be added to the component */
+  _css?: string
+  /** Like zx prop, but applies only when user prefers dark theme */
+  _dark?: Zx
+  /** Like zx prop, but applies only on :focus */
+  _focus?: Zx
+  /** Like zx prop, but applies only on :focus-visible */
+  _focusVisible?: Zx
+  /** Like zx prop, but applies only on :focus-within */
+  _focusWithin?: Zx
+  /** Like zx prop, but applies only on :hover */
+  _hover?: Zx
+  style?: CSSProperties
+  /** Like zx prop, but applies only on :target */
+  _target?: Zx
+  /** Like zx prop, but applies only on :visited */
+  _visited?: Zx
+  /**
+   * Like style prop, but enhanced with features like chakra
+   *  - Array values are converted to media query breakpoints
+   *  - Numbers are converted to px
+   *  - Shorthand props are supported
+   */
+  _zx?: Zx
+}
+
+/** Styled Component: Like FunctionalComponent but adds SCProps */
+export type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>
+
+/** Converts a string to kebab case */
+function toKebabCase(str: string) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/** Converts a string to camel case */
+function toCamelCase(str: string) {
+  return str.replace(/-./g, x => x[1].toUpperCase())
+}
+
+/** Expands the shorthand props of a zx prop into css full */
+function expandShorthandProps(zx: Zx) {
+  return Object.entries(zx).reduce((acc, [k, v]) => {
+    if (k === 'mx') {
+      acc.marginLeft = v
+      acc.marginRight = v
+    } else if (k === 'my') {
+      acc.marginTop = v
+      acc.marginBottom = v
+    } else if (k === 'px') {
+      acc.paddingLeft = v
+      acc.paddingRight = v
+    } else if (k === 'py') {
+      acc.paddingTop = v
+      acc.paddingBottom = v
+    } else if (k in shorthandPropsMap) {
+      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v
+    } else {
+      acc[k] = v
+    }
+    return acc
+  }, {} as Record<string, allowableAny>)
+}
+
+/** Converts a zx prop into css string */
+function zxToCss(zx: Zx): string {
+  return Object.entries(zx)
+    .map(([k, v]) => {
+      if (!v) return ''
+      k = toKebabCase(k)
+      if (typeof v === 'number') v = v + 'px'
+      if (Array.isArray(v)) {
+        // @ts-expect-error - TS gets confused by the complexity
+        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'
+      }
+      return k + ':' + v + ';'
+    })
+    .join('\n')
+}
+
+/**
+ * A lightweight alternative to styled-components
+ * @param function - a functional component to be styled; must accept a className prop
+ * @returns a function that accepts a template string of css returns a decorated functional component
+ */
+export function styledBase<C extends FC<allowableAny>>(Component: C) {
+  return (...cssProps: TemplateStringProps) => {
+    const className = css(...cssProps)
+    /**
+     * A functional component that accepts Styled Props
+     */
+    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {
+      let {
+        _active,
+        _css,
+        _dark,
+        _focus,
+        _focusVisible,
+        _focusWithin,
+        _hover,
+        _target,
+        _visited,
+        _zx = {},
+        ...rest
+      } = props
+
+      // Pluck out $ prefixed props
+      Object.entries(props).forEach(([k, v]) => {
+        if (k.startsWith('_')) {
+          // @ts-expect-error - We know the key exists but ts doesn't
+          _zx[k.slice(1)] = v
+          // @ts-expect-error - We know the key exists but ts doesn't
+          delete rest[k]
+        }
+      })
+
+      let cssStr = ''
+
+      if (_active) {
+        cssStr += `
+          &:active {
+          ${zxToCss(_active)}
+          }
+        `
+      }
+      if (_dark) {
+        cssStr += `
+          @media (prefers-color-scheme: dark) {
+          ${zxToCss(_dark)}
+          }
+        `
+      }
+      if (_focus) {
+        cssStr += `
+          &:focus {
+          ${zxToCss(_focus)}
+          }
+        `
+      }
+      if (_focusVisible) {
+        cssStr += `
+          &:focus-visible {
+          ${zxToCss(_focusVisible)}
+          }
+        `
+      }
+      if (_focusWithin) {
+        cssStr += `
+          &:focus-within {
+          ${zxToCss(_focusWithin)}
+          }
+        `
+      }
+      if (_hover) {
+        cssStr += `
+          &:hover {
+          ${zxToCss(_hover)}
+          }
+        `
+      }
+      if (_target) {
+        cssStr += `
+          &:target {
+          ${zxToCss(_target)}
+          }
+        `
+      }
+      if (_visited) {
+        cssStr += `
+          &:visited {
+          ${zxToCss(_visited)}
+          }
+        `
+      }
+
+      const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v))
+      // If has media query styles, use css class. Otherwise favor inline styles
+      if (hasMediaQuery || cssStr) {
+        cssStr = zxToCss(_zx) + cssStr
+      } else {
+        _zx = expandShorthandProps(_zx)
+        rest.style = {...rest.style, ..._zx} as CSSProperties
+      }
+
+      return createElement(Component, {
+        ref,
+        ...rest,
+        className: classJoin(
+          className,
+          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,
+          cssStr ? css(cssStr) : undefined,
+          props.className
+        ),
+      })
+    })
+    CStyled.toString = () => '.' + className
+    return CStyled as unknown as SC<Parameters<C>[0]>
+  }
+}