@slimr/styled 2.1.15 → 2.1.18

package/README.md

@@ -1,32 +1,20 @@
-# @slimr/styled
+# 🪶 @slimr/styled [![npm package](https://img.shields.io/npm/v/@slimr/styled.svg?style=flat-square)](https://npmjs.org/package/@slimr/styled)
 
 A tiny (~2kb) React css-in-js library inspired by chakra-ui, emotion, and styled-components libs
 
-Pros:
+Demo: [CodeSandbox](https://codesandbox.io/s/64r9px?file=/src/App.tsx)
+
+Features:
+
+- Easily create React components with styles using familiar syntax
+- Much less bundle size and runtime sluggishness than others
+- Supports declaring css and styled components inside of Components for better code colocating
+- Zx/Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props)
+- Will favor inline-style for performance reasons, if non-responsive and non-stateful.
+- Concise responsive CSS syntax Breakpoints shorthand similar to [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles)
+- Import pre-enhanced HTML Elements like `Div` or `A` for profit
 
-- Much less bundle size and runtime sluggishness
-- Less is more: less bugs, no breaking changes
-- Supports declaring css and styled components inside of Components for better code colocating and NO MORE NEED TO PASS ARGS!
-- Styled shortcuts like styled.div
-- Zx/Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props):
-  - Most HTMLElements are enhanced and exported as pascal-case (i.e. `import {Div, A, Section, Flex} from '@slimr/styled'`)
-  - Pass shorthand props or zx props to styled components. This lib will create css classes if complex, passthrough as styles otherwise.
-  - `m` --> `margin`
-  - `mx` --> `margin-left` and right
-  - `py` --> `padding-top` and bottom
-  - More [here](https://github.com/bdombro/slimr/blob/65bf012086760b7e481a4064f3be8aea6a098b91/packages/css/src/index.ts#L73)!
-- CSS Breakpoints shorthand like [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles):
-
-  ```css
-  margin: [auto, null, inherit];
-  /* Translates to */
-  margin: auto;
-  @media (min-width: 48em) {
-    margin: inherit;
-  }
-  ```
-
-- Breakpoints are `[30em, 48em, 62em, 80em, 96em]` and can be overridden by setting `css.breakpoints`
+## Context
 
 `@slimr` is a set of slim React (hence '@slimr') libs:
 
@@ -46,68 +34,81 @@ Pros:
 npm i @slimr/styled
 ```
 
-## Usage
+## API
 
-Preview below. For full code, see demos
+### Includes @slimr/css exports
 
-```tsx
-// Create primitive components if you like
-const Box = styled.div`
-  pos: relative;
-`
+See [npm](https://www.npmjs.com/package/@slimr/css) for more info.
 
-interface ButtonProps extends Omit<HtmlTagProps['button'], 'id'> {
-  id: HtmlTagProps['button']['id'] // make required
-}
-function Button(props: ButtonProps) {
-  return (
-    <button
-      {...props}
-      onClick={e => {
-        console.log(`Button ${props.id} clicked`)
-        props.onClick?.(e)
-      }}
-    />
-  )
-}
-const ButtonP = styled(Button)`
-  bg: red;
-  c: white;
-  w: [100%, null, inherit];
+```typescript
+import {addCSs, createClass, css} from '@slimr/styled'
+addCss('.foo { color: purple }')
+c1 = createClass('c: red;')
+c4 = css`c: red;`
+<div className={css`c: red;`} /> // will resolve to 's0' like above
+c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
+```
+
+### ZX and Stateful CSS Props
+
+Props to help style based on CSS state
+
+```typescript
+import {styled} from '@slimr/styled'
+const MyDiv = styled.div`
+  _zx={{color: 'blue}} // applies color = blue
+  _active={{color: 'blue'}} // applied on :active
+  _dark={{color: 'blue'}} // applied when browser prefers dark modes
+  _focus={{color: 'blue'}} // applied on :focus
+  _focusVisible={{color: 'blue'}} // applied on :focusVisible
+  _focusWithin={{color: 'blue'}} // applied on :focusWithin
+  _hover={{color: 'blue'}} // applied on :hover
+  _light={{color: 'blue'}} // applied on :light
+  _target={{color: 'blue'}} // applied on :target
+  _visited={{color: 'blue'}} // applied on :visited
 `
+```
+
+### Shorthand props
+
+Some styles are available as shorthand -- all of them [here](https://github.com/bdombro/slimr/blob/65bf012086760b7e481a4064f3be8aea6a098b91/packages/css/src/index.ts#L73).
+
+```typescript
+import {styled} from '@slimr/styled'
+const MyDiv = styled.div`
+  _bgColor="blue"
+  _c="green"
+  _p={18}
+  _pos="absolute"
+  _w={100}
+```
+
+### Responsive Props
+
+Specify responsive styles as arrays, similar to [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles)
+
+Default breakpoints are `[30em, 48em, 62em, 80em, 96em]` and can be overridden by setting `css.breakpoints`
+
+```typescript
+import {styled} from '@slimr/styled'
+const MyDiv = styled.div`
+  _w=[100%, null, 200px] // width = 100% on mobile, tablet. 200px on > tablet
+  _zx={{w: ['100%', null, '200px']}} // is equivalent to _w
+```
+
+### Pre-Enhanced HTML Elements
+
+Import pre-enhanced HTML Elements like `Div` or `A` for profit. With a few exceptions, most elements
+accept ANY CSS style as a prop when prefixed by '_'
 
-export function App() {
-  const on = useOscillator()
-
-  return (
-    <Box
-      // enjoy chakra-ui like shorthand syntax
-      bg={['lightblue', null, 'lightred']}
-    >
-      <ButtonP
-        // use css if you'd like, which gets converted into a css class and attached to this element
-        css={`
-          --font-weight: [bold, null, initial];
-        `}
-        id="my-button"
-        // kinda like style but accepts shorthand syntax
-        _zx={{
-          textTransform: on ? 'uppercase' : 'inherit',
-        }}
-        // Any attr with '_' prefix will be passed to zx
-        _fontWeight="var(--font-weight)"
-        // like _zx, but applies only on :hover
-        _hover={{bg: 'lightblue'}}
-        // like _zx, but applies only on :active
-        _active={{bg: 'lightblue'}}
-        // like _zx, but applies only when browser prefers dark modes
-        _dark={{bg: 'lightblue'}}
-      >
-        Click me!
-      </ButtonP>
-    </Box>
-  )
-}
+```typescript
+import {Div, A} from '@slimr/styled'
+<Div _p=[8, null, 18]> // a div with responsive padding
+  <P _fontSize={30} _lineHeight="1rem"> // style props
+  <A _active={{ scale: 1.5 }} _hover={{ c: 'green' }}> // stateful styles
+    I grow during keypress and am green on hover
+  </A>
+</Div>
 ```
 
 ## Comparisons
@@ -119,7 +120,7 @@ export function App() {
 Pros
 
 - More mature, SSR support
-- Premade components
+- Lots of premade components
 
 Cons
 

package/cjs/core.d.ts

@@ -27,6 +27,9 @@ export interface SCProps extends _Props {
     _focusWithin?: Zx;
     /** Like zx prop, but applies only on :hover */
     _hover?: Zx;
+    /** Like zx prop, but applies only when user prefers dark theme */
+    _light?: Zx;
+    /** Standard style prop */
     style?: CSSProperties;
     /** Like zx prop, but applies only on :target */
     _target?: Zx;
@@ -45,9 +48,9 @@ export type SC<T extends {
     className?: HTMLAttributes<allowableAny>['className'];
 }> = FC<T & SCProps>;
 /**
- * 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
+ * The core functionality of the exported `styled` Object.
+ *
+ * Not intended to be used directly. Instead, use the `styled` object.
  */
 export declare function styledBase<C extends FC<allowableAny>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
 export {};

package/cjs/core.js

@@ -5,55 +5,10 @@ exports.styledBase = void 0;
 const css_1 = require("@slimr/css");
 const util_1 = require("@slimr/util");
 const react_1 = require("react");
-/** 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[(0, util_1.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 = (0, util_1.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
+ * The core functionality of the exported `styled` Object.
+ *
+ * Not intended to be used directly. Instead, use the `styled` object.
  */
 function styledBase(Component) {
     return (...cssProps) => {
@@ -62,7 +17,7 @@ function styledBase(Component) {
          * 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;
+            let { _active, _css, _dark, _focus, _focusVisible, _focusWithin, _hover, _light, _target, _visited, _zx = {}, ...rest } = props;
             // Pluck out $ prefixed props
             Object.entries(props).forEach(([k, v]) => {
                 if (k.startsWith('_')) {
@@ -113,6 +68,13 @@ function styledBase(Component) {
           &:hover {
           ${zxToCss(_hover)}
           }
+        `;
+            }
+            if (_light) {
+                cssStr += `
+          @media (prefers-color-scheme: light) {
+          ${zxToCss(_light)}
+          }
         `;
             }
             if (_target) {
@@ -149,4 +111,52 @@ function styledBase(Component) {
     };
 }
 exports.styledBase = styledBase;
+/**********************
+ * Helper Functions
+ **********************/
+/** 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[(0, util_1.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 = (0, util_1.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');
+}
 //# sourceMappingURL=core.js.map

package/cjs/core.js.map

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

package/cjs/core.ts

@@ -42,6 +42,9 @@ export interface SCProps extends _Props {
   _focusWithin?: Zx
   /** Like zx prop, but applies only on :hover */
   _hover?: Zx
+  /** Like zx prop, but applies only when user prefers dark theme */
+  _light?: Zx
+  /** Standard style prop */
   style?: CSSProperties
   /** Like zx prop, but applies only on :target */
   _target?: Zx
@@ -59,50 +62,10 @@ export interface SCProps extends _Props {
 /** Styled Component: Like FunctionalComponent but adds SCProps */
 export type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>
 
-/** 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
+ * The core functionality of the exported `styled` Object.
+ *
+ * Not intended to be used directly. Instead, use the `styled` object.
  */
 export function styledBase<C extends FC<allowableAny>>(Component: C) {
   return (...cssProps: Parameters<typeof css>) => {
@@ -119,6 +82,7 @@ export function styledBase<C extends FC<allowableAny>>(Component: C) {
         _focusVisible,
         _focusWithin,
         _hover,
+        _light,
         _target,
         _visited,
         _zx = {},
@@ -179,6 +143,13 @@ export function styledBase<C extends FC<allowableAny>>(Component: C) {
           }
         `
       }
+      if (_light) {
+        cssStr += `
+          @media (prefers-color-scheme: light) {
+          ${zxToCss(_light)}
+          }
+        `
+      }
       if (_target) {
         cssStr += `
           &:target {
@@ -218,3 +189,47 @@ export function styledBase<C extends FC<allowableAny>>(Component: C) {
     return CStyled as unknown as SC<Parameters<C>[0]>
   }
 }
+
+/**********************
+ * Helper Functions
+ **********************/
+
+/** 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')
+}