@slimr/css 1.0.39

package/README.md

@@ -0,0 +1,107 @@
+# @slimr/css
+
+A tiny alternative to the popular emotion library
+
+Demos: See `./packages/demo` or [CodeSandbox](https://codesandbox.io/s/64r9px?file=/src/App.tsx)
+
+Sister libs:
+
+- [@slimr/styled](https://www.npmjs.com/package/@slimr/styled)
+
+Pros:
+
+- Much less bundle size
+- Less is more: faster, less bugs, no breaking changes
+- Is progressive -- lazy loads styles along with component if component is lazy
+- Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props):
+  - `m` --> `margin`
+  - `mx` --> `margin-left` and bottom
+  - `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]`
+
+Cons:
+
+- No SSR support
+
+## Setup/Install
+
+```bash
+npm i @slimr/css
+```
+
+## Usage
+
+```tsx
+// Add some global styles
+addCss`
+  body {
+    color: lightgray;
+  }
+`
+
+export function App() {
+  const on = useOn()
+
+  return (
+    <div
+      className={css`
+        background: white;
+        color: ${on ? 'red' : 'initial'};
+        &:hover {
+          font-weight: bold;
+        }
+        font-size: [20px, null, 16px];
+      `}
+    >
+      Helo css!
+    </div>
+  )
+}
+```
+
+### Comparisons
+
+#### [Emotion](https://emotion.sh/docs/introduction)
+
+- A popular css-in-js lib that inspired this lib
+
+Pros
+
+- More mature, SSR support
+
+Cons
+
+- Is huge (>10kb)
+- Many features require addons, which make bundle even larger
+- Does not support zx prop or css shorthand props
+
+#### [Astroturf](https://astroturfcss.github.io/astroturf/)
+
+- A popular css-in-js lib similar to Emotion but compiles out the css into css stylesheets
+
+Pros
+
+- More performant (zero kbs, no need for caching or Map lookups)
+- Support for all the PostCSS magic you may desire
+
+Cons
+
+- Requires babel/bundler config
+- Does not support zx prop or css shorthand props
+- Is not progressive -- all styles for all components is loaded and blocks initial page paint
+
+#### [Linaria](https://linaria.dev/)
+
+- Pretty much identical to Astroturf, but maybe better Vite support

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@slimr/css",
+  "version": "1.0.39",
+  "author": "Brian Dombrowski",
+  "license": "ISC",
+  "private": false,
+  "keywords": [
+    "chakra",
+    "chakra-ui",
+    "emotion",
+    "styled-components",
+    "preact",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bdombro/slimr.git"
+  },
+  "type": "module",
+  "main": "./src/index.cjs",
+  "module": "./src/index.js",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.cjs",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsup",
+    "clean": "find -E ./src -regex '.*(\\.js|\\.cjs|\\.d\\.ts|\\.map)' -delete",
+    "prepack": "npm run build && npm version patch",
+    "postpublish": "npm run clean"
+  }
+}

package/src/index.cjs

