@slimr/css 2.1.11 → 2.1.12

package/README.md

@@ -1,6 +1,6 @@
 # @slimr/css
 
-A tiny alternative to the popular emotion library
+tiny css-in-js features, inspired by the popular emotion library
 
 `@slimr` is a set of slim React (hence '@slimr') libs:
 
@@ -16,9 +16,9 @@ A tiny alternative to the popular emotion library
 
 Pros:
 
-- Much less bundle size
+- Much smaller (less bundle size)
 - Less is more: faster, less bugs, no breaking changes
-- Is progressive -- lazy loads styles along with component if component is lazy
+- Is progressive -- lazy loads styles
 - Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props):
   - `m` --> `margin`
   - `mx` --> `margin-left` and bottom
@@ -35,11 +35,7 @@ Pros:
   }
   ```
 
-  - Breakpoints are `[30em, 48em, 62em, 80em, 96em]`
-
-Cons:
-
-- No SSR support
+  - Breakpoints are `[30em, 48em, 62em, 80em, 96em]` and can be overridden by setting `css.breakpoints`
 
 ## Setup/Install
 
@@ -47,6 +43,30 @@ Cons:
 npm i @slimr/css
 ```
 
+## addCss
+
+Injects css to the page head
+
+- Lazy: Will not be added until the component mounts, if called from within a component
+- Batches dom changes for better performance
+- Has local cache to recall prior adds, to reduce duplicates and dom changes
+
+@param css - css to be injected
+@returns void
+
+## `css` (alias for `createClass`)
+
+## `classJoin`
+
+Joins class names and omits falsey props
+
+```typescript
+classJoin('a', 'b', 'c') // 'a b c'
+classJoin('a', 0, 'b', null, 'c') // 'a b c'
+```
+
+## Shorthang Props (`shorthandPropsMap` and `ShorthandProps`)
+
 ## Usage
 
 ```tsx

package/cjs/createClass.d.ts

@@ -0,0 +1,43 @@
+import { T2SProps } from '@slimr/util';
+/**
+ * Injects css to the page head
+ *
+ * - Lazy: Will not be added until the component mounts, if called from within a component
+ * - Batches dom changes for better performance
+ * - Has local cache to recall prior adds, to reduce duplicates and dom changes
+ *
+ * @param css - css to be injected
+ * @returns void
+ */
+export declare function addCss(css: string): void;
+export declare namespace addCss {
+    var que: Set<string>;
+    var count: number;
+}
+/**
+ * Joins class names and omits falsey props
+ *
+ * @param classes - class names to be joined
+ * @returns a string of joined class names
+ *
+ * @example
+ * ```typescript
+ * classJoin('a', 'b', 'c') // 'a b c'
+ * classJoin('a', 0, 'b', null, 'c') // 'a b c'
+ * ```
+ */
+export declare function classJoin(...classes: (string | 0 | null | undefined)[]): string;
+/**
+ * Injects css and creates unique class names
+ *
+ * - Skips if already added
+ *
+ * @param cssString - string or template string, to be injected
+ * @returns a unique class name
+ */
+export declare function createClass(...p: T2SProps): string;
+export declare namespace createClass {
+    var breakPoints: string[];
+    var count: number;
+    var history: Map<string, string>;
+}

package/cjs/{src/createClass.js → createClass.js}

@@ -1,13 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createClass = exports.addCss = exports.t2s = exports.shorthandProps = exports.shorthandPropsMap = exports.classJoin = exports.breakPoints = void 0;
-/** Breakpoints like chakra */
-exports.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
-/** Joins class names and filters out blanks */
+exports.createClass = exports.classJoin = exports.addCss = void 0;
+const util_1 = require("@slimr/util");
+const shorthandProps_js_1 = require("./shorthandProps.js");
+/**
+ * Injects css to the page head
+ *
+ * - Lazy: Will not be added until the component mounts, if called from within a component
+ * - Batches dom changes for better performance
+ * - Has local cache to recall prior adds, to reduce duplicates and dom changes
+ *
+ * @param css - css to be injected
+ * @returns void
+ */
+function addCss(css) {
+    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);
+}
+exports.addCss = addCss;
+addCss.que = new Set();
+addCss.count = 0;
+/**
+ * Joins class names and omits falsey props
+ *
+ * @param classes - class names to be joined
+ * @returns a string of joined class names
+ *
+ * @example
+ * ```typescript
+ * classJoin('a', 'b', 'c') // 'a b c'
+ * classJoin('a', 0, 'b', null, 'c') // 'a b c'
+ * ```
+ */
 function classJoin(...classes) {
     return classes.filter(c => c && typeof c === 'string').join(' ');
 }
 exports.classJoin = classJoin;
+/**
+ * Injects css and creates unique class names
+ *
+ * - Skips if already added
+ *
+ * @param cssString - string or template string, to be injected
+ * @returns a unique class name
+ */
+function createClass(...p) {
+    let css = (0, util_1.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 = (0, shorthandProps_js_1.expandShorthands)(css);
+        css = expandArrayValues(css);
+        const qs = findQueries(css);
+        for (const 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 = trimByLine(css) + '\n\n';
+        addCss(css);
+    }
+    return className;
+}
+exports.createClass = createClass;
+/** Breakpoints like chakra */
+createClass.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
+createClass.count = 0;
+createClass.history = new Map();
 /** delete css comments **/
 function deleteComments(css) {
     return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
@@ -35,7 +117,7 @@ function expandArrayValues(css) {
                 if (i === 0) {
                     return `${prop}: ${val};`;
                 }
-                return `@media (min-width: ${exports.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
+                return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
             })
                 .join('\n');
         }
