@slimr/css 2.1.11 → 2.1.14

package/esm/createClass.d.ts

@@ -0,0 +1,43 @@
+import { T2SProps } from '@slimr/util';
+/**
+ * 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;
+/**
+ * Upserts and returns a unique css class for a given css string
+ *
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
+ *
+ * @returns a unique class name
+ *
+ * @example
+ * ```typescript
+ * c1 = createClass('c: red;') // queues the create of new css class 's0'
+ * c2 = createClass('c: red;') // is duplicate so will return 's0'
+ * c3 = createClass`c: red;` // same
+ * c4 = css`c: red;` // same
+ * // c1 = c2 = c3 = c4
+ * <div className={css`c: red;`} /> // will resolve to 's0' like above
+ * c5 = css`c: blue;` // queues the create of new css class 's1'
+ * c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
+ * ```
+ * ...and the queue will be executed next javascript tick
+ */
+export declare function createClass(...p: T2SProps): string;
+export declare namespace createClass {
+    var breakPoints: string[];
+    var count: number;
+    var history: Map<string, string>;
+}

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

@@ -1,9 +1,80 @@
-/** Breakpoints like chakra */
-export const breakPoints = ['30em', '48em', '62em', '80em', '96em'];
-/** Joins class names and filters out blanks */
+import { t2s } from '@slimr/util';
+import { addCss } from './addCss.js';
+import { expandShorthands } from './shorthandProps.js';
+/**
+ * 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) {
     return classes.filter(c => c && typeof c === 'string').join(' ');
 }
+/**
+ * Upserts and returns a unique css class for a given css string
+ *
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
+ *
+ * @returns a unique class name
+ *
+ * @example
+ * ```typescript
+ * c1 = createClass('c: red;') // queues the create of new css class 's0'
+ * c2 = createClass('c: red;') // is duplicate so will return 's0'
+ * c3 = createClass`c: red;` // same
+ * c4 = css`c: red;` // same
+ * // c1 = c2 = c3 = c4
+ * <div className={css`c: red;`} /> // will resolve to 's0' like above
+ * c5 = css`c: blue;` // queues the create of new css class 's1'
+ * c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
+ * ```
+ * ...and the queue will be executed next javascript tick
+ */
+export 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 = 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();
 /** delete css comments **/
 function deleteComments(css) {
     return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
@@ -31,7 +102,7 @@ function expandArrayValues(css) {
                 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');
         }
@@ -39,48 +110,6 @@ function expandArrayValues(css) {
     })
         .join('\n');
 }
-export const 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',
-};
-export const shorthandProps = [...Object.keys(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(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 = [];
@@ -116,92 +145,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'
- */
-export function t2s(...tsp) {
-    const [s, ...p] = tsp;
-    return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('');
-}
-/**
- * Injects css to the page
- *
- * - Batches adds for performance
- *
- * @param css - css to be injected
- * @returns void
- */
-export 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);
-}
-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
- */
-export 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;
-}
-createClass.count = 0;
-createClass.history = new Map();
 //# sourceMappingURL=createClass.js.map

package/esm/createClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,GAAG,EAAC,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAA;AAEpD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,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;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,GAAG,CAAW;IACxC,IAAI,GAAG,GAAG,GAAG,CAAC,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,gBAAgB,CAAC,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;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/esm/createClass.ts

@@ -1,14 +1,88 @@
-/** 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 {addCss} from './addCss.js'
+import {expandShorthands} from './shorthandProps.js'
 
-/** Joins class names and filters out blanks */
-export function classJoin(...classes: allowableAny[]) {
+/**
+ * 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(' ')
 }
 
+/**
+ * Upserts and returns a unique css class for a given css string
+ *
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
+ *
+ * @returns a unique class name
+ *
+ * @example
+ * ```typescript
+ * c1 = createClass('c: red;') // queues the create of new css class 's0'
+ * c2 = createClass('c: red;') // is duplicate so will return 's0'
+ * c3 = createClass`c: red;` // same
+ * c4 = css`c: red;` // same
+ * // c1 = c2 = c3 = c4
+ * <div className={css`c: red;`} /> // will resolve to 's0' like above
+ * c5 = css`c: blue;` // queues the create of new css class 's1'
+ * c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
+ * ```
+ * ...and the queue will be executed next javascript tick
+ */
+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 +109,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 +118,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 +152,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>()

package/{cjs/src → esm}/index.d.ts

@@ -1,2 +1,3 @@
 export * from './createClass.js';
+export * from './shorthandProps.js';
 export { createClass as css } from './createClass.js';

package/esm/{src/index.js → index.js}

@@ -1,3 +1,4 @@
 export * from './createClass.js';
+export * from './shorthandProps.js';
 export { createClass as css } from './createClass.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAC,WAAW,IAAI,GAAG,EAAC,MAAM,kBAAkB,CAAA"}

package/esm/index.ts

@@ -1,2 +1,3 @@
 export * from './createClass.js'
+export * from './shorthandProps.js'
 export {createClass as css} from './createClass.js'

package/esm/{src/createClass.d.ts → shorthandProps.d.ts}

@@ -1,8 +1,6 @@
-/** Breakpoints like chakra */
-export declare const breakPoints: string[];
-type allowableAny = any;
-/** Joins class names and filters out blanks */
-export declare function classJoin(...classes: allowableAny[]): string;
+/**
+ * All the shorthand props that can be used in the css prop
+ */
 export interface ShorthandProps {
     /** shorthand for css:align-items */
     ai?: string;
@@ -67,49 +65,11 @@ export interface ShorthandProps {
     /** shorthand for css:z-index */
     z?: number | string;
 }
-export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
-export 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'
- */
-export declare function t2s(...tsp: TemplateStringProps): string;
-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
+ * Expand short-hand css props to full
  */
-export declare function addCss(css: string): void;
-export declare namespace addCss {
-    var que: Set<string>;
-    var count: number;
-}
+export declare function expandShorthands(css: string): string;
 /**
- * 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
+ * Map shorthand props to their full css prop
  */
-export declare function createClass(...p: TemplateStringProps): string;
-export declare namespace createClass {
-    var count: number;
-    var history: Map<string, string>;
-}
-export {};
+export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;