@@ -0,0 +1,23 @@
+"use strict";var g=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var c=(r,n)=>{for(var t in n)g(r,t,{get:n[t],enumerable:!0})},y=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of f(n))!b.call(r,e)&&e!==t&&g(r,e,{get:()=>n[e],enumerable:!(o=l(n,e))||o.enumerable});return r};var h=r=>y(g({},"__esModule",{value:!0}),r);var T={};c(T,{addCss:()=>m,classJoin:()=>$,default:()=>u,shorthandProps:()=>P,shorthandPropsMap:()=>p,t2s:()=>d});module.exports=h(T);var x=["30em","48em","62em","80em","96em"];function $(...r){return r.filter(n=>n&&typeof n=="string").join(" ")}function j(r){return r.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,"")}function w(r){return r.includes("[")?r.split(`
+`).map(n=>{var s;let[t,o,e]=(s=[...n.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)][0])!=null?s:[];return e?e.split(",").map((i,a)=>(i=i.trim(),!i||i==="null"||i==="undefined"?"":a===0?`${o}: ${i};`:`@media (min-width: ${x[a-1]}) { ${o}: ${i}; }`)).join(`
+`):n}).join(`
+`):r}var p={ai:"align-items",b:"border",br:"border-radius",bg:"background",c:"color",d:"display",f:"flex",fd:"flex-direction",i:"inset",h:"height",jc:"justify-content",m:"margin",ml:"margin-left",mr:"margin-right",mt:"margin-top",mb:"margin-bottom",maxW:"max-width",minW:"min-width",p:"padding",pl:"padding-left",pr:"padding-right",pt:"padding-top",pb:"padding-bottom",pos:"position",ta:"text-align",w:"width",z:"z-index"},P=[...Object.keys(p),"mx","my","px","py"];function S(r){return r=`
+`+r,r=r.replace(/([mp])x:([^;]*)/g,`$1l:$2;
+$1r:$2`).replace(/([mp])y:([^;]*);/g,`$1t:$2;
+$1b:$2`),Object.entries(p).forEach(([n,t])=>{r=r.replace(new RegExp(`([ 
+	;])${n}:`,"g"),`$1${t}:`)}),r.trim()}function k(r){let n=[];for(let t of r.matchAll(/[@&]/gm)){let o="",e=0,s=0;for(let i=t.index;i<r.length;i++)if(r[i]==="{")s===0&&(o=r.slice(t.index,i).trim(),e=i+1),s++;else if(r[i]==="}"&&(s--,s===0)){n.push({start:t.index,end:i+1,query:o,outerBody:r.slice(t.index,i+1),innerBody:r.slice(e,i)});break}s!==0&&console.error(`${o} not closed: "${r}"`)}return n}function q(r){return r.split(`
+`).map(n=>n.trim()).filter(n=>n).join(`
+`)}function d(...r){let[n,...t]=r;return typeof n=="string"?n:n.map((o,e)=>{var s;return o+((s=t==null?void 0:t[e])!=null?s:"")}).join("")}function m(r){m.que.add(r),setTimeout(()=>{let n=[...m.que].join(`
+`);if(n){m.que.clear();let t=document.createElement("style");t.id=`u${m.count++}`,t.innerHTML=n,document.head.appendChild(t)}},0)}m.que=new Set;m.count=0;function u(...r){let n=d(...r);if(!n)return"";let t=u.history.get(n);if(!t){t="s"+u.count++,u.history.set(n,t),n=j(n),n=S(n),n=w(n);let o=k(n);for(let e of o.reverse())n=n.slice(0,e.start)+n.slice(e.end);n=`.${t}{
+${n}
+}
+`,n+=o.map(e=>e.query.startsWith("&")?`.${t}${e.query.slice(1)}{
+${e.innerBody}
+}`:e.query.startsWith("@keyframes")?e.outerBody:`${e.query}{
+.${t}{${e.innerBody}
+}
+}`).join(`
+`),n=q(n)+`
+
+`,m(n)}return t}u.count=0;u.history=new Map;0&&(module.exports={addCss,classJoin,shorthandProps,shorthandPropsMap,t2s});
+//# sourceMappingURL=index.cjs.map