@@ -43,48 +125,6 @@ function expandArrayValues(css) {
     })
         .join('\n');
 }
-exports.shorthandPropsMap = {
-    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',
-};
-exports.shorthandProps = [...Object.keys(exports.shorthandPropsMap), 'mx', 'my', 'px', 'py'];
-/** Expand short-hand css props to full */
-function expandProps(css) {
-    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(exports.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) {
     const queries = [];
@@ -120,95 +160,11 @@ function findQueries(css) {
     return queries;
 }
 /** Trims whitespace for every line */
-function trim(css) {
+function trimByLine(css) {
     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'
- */
-function t2s(...tsp) {
-    const [s, ...p] = tsp;
-    return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('');
-}
-exports.t2s = t2s;
-/**
- * Injects css to the page
- *
- * - Batches adds for performance
- *
- * @param css - css to be injected
- * @returns void
- */
-function addCss(css) {
-    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);
-}
-exports.addCss = addCss;
-addCss.que = new Set();
-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
- */
-function createClass(...p) {
-    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 (const 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;
-}
-exports.createClass = createClass;
-createClass.count = 0;
-createClass.history = new Map();
 //# sourceMappingURL=createClass.js.map

package/cjs/createClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":";;;AAAA,sCAAyC;AAEzC,2DAAoD;AAEpD;;;;;;;;;GASG;AACH,SAAgB,MAAM,CAAC,GAAW;IAChC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACtC,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAA;YAClB,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACzC,CAAC,CAAC,EAAE,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,CAAA;YAC3B,CAAC,CAAC,SAAS,GAAG,GAAG,CAAA;YACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;SAC7B;IACH,CAAC,EAAE,CAAC,CAAC,CAAA;AACP,CAAC;AAZD,wBAYC;AACD,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,EAAU,CAAA;AAC9B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAA;AAEhB;;;;;;;;;;;GAWG;AACH,SAAgB,SAAS,CAAC,GAAG,OAA0C;IACrE,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClE,CAAC;AAFD,8BAEC;AAED;;;;;;;GAOG;AACH,SAAgB,WAAW,CAAC,GAAG,CAAW;IACxC,IAAI,GAAG,GAAG,IAAA,UAAG,EAAC,GAAG,CAAC,CAAC,CAAA;IACnB,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAA;IACnB,IAAI,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5C,IAAI,CAAC,SAAS,EAAE;QACd,SAAS,GAAG,GAAG,GAAG,WAAW,CAAC,KAAK,EAAE,CAAA;QACrC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAA;QAEvC,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;QACzB,GAAG,GAAG,IAAA,oCAAgB,EAAC,GAAG,CAAC,CAAA;QAC3B,GAAG,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAA;QAC5B,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;QAE3B,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;YAC5B,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;SAC/C;QAED,GAAG,GAAG,IAAI,SAAS,MAAM,GAAG,OAAO,CAAA;QACnC,GAAG,IAAI,EAAE;aACN,GAAG,CAAC,CAAC,CAAC,EAAE;YACP,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;gBAC3B,OAAO,IAAI,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,KAAK,CAAA;aAC9D;YACD,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE;gBACpC,OAAO,CAAC,CAAC,SAAS,CAAA;aACnB;YACD,OAAO,GAAG,CAAC,CAAC,KAAK,OAAO,SAAS,IAAI,CAAC,CAAC,SAAS,QAAQ,CAAA;QAC1D,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,MAAM,CAAA;QAE9B,MAAM,CAAC,GAAG,CAAC,CAAA;KACZ;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAnCD,kCAmCC;AACD,8BAA8B;AAC9B,WAAW,CAAC,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAClE,WAAW,CAAC,KAAK,GAAG,CAAC,CAAA;AACrB,WAAW,CAAC,OAAO,GAAG,IAAI,GAAG,EAAkB,CAAA;AAE/C,2BAA2B;AAC3B,SAAS,cAAc,CAAC,GAAW;IACjC,OAAO,GAAG,CAAC,OAAO,CAAC,+BAA+B,EAAE,EAAE,CAAC,CAAA;AACzD,CAAC;AAED;;;;GAIG;AACH,SAAS,iBAAiB,CAAC,GAAW;IACpC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,CAAA;IAClC,OAAO,GAAG;SACP,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE;QACP,6CAA6C;QAC7C,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QACpF,IAAI,IAAI,EAAE;YACR,OAAO,IAAI;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACd,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAA;gBAChB,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,WAAW;oBAAE,OAAO,EAAE,CAAA;gBAC5D,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,OAAO,GAAG,IAAI,KAAK,GAAG,GAAG,CAAA;iBAC1B;gBACD,OAAO,sBAAsB,WAAW,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,IAAI,KAAK,GAAG,KAAK,CAAA;YACrF,CAAC,CAAC;iBACD,IAAI,CAAC,IAAI,CAAC,CAAA;SACd;QACD,OAAO,CAAC,CAAA;IACV,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAED,0DAA0D;AAC1D,SAAS,WAAW,CAAC,GAAW;IAC9B,MAAM,OAAO,GAAG,EAAE,CAAA;IAClB,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QACtC,IAAI,KAAK,GAAG,EAAE,CAAA;QACd,IAAI,SAAS,GAAG,CAAC,CAAA;QACjB,IAAI,SAAS,GAAG,CAAC,CAAA;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAM,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;gBAClB,IAAI,SAAS,KAAK,CAAC,EAAE;oBACnB,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;oBACpC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;iBAClB;gBACD,SAAS,EAAE,CAAA;aACZ;iBAAM,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;gBACzB,SAAS,EAAE,CAAA;gBACX,IAAI,SAAS,KAAK,CAAC,EAAE;oBACnB,OAAO,CAAC,IAAI,CAAC;wBACX,KAAK,EAAE,CAAC,CAAC,KAAK;wBACd,GAAG,EAAE,CAAC,GAAG,CAAC;wBACV,KAAK;wBACL,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;wBACpC,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;qBACnC,CAAC,CAAA;oBACF,MAAK;iBACN;aACF;SACF;QACD,IAAI,SAAS,KAAK,CAAC;YAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,iBAAiB,GAAG,GAAG,CAAC,CAAA;KACpE;IACD,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,sCAAsC;AACtC,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACd,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC"}

package/cjs/createClass.ts

@@ -1,14 +1,98 @@
-/** Breakpoints like chakra */
-export const breakPoints = ['30em', '48em', '62em', '80em', '96em']
+import {T2SProps, t2s} from '@slimr/util'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type allowableAny = any
+import {expandShorthands} from './shorthandProps.js'
 
-/** Joins class names and filters out blanks */
-export function classJoin(...classes: allowableAny[]) {
+/**
+ * Injects css to the page head
+ *
+ * - Lazy: Will not be added until the component mounts, if called from within a component
+ * - Batches dom changes for better performance
+ * - Has local cache to recall prior adds, to reduce duplicates and dom changes
+ *
+ * @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
+
+/**
+ * Joins class names and omits falsey props
+ *
+ * @param classes - class names to be joined
+ * @returns a string of joined class names
+ *
+ * @example
+ * ```typescript
+ * classJoin('a', 'b', 'c') // 'a b c'
+ * classJoin('a', 0, 'b', null, 'c') // 'a b c'
+ * ```
+ */
+export function classJoin(...classes: (string | 0 | null | undefined)[]) {
   return classes.filter(c => c && typeof c === 'string').join(' ')
 }
 
+/**
+ * Injects css and creates unique class names
+ *
+ * - Skips if already added
+ *
+ * @param cssString - string or template string, to be injected
+ * @returns a unique class name
+ */
+export function createClass(...p: T2SProps) {
+  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 = expandShorthands(css)
+    css = expandArrayValues(css)
+    const qs = findQueries(css)
+
+    for (const 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 = trimByLine(css) + '\n\n'
+
+    addCss(css)
+  }
+  return className
+}
+/** Breakpoints like chakra */
+createClass.breakPoints = ['30em', '48em', '62em', '80em', '96em']
+createClass.count = 0
+createClass.history = new Map<string, string>()
+
 /** delete css comments **/
 function deleteComments(css: string) {
   return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '')
@@ -35,7 +119,7 @@ function expandArrayValues(css: string) {
             if (i === 0) {
               return `${prop}: ${val};`
             }
-            return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`
+            return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`
           })
           .join('\n')
       }
@@ -44,117 +128,6 @@ function expandArrayValues(css: string) {
     .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 = []
@@ -189,102 +162,10 @@ function findQueries(css: string) {
 }
 
 /** Trims whitespace for every line */
-function trim(css: string) {
+function trimByLine(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 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 (const 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>()