package/src/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["/** Breakpoints like chakra */\nconst breakPoints = ['30em', '48em', '62em', '80em', '96em']\n\n/** Joins class names and filters out blanks */\nexport function classJoin(...classes: any[]) {\n  return classes.filter((c) => c && typeof c === 'string').join(' ')\n}\n\n// delete css comments i.e. {/* blah */}\nfunction deleteComments(css: string) {\n  return css.replace(/{\\/\\*[\\s\\S]*?(?=\\*\\/})\\*\\/}/gm, '')\n}\n\n/**\n * Expands array values into media queries\n *\n * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles\n */\nfunction expandArrayValues(css: string) {\n  if (!css.includes('[')) return css\n  return css\n    .split('\\n')\n    .map((l) => {\n      const [_, prop, vals] = [...l.matchAll(/([A-Za-z\\-]*):[ ]*\\[([^\\]]+)\\]/g)]?.[0] ?? []\n      if (vals) {\n        return vals\n          .split(',')\n          .map((val, i) => {\n            val = val.trim()\n            if (!val || val === 'null' || val === 'undefined') return ''\n            if (i === 0) {\n              return `${prop}: ${val};`\n            }\n            return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`\n          })\n          .join('\\n')\n      }\n      return l\n    })\n    .join('\\n')\n}\n\nexport interface ShorthandProps {\n  /** shorthand for css:align-items */\n  ai?: string\n  /** shorthand for css:border */\n  b?: string | number\n  /** shorthand for css:border-radius */\n  br?: string | number\n  /** shorthand for css:background */\n  bg?: string\n  /** shorthand for css:color */\n  c?: string\n  /** shorthand for css:display */\n  d?: string\n  /** shorthand for css:flex */\n  f?: string\n  /** shorthand for css:flex-direction */\n  fd?: string\n  /** shorthand for css:height */\n  h?: number | string\n  /** shorthand for css:inset */\n  i?: number | string\n  /** shorthand for css:justify-content */\n  jc?: string\n  /** shorthand for css:margin */\n  m?: number | string\n  /** shorthand for css:margin-left */\n  ml?: number | string\n  /** shorthand for css:margin-right */\n  mr?: number | string\n  /** shorthand for css:margin-top */\n  mt?: number | string\n  /** shorthand for css:margin-bottom */\n  mb?: number | string\n  /** shorthand for css:margin-top & margin-bottom */\n  my?: number | string\n  /** shorthand for css:margin-left & margin-right */\n  mx?: number | string\n  /** shorthand for css:max-width */\n  maxW?: number | string\n  /** shorthand for css:min-width */\n  minW?: number | string\n  /** shorthand for css:padding */\n  p?: number | string\n  /** shorthand for css:padding-left */\n  pl?: number | string\n  /** shorthand for css:padding-right */\n  pr?: number | string\n  /** shorthand for css:padding-top */\n  pt?: number | string\n  /** shorthand for css:padding-bottom */\n  pb?: number | string\n  /** shorthand for css:padding-top & padding-bottom */\n  py?: number | string\n  /** shorthand for css:padding-left & padding-right */\n  px?: number | string\n  /** shorthand for css:position */\n  pos?: number | string\n  /** shorthand for css:text-align */\n  ta?: string\n  /** shorthand for css:width */\n  w?: number | string\n  /** shorthand for css:z-index */\n  z?: number | string\n}\nexport const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {\n  ai: 'align-items',\n  b: 'border',\n  br: 'border-radius',\n  bg: 'background',\n  c: 'color',\n  d: 'display',\n  f: 'flex',\n  fd: 'flex-direction',\n  i: 'inset',\n  h: 'height',\n  jc: 'justify-content',\n  m: 'margin',\n  ml: 'margin-left',\n  mr: 'margin-right',\n  mt: 'margin-top',\n  mb: 'margin-bottom',\n  maxW: 'max-width',\n  minW: 'min-width',\n  p: 'padding',\n  pl: 'padding-left',\n  pr: 'padding-right',\n  pt: 'padding-top',\n  pb: 'padding-bottom',\n  pos: 'position',\n  ta: 'text-align',\n  w: 'width',\n  z: 'z-index',\n}\nexport const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']\n\n/** Expand short-hand css props to full */\nfunction expandProps(css: string) {\n  css = '\\n' + css // inject a newline to make the regex easier\n  // Handle 'mx', 'my', 'px', 'py'\n  css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\\n$1b:$2')\n  Object.entries(shorthandPropsMap).forEach(([k, v]) => {\n    css = css.replace(new RegExp(`([ \\n\\t;])${k}:`, 'g'), `$1${v}:`)\n  })\n  return css.trim()\n}\n\n/** Find @keyframes, @media, @container queries in css **/\nfunction findQueries(css: string) {\n  const queries = []\n  for (let m of css.matchAll(/[@&]/gm)) {\n    let query = ''\n    let bodyStart = 0\n    let openCount = 0\n    for (let i = m.index!; i < css.length; i++) {\n      if (css[i] === '{') {\n        if (openCount === 0) {\n          query = css.slice(m.index, i).trim()\n          bodyStart = i + 1\n        }\n        openCount++\n      } else if (css[i] === '}') {\n        openCount--\n        if (openCount === 0) {\n          queries.push({\n            start: m.index,\n            end: i + 1,\n            query,\n            outerBody: css.slice(m.index, i + 1),\n            innerBody: css.slice(bodyStart, i),\n          })\n          break\n        }\n      }\n    }\n    if (openCount !== 0) console.error(`${query} not closed: \"${css}\"`)\n  }\n  return queries\n}\n\n/** Trims whitespace for every line */\nfunction trim(css: string) {\n  return css\n    .split('\\n')\n    .map((l) => l.trim())\n    .filter((l) => l)\n    .join('\\n')\n}\n\n/**\n * Assemble a string from a template string array and a list of placeholders.\n *\n * - If the first argument is a string, it is returned as is.\n *\n * i.e.\n * myFoo(...props: TemplateStringProps) => {\n *  const inputStr = t2s(...props);\n * }\n * myFoo`hello ${name}` => 'hello world'\n * myFoo(`hello ${name}`) => 'hello world'\n */\nexport function t2s(...tsp: TemplateStringProps) {\n  const [s, ...p] = tsp\n  return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')\n}\nexport type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]\n\n/**\n * Injects css to the page\n *\n * - Batches adds for performance\n *\n * @param css - css to be injected\n * @returns void\n */\nexport function addCss(css: string) {\n  addCss.que.add(css)\n  setTimeout(() => {\n    const css = [...addCss.que].join('\\n')\n    if (css) {\n      addCss.que.clear()\n      const s = document.createElement('style')\n      s.id = `u${addCss.count++}`\n      s.innerHTML = css\n      document.head.appendChild(s)\n    }\n  }, 0)\n}\naddCss.que = new Set<string>()\naddCss.count = 0\n\n/**\n * Injects css and creates unique class names\n *\n * - Skips if already added\n *\n * @param css - string or template string, to be injected\n * @returns a unique class name\n */\nexport default function createClass(...p: TemplateStringProps) {\n  let css = t2s(...p)\n  if (!css) return ''\n  let className = createClass.history.get(css)\n  if (!className) {\n    className = 's' + createClass.count++\n    createClass.history.set(css, className)\n\n    css = deleteComments(css)\n    css = expandProps(css)\n    css = expandArrayValues(css)\n    const qs = findQueries(css)\n\n    for (let q of qs.reverse()) {\n      css = css.slice(0, q.start) + css.slice(q.end)\n    }\n\n    css = `.${className}{\\n${css}\\n}\\n`\n    css += qs\n      .map((q) => {\n        if (q.query.startsWith('&')) {\n          return `.${className}${q.query.slice(1)}{\\n${q.innerBody}\\n}`\n        }\n        if (q.query.startsWith('@keyframes')) {\n          return q.outerBody\n        }\n        return `${q.query}{\\n.${className}{${q.innerBody}\\n}\\n}`\n      })\n      .join('\\n')\n\n    css = trim(css) + '\\n\\n'\n\n    addCss(css)\n  }\n  return className\n}\ncreateClass.count = 0\ncreateClass.history = new Map<string, string>()\n"],"mappings":"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","names":["src_exports","__export","addCss","classJoin","createClass","shorthandProps","shorthandPropsMap","t2s","__toCommonJS","breakPoints","classes","c","deleteComments","css","expandArrayValues","l","_a","_","prop","vals","val","i","expandProps","k","v","findQueries","queries","m","query","bodyStart","openCount","trim","tsp","s","p","className","qs","q"]}

package/src/index.d.ts

@@ -0,0 +1,110 @@
+/** Joins class names and filters out blanks */
+declare function classJoin(...classes: any[]): string;
+interface ShorthandProps {
+    /** shorthand for css:align-items */
+    ai?: string;
+    /** shorthand for css:border */
+    b?: string | number;
+    /** shorthand for css:border-radius */
+    br?: string | number;
+    /** shorthand for css:background */
+    bg?: string;
+    /** shorthand for css:color */
+    c?: string;
+    /** shorthand for css:display */
+    d?: string;
+    /** shorthand for css:flex */
+    f?: string;
+    /** shorthand for css:flex-direction */
+    fd?: string;
+    /** shorthand for css:height */
+    h?: number | string;
+    /** shorthand for css:inset */
+    i?: number | string;
+    /** shorthand for css:justify-content */
+    jc?: string;
+    /** shorthand for css:margin */
+    m?: number | string;
+    /** shorthand for css:margin-left */
+    ml?: number | string;
+    /** shorthand for css:margin-right */
+    mr?: number | string;
+    /** shorthand for css:margin-top */
+    mt?: number | string;
+    /** shorthand for css:margin-bottom */
+    mb?: number | string;
+    /** shorthand for css:margin-top & margin-bottom */
+    my?: number | string;
+    /** shorthand for css:margin-left & margin-right */
+    mx?: number | string;
+    /** shorthand for css:max-width */
+    maxW?: number | string;
+    /** shorthand for css:min-width */
+    minW?: number | string;
+    /** shorthand for css:padding */
+    p?: number | string;
+    /** shorthand for css:padding-left */
+    pl?: number | string;
+    /** shorthand for css:padding-right */
+    pr?: number | string;
+    /** shorthand for css:padding-top */
+    pt?: number | string;
+    /** shorthand for css:padding-bottom */
+    pb?: number | string;
+    /** shorthand for css:padding-top & padding-bottom */
+    py?: number | string;
+    /** shorthand for css:padding-left & padding-right */
+    px?: number | string;
+    /** shorthand for css:position */
+    pos?: number | string;
+    /** shorthand for css:text-align */
+    ta?: string;
+    /** shorthand for css:width */
+    w?: number | string;
+    /** shorthand for css:z-index */
+    z?: number | string;
+}
+declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
+declare const shorthandProps: string[];
+/**
+ * Assemble a string from a template string array and a list of placeholders.
+ *
+ * - If the first argument is a string, it is returned as is.
+ *
+ * i.e.
+ * myFoo(...props: TemplateStringProps) => {
+ *  const inputStr = t2s(...props);
+ * }
+ * myFoo`hello ${name}` => 'hello world'
+ * myFoo(`hello ${name}`) => 'hello world'
+ */
+declare function t2s(...tsp: TemplateStringProps): string;
+type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]];
+/**
+ * Injects css to the page
+ *
+ * - Batches adds for performance
+ *
+ * @param css - css to be injected
+ * @returns void
+ */
+declare function addCss(css: string): void;
+declare namespace addCss {
+    var que: Set<string>;
+    var count: number;
+}
+/**
+ * Injects css and creates unique class names
+ *
+ * - Skips if already added
+ *
+ * @param css - string or template string, to be injected
+ * @returns a unique class name
+ */
+declare function createClass(...p: TemplateStringProps): string;
+declare namespace createClass {
+    var count: number;
+    var history: Map<string, string>;
+}
+
+export { ShorthandProps, TemplateStringProps, addCss, classJoin, createClass as default, shorthandProps, shorthandPropsMap, t2s };

package/src/index.js

@@ -0,0 +1,23 @@
+var a=["30em","48em","62em","80em","96em"];function h(...r){return r.filter(n=>n&&typeof n=="string").join(" ")}function d(r){return r.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,"")}function l(r){return r.includes("[")?r.split(`
+`).map(n=>{var s;let[t,o,e]=(s=[...n.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)][0])!=null?s:[];return e?e.split(",").map((i,g)=>(i=i.trim(),!i||i==="null"||i==="undefined"?"":g===0?`${o}: ${i};`:`@media (min-width: ${a[g-1]}) { ${o}: ${i}; }`)).join(`
+`):n}).join(`
+`):r}var p={ai:"align-items",b:"border",br:"border-radius",bg:"background",c:"color",d:"display",f:"flex",fd:"flex-direction",i:"inset",h:"height",jc:"justify-content",m:"margin",ml:"margin-left",mr:"margin-right",mt:"margin-top",mb:"margin-bottom",maxW:"max-width",minW:"min-width",p:"padding",pl:"padding-left",pr:"padding-right",pt:"padding-top",pb:"padding-bottom",pos:"position",ta:"text-align",w:"width",z:"z-index"},x=[...Object.keys(p),"mx","my","px","py"];function f(r){return r=`
+`+r,r=r.replace(/([mp])x:([^;]*)/g,`$1l:$2;
+$1r:$2`).replace(/([mp])y:([^;]*);/g,`$1t:$2;
+$1b:$2`),Object.entries(p).forEach(([n,t])=>{r=r.replace(new RegExp(`([ 
+	;])${n}:`,"g"),`$1${t}:`)}),r.trim()}function b(r){let n=[];for(let t of r.matchAll(/[@&]/gm)){let o="",e=0,s=0;for(let i=t.index;i<r.length;i++)if(r[i]==="{")s===0&&(o=r.slice(t.index,i).trim(),e=i+1),s++;else if(r[i]==="}"&&(s--,s===0)){n.push({start:t.index,end:i+1,query:o,outerBody:r.slice(t.index,i+1),innerBody:r.slice(e,i)});break}s!==0&&console.error(`${o} not closed: "${r}"`)}return n}function c(r){return r.split(`
+`).map(n=>n.trim()).filter(n=>n).join(`
+`)}function y(...r){let[n,...t]=r;return typeof n=="string"?n:n.map((o,e)=>{var s;return o+((s=t==null?void 0:t[e])!=null?s:"")}).join("")}function m(r){m.que.add(r),setTimeout(()=>{let n=[...m.que].join(`
+`);if(n){m.que.clear();let t=document.createElement("style");t.id=`u${m.count++}`,t.innerHTML=n,document.head.appendChild(t)}},0)}m.que=new Set;m.count=0;function u(...r){let n=y(...r);if(!n)return"";let t=u.history.get(n);if(!t){t="s"+u.count++,u.history.set(n,t),n=d(n),n=f(n),n=l(n);let o=b(n);for(let e of o.reverse())n=n.slice(0,e.start)+n.slice(e.end);n=`.${t}{
+${n}
+}
+`,n+=o.map(e=>e.query.startsWith("&")?`.${t}${e.query.slice(1)}{
+${e.innerBody}
+}`:e.query.startsWith("@keyframes")?e.outerBody:`${e.query}{
+.${t}{${e.innerBody}
+}
+}`).join(`
+`),n=c(n)+`
+
+`,m(n)}return t}u.count=0;u.history=new Map;export{m as addCss,h as classJoin,u as default,x as shorthandProps,p as shorthandPropsMap,y as t2s};
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["/** Breakpoints like chakra */\nconst breakPoints = ['30em', '48em', '62em', '80em', '96em']\n\n/** Joins class names and filters out blanks */\nexport function classJoin(...classes: any[]) {\n  return classes.filter((c) => c && typeof c === 'string').join(' ')\n}\n\n// delete css comments i.e. {/* blah */}\nfunction deleteComments(css: string) {\n  return css.replace(/{\\/\\*[\\s\\S]*?(?=\\*\\/})\\*\\/}/gm, '')\n}\n\n/**\n * Expands array values into media queries\n *\n * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles\n */\nfunction expandArrayValues(css: string) {\n  if (!css.includes('[')) return css\n  return css\n    .split('\\n')\n    .map((l) => {\n      const [_, prop, vals] = [...l.matchAll(/([A-Za-z\\-]*):[ ]*\\[([^\\]]+)\\]/g)]?.[0] ?? []\n      if (vals) {\n        return vals\n          .split(',')\n          .map((val, i) => {\n            val = val.trim()\n            if (!val || val === 'null' || val === 'undefined') return ''\n            if (i === 0) {\n              return `${prop}: ${val};`\n            }\n            return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`\n          })\n          .join('\\n')\n      }\n      return l\n    })\n    .join('\\n')\n}\n\nexport interface ShorthandProps {\n  /** shorthand for css:align-items */\n  ai?: string\n  /** shorthand for css:border */\n  b?: string | number\n  /** shorthand for css:border-radius */\n  br?: string | number\n  /** shorthand for css:background */\n  bg?: string\n  /** shorthand for css:color */\n  c?: string\n  /** shorthand for css:display */\n  d?: string\n  /** shorthand for css:flex */\n  f?: string\n  /** shorthand for css:flex-direction */\n  fd?: string\n  /** shorthand for css:height */\n  h?: number | string\n  /** shorthand for css:inset */\n  i?: number | string\n  /** shorthand for css:justify-content */\n  jc?: string\n  /** shorthand for css:margin */\n  m?: number | string\n  /** shorthand for css:margin-left */\n  ml?: number | string\n  /** shorthand for css:margin-right */\n  mr?: number | string\n  /** shorthand for css:margin-top */\n  mt?: number | string\n  /** shorthand for css:margin-bottom */\n  mb?: number | string\n  /** shorthand for css:margin-top & margin-bottom */\n  my?: number | string\n  /** shorthand for css:margin-left & margin-right */\n  mx?: number | string\n  /** shorthand for css:max-width */\n  maxW?: number | string\n  /** shorthand for css:min-width */\n  minW?: number | string\n  /** shorthand for css:padding */\n  p?: number | string\n  /** shorthand for css:padding-left */\n  pl?: number | string\n  /** shorthand for css:padding-right */\n  pr?: number | string\n  /** shorthand for css:padding-top */\n  pt?: number | string\n  /** shorthand for css:padding-bottom */\n  pb?: number | string\n  /** shorthand for css:padding-top & padding-bottom */\n  py?: number | string\n  /** shorthand for css:padding-left & padding-right */\n  px?: number | string\n  /** shorthand for css:position */\n  pos?: number | string\n  /** shorthand for css:text-align */\n  ta?: string\n  /** shorthand for css:width */\n  w?: number | string\n  /** shorthand for css:z-index */\n  z?: number | string\n}\nexport const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {\n  ai: 'align-items',\n  b: 'border',\n  br: 'border-radius',\n  bg: 'background',\n  c: 'color',\n  d: 'display',\n  f: 'flex',\n  fd: 'flex-direction',\n  i: 'inset',\n  h: 'height',\n  jc: 'justify-content',\n  m: 'margin',\n  ml: 'margin-left',\n  mr: 'margin-right',\n  mt: 'margin-top',\n  mb: 'margin-bottom',\n  maxW: 'max-width',\n  minW: 'min-width',\n  p: 'padding',\n  pl: 'padding-left',\n  pr: 'padding-right',\n  pt: 'padding-top',\n  pb: 'padding-bottom',\n  pos: 'position',\n  ta: 'text-align',\n  w: 'width',\n  z: 'z-index',\n}\nexport const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']\n\n/** Expand short-hand css props to full */\nfunction expandProps(css: string) {\n  css = '\\n' + css // inject a newline to make the regex easier\n  // Handle 'mx', 'my', 'px', 'py'\n  css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\\n$1b:$2')\n  Object.entries(shorthandPropsMap).forEach(([k, v]) => {\n    css = css.replace(new RegExp(`([ \\n\\t;])${k}:`, 'g'), `$1${v}:`)\n  })\n  return css.trim()\n}\n\n/** Find @keyframes, @media, @container queries in css **/\nfunction findQueries(css: string) {\n  const queries = []\n  for (let m of css.matchAll(/[@&]/gm)) {\n    let query = ''\n    let bodyStart = 0\n    let openCount = 0\n    for (let i = m.index!; i < css.length; i++) {\n      if (css[i] === '{') {\n        if (openCount === 0) {\n          query = css.slice(m.index, i).trim()\n          bodyStart = i + 1\n        }\n        openCount++\n      } else if (css[i] === '}') {\n        openCount--\n        if (openCount === 0) {\n          queries.push({\n            start: m.index,\n            end: i + 1,\n            query,\n            outerBody: css.slice(m.index, i + 1),\n            innerBody: css.slice(bodyStart, i),\n          })\n          break\n        }\n      }\n    }\n    if (openCount !== 0) console.error(`${query} not closed: \"${css}\"`)\n  }\n  return queries\n}\n\n/** Trims whitespace for every line */\nfunction trim(css: string) {\n  return css\n    .split('\\n')\n    .map((l) => l.trim())\n    .filter((l) => l)\n    .join('\\n')\n}\n\n/**\n * Assemble a string from a template string array and a list of placeholders.\n *\n * - If the first argument is a string, it is returned as is.\n *\n * i.e.\n * myFoo(...props: TemplateStringProps) => {\n *  const inputStr = t2s(...props);\n * }\n * myFoo`hello ${name}` => 'hello world'\n * myFoo(`hello ${name}`) => 'hello world'\n */\nexport function t2s(...tsp: TemplateStringProps) {\n  const [s, ...p] = tsp\n  return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')\n}\nexport type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]\n\n/**\n * Injects css to the page\n *\n * - Batches adds for performance\n *\n * @param css - css to be injected\n * @returns void\n */\nexport function addCss(css: string) {\n  addCss.que.add(css)\n  setTimeout(() => {\n    const css = [...addCss.que].join('\\n')\n    if (css) {\n      addCss.que.clear()\n      const s = document.createElement('style')\n      s.id = `u${addCss.count++}`\n      s.innerHTML = css\n      document.head.appendChild(s)\n    }\n  }, 0)\n}\naddCss.que = new Set<string>()\naddCss.count = 0\n\n/**\n * Injects css and creates unique class names\n *\n * - Skips if already added\n *\n * @param css - string or template string, to be injected\n * @returns a unique class name\n */\nexport default function createClass(...p: TemplateStringProps) {\n  let css = t2s(...p)\n  if (!css) return ''\n  let className = createClass.history.get(css)\n  if (!className) {\n    className = 's' + createClass.count++\n    createClass.history.set(css, className)\n\n    css = deleteComments(css)\n    css = expandProps(css)\n    css = expandArrayValues(css)\n    const qs = findQueries(css)\n\n    for (let q of qs.reverse()) {\n      css = css.slice(0, q.start) + css.slice(q.end)\n    }\n\n    css = `.${className}{\\n${css}\\n}\\n`\n    css += qs\n      .map((q) => {\n        if (q.query.startsWith('&')) {\n          return `.${className}${q.query.slice(1)}{\\n${q.innerBody}\\n}`\n        }\n        if (q.query.startsWith('@keyframes')) {\n          return q.outerBody\n        }\n        return `${q.query}{\\n.${className}{${q.innerBody}\\n}\\n}`\n      })\n      .join('\\n')\n\n    css = trim(css) + '\\n\\n'\n\n    addCss(css)\n  }\n  return className\n}\ncreateClass.count = 0\ncreateClass.history = new Map<string, string>()\n"],"mappings":"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","names":["breakPoints","classJoin","classes","c","deleteComments","css","expandArrayValues","l","_a","_","prop","vals","val","i","shorthandPropsMap","shorthandProps","expandProps","k","v","findQueries","queries","m","query","bodyStart","openCount","trim","t2s","tsp","s","p","addCss","createClass","className","qs","q"]}

package/src/index.ts

@@ -0,0 +1,278 @@
+/** Breakpoints like chakra */
+const breakPoints = ['30em', '48em', '62em', '80em', '96em']
+
+/** Joins class names and filters out blanks */
+export function classJoin(...classes: any[]) {
+  return classes.filter((c) => c && typeof c === 'string').join(' ')
+}
+
+// delete css comments i.e. {/* blah */}
+function deleteComments(css: string) {
+  return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '')
+}
+
+/**
+ * Expands array values into media queries
+ *
+ * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
+ */
+function expandArrayValues(css: string) {
+  if (!css.includes('[')) return css
+  return css
+    .split('\n')
+    .map((l) => {
+      const [_, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
+      if (vals) {
+        return vals
+          .split(',')
+          .map((val, i) => {
+            val = val.trim()
+            if (!val || val === 'null' || val === 'undefined') return ''
+            if (i === 0) {
+              return `${prop}: ${val};`
+            }
+            return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`
+          })
+          .join('\n')
+      }
+      return l
+    })
+    .join('\n')
+}
+
+export interface ShorthandProps {
+  /** shorthand for css:align-items */
+  ai?: string
+  /** shorthand for css:border */
+  b?: string | number
+  /** shorthand for css:border-radius */
+  br?: string | number
+  /** shorthand for css:background */
+  bg?: string
+  /** shorthand for css:color */
+  c?: string
+  /** shorthand for css:display */
+  d?: string
+  /** shorthand for css:flex */
+  f?: string
+  /** shorthand for css:flex-direction */
+  fd?: string
+  /** shorthand for css:height */
+  h?: number | string
+  /** shorthand for css:inset */
+  i?: number | string
+  /** shorthand for css:justify-content */
+  jc?: string
+  /** shorthand for css:margin */
+  m?: number | string
+  /** shorthand for css:margin-left */
+  ml?: number | string
+  /** shorthand for css:margin-right */
+  mr?: number | string
+  /** shorthand for css:margin-top */
+  mt?: number | string
+  /** shorthand for css:margin-bottom */
+  mb?: number | string
+  /** shorthand for css:margin-top & margin-bottom */
+  my?: number | string
+  /** shorthand for css:margin-left & margin-right */
+  mx?: number | string
+  /** shorthand for css:max-width */
+  maxW?: number | string
+  /** shorthand for css:min-width */
+  minW?: number | string
+  /** shorthand for css:padding */
+  p?: number | string
+  /** shorthand for css:padding-left */
+  pl?: number | string
+  /** shorthand for css:padding-right */
+  pr?: number | string
+  /** shorthand for css:padding-top */
+  pt?: number | string
+  /** shorthand for css:padding-bottom */
+  pb?: number | string
+  /** shorthand for css:padding-top & padding-bottom */
+  py?: number | string
+  /** shorthand for css:padding-left & padding-right */
+  px?: number | string
+  /** shorthand for css:position */
+  pos?: number | string
+  /** shorthand for css:text-align */
+  ta?: string
+  /** shorthand for css:width */
+  w?: number | string
+  /** shorthand for css:z-index */
+  z?: number | string
+}
+export const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {
+  ai: 'align-items',
+  b: 'border',
+  br: 'border-radius',
+  bg: 'background',
+  c: 'color',
+  d: 'display',
+  f: 'flex',
+  fd: 'flex-direction',
+  i: 'inset',
+  h: 'height',
+  jc: 'justify-content',
+  m: 'margin',
+  ml: 'margin-left',
+  mr: 'margin-right',
+  mt: 'margin-top',
+  mb: 'margin-bottom',
+  maxW: 'max-width',
+  minW: 'min-width',
+  p: 'padding',
+  pl: 'padding-left',
+  pr: 'padding-right',
+  pt: 'padding-top',
+  pb: 'padding-bottom',
+  pos: 'position',
+  ta: 'text-align',
+  w: 'width',
+  z: 'z-index',
+}
+export const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']
+
+/** Expand short-hand css props to full */
+function expandProps(css: string) {
+  css = '\n' + css // inject a newline to make the regex easier
+  // Handle 'mx', 'my', 'px', 'py'
+  css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2')
+  Object.entries(shorthandPropsMap).forEach(([k, v]) => {
+    css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`)
+  })
+  return css.trim()
+}
+
+/** Find @keyframes, @media, @container queries in css **/
+function findQueries(css: string) {
+  const queries = []
+  for (let m of css.matchAll(/[@&]/gm)) {
+    let query = ''
+    let bodyStart = 0
+    let openCount = 0
+    for (let i = m.index!; i < css.length; i++) {
+      if (css[i] === '{') {
+        if (openCount === 0) {
+          query = css.slice(m.index, i).trim()
+          bodyStart = i + 1
+        }
+        openCount++
+      } else if (css[i] === '}') {
+        openCount--
+        if (openCount === 0) {
+          queries.push({
+            start: m.index,
+            end: i + 1,
+            query,
+            outerBody: css.slice(m.index, i + 1),
+            innerBody: css.slice(bodyStart, i),
+          })
+          break
+        }
+      }
+    }
+    if (openCount !== 0) console.error(`${query} not closed: "${css}"`)
+  }
+  return queries
+}
+
+/** Trims whitespace for every line */
+function trim(css: string) {
+  return css
+    .split('\n')
+    .map((l) => l.trim())
+    .filter((l) => l)
+    .join('\n')
+}
+
+/**
+ * Assemble a string from a template string array and a list of placeholders.
+ *
+ * - If the first argument is a string, it is returned as is.
+ *
+ * i.e.
+ * myFoo(...props: TemplateStringProps) => {
+ *  const inputStr = t2s(...props);
+ * }
+ * myFoo`hello ${name}` => 'hello world'
+ * myFoo(`hello ${name}`) => 'hello world'
+ */
+export function t2s(...tsp: TemplateStringProps) {
+  const [s, ...p] = tsp
+  return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')
+}
+export type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]
+
+/**
+ * Injects css to the page
+ *
+ * - Batches adds for performance
+ *
+ * @param css - css to be injected
+ * @returns void
+ */
+export function addCss(css: string) {
+  addCss.que.add(css)
+  setTimeout(() => {
+    const css = [...addCss.que].join('\n')
+    if (css) {
+      addCss.que.clear()
+      const s = document.createElement('style')
+      s.id = `u${addCss.count++}`
+      s.innerHTML = css
+      document.head.appendChild(s)
+    }
+  }, 0)
+}
+addCss.que = new Set<string>()
+addCss.count = 0
+
+/**
+ * Injects css and creates unique class names
+ *
+ * - Skips if already added
+ *
+ * @param css - string or template string, to be injected
+ * @returns a unique class name
+ */
+export default function createClass(...p: TemplateStringProps) {
+  let css = t2s(...p)
+  if (!css) return ''
+  let className = createClass.history.get(css)
+  if (!className) {
+    className = 's' + createClass.count++
+    createClass.history.set(css, className)
+
+    css = deleteComments(css)
+    css = expandProps(css)
+    css = expandArrayValues(css)
+    const qs = findQueries(css)
+
+    for (let q of qs.reverse()) {
+      css = css.slice(0, q.start) + css.slice(q.end)
+    }
+
+    css = `.${className}{\n${css}\n}\n`
+    css += qs
+      .map((q) => {
+        if (q.query.startsWith('&')) {
+          return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`
+        }
+        if (q.query.startsWith('@keyframes')) {
+          return q.outerBody
+        }
+        return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`
+      })
+      .join('\n')
+
+    css = trim(css) + '\n\n'
+
+    addCss(css)
+  }
+  return className
+}
+createClass.count = 0
+createClass.history = new Map<string, string>()

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"]
+}