@slimr/css 2.1.12 → 2.1.14

package/README.md

@@ -1,7 +1,19 @@
-# @slimr/css
+# 🪶 @slimr/css [![npm package](https://img.shields.io/npm/v/@slimr/css.svg?style=flat-square)](https://npmjs.org/package/@slimr/css)
 
 tiny css-in-js features, inspired by the popular emotion library
 
+Demo: [CodeSandbox](https://codesandbox.io/s/64r9px?file=/src/App.tsx)
+
+Features:
+
+- Much smaller (less bundle size)
+- Less is more: faster, less bugs, no breaking changes
+- Is progressive -- lazy loads styles
+- Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props)
+- CSS responsive shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles)
+
+## Context
+
 `@slimr` is a set of slim React (hence '@slimr') libs:
 
 - [@slimr/css](https://www.npmjs.com/package/@slimr/css) - Framework agnostic css-in-js features inspired by the popular Emotion lib
@@ -14,85 +26,61 @@ tiny css-in-js features, inspired by the popular emotion library
 - [@slimr/swr](https://www.npmjs.com/package/@slimr/swr) - A React hook for fetching data that supports stale-while-refresh eager rendering
 - [@slimr/util](https://www.npmjs.com/package/@slimr/util) - Framework agnostic Javascript polyfills
 
-Pros:
-
-- Much smaller (less bundle size)
-- Less is more: faster, less bugs, no breaking changes
-- 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
-  - `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`
-
 ## Setup/Install
 
 ```bash
 npm i @slimr/css
 ```
 
-## addCss
+## API
+
+### 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
+- Queues and batches injections for better performance
 - Has local cache to recall prior adds, to reduce duplicates and dom changes
 
-@param css - css to be injected
-@returns void
+```typescript
+import { addCSs } from '@slimr/css'
+addCss(`.foo { color: green; }`) // queues css for injection
+addCss(`.foo { color: green; }`) // ignored bc duplicate
+addCss(`.foo { background: purplse`) // queues more css
+// the queue will be executed next javascript tick
+```
+
+### `css` (alias for `createClass`)
 
-## `css` (alias for `createClass`)
+Upserts and returns a unique css class for a given css string
 
-## `classJoin`
+- Leverages addCss under the hood, so very performant
+- Supports several css short-hands, inspired by [Chakra-UI's box](https://chakra-ui.com/docs/styled-system/responsive-styles)
+- Supports array values for responsive styles, similar to Chakra-UI's box. More [here](https://github.com/bdombro/slimr/blob/65bf012086760b7e481a4064f3be8aea6a098b91/packages/css/src/index.ts#L73)
+
+```typescript
+import {createClass, css} from '@slimr/css'
+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
+
+### `classJoin`
 
 Joins class names and omits falsey props
 
 ```typescript
+import { classJoin } from '@slimr/css'
 classJoin('a', 'b', 'c') // 'a b c'
 classJoin('a', 0, 'b', null, 'c') // 'a b c'
 ```
 
-## Shorthang Props (`shorthandPropsMap` and `ShorthandProps`)
-
-## Usage
-
-```tsx
-// Add some global styles
-addCss`
-  body {
-    color: lightgray;
-  }
-`
-  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)

package/cjs/addCss.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+export declare function addCss(css: string): void;
+export declare namespace addCss {
+    var que: Set<string>;
+    var count: number;
+}

package/cjs/addCss.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCss = void 0;
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+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;
+//# sourceMappingURL=addCss.js.map

package/cjs/addCss.js.map

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

package/cjs/addCss.ts

@@ -0,0 +1,33 @@
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+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

package/cjs/createClass.d.ts

@@ -1,23 +1,10 @@
 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
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -28,12 +15,25 @@ export declare namespace addCss {
  */
 export declare function classJoin(...classes: (string | 0 | null | undefined)[]): string;
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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 {

package/cjs/createClass.js

@@ -1,38 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createClass = exports.classJoin = exports.addCss = void 0;
+exports.createClass = exports.classJoin = void 0;
 const util_1 = require("@slimr/util");
+const addCss_js_1 = require("./addCss.js");
 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
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -46,12 +23,25 @@ function classJoin(...classes) {
 }
 exports.classJoin = classJoin;
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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
  */
 function createClass(...p) {
     let css = (0, util_1.t2s)(...p);
@@ -81,7 +71,7 @@ function createClass(...p) {
         })
             .join('\n');
         css = trimByLine(css) + '\n\n';
-        addCss(css);
+        (0, addCss_js_1.addCss)(css);
     }
     return className;
 }

package/cjs/createClass.js.map

@@ -1 +1 @@
-{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":";;;AAAA,sCAAyC;AAEzC,2CAAkC;AAClC,2DAAoD;AAEpD;;;;;;;;;;;;;GAaG;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;;;;;;;;;;;;;;;;;;;;GAoBG;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,IAAA,kBAAM,EAAC,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,37 +1,14 @@
 import {T2SProps, t2s} from '@slimr/util'
 
+import {addCss} from './addCss.js'
 import {expandShorthands} from './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
- */
-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
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -45,12 +22,25 @@ export function classJoin(...classes: (string | 0 | null | undefined)[]) {
 }
 
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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)

package/esm/addCss.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+export declare function addCss(css: string): void;
+export declare namespace addCss {
+    var que: Set<string>;
+    var count: number;
+}

package/esm/addCss.js

@@ -0,0 +1,34 @@
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+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;
+//# sourceMappingURL=addCss.js.map

package/esm/addCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addCss.js","sourceRoot":"","sources":["../src/addCss.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,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;AACD,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,EAAU,CAAA;AAC9B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAA"}

package/esm/addCss.ts

@@ -0,0 +1,33 @@
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+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

package/esm/createClass.d.ts

@@ -1,23 +1,10 @@
 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
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -28,12 +15,25 @@ export declare namespace addCss {
  */
 export declare function classJoin(...classes: (string | 0 | null | undefined)[]): string;
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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 {

package/esm/createClass.js

@@ -1,34 +1,12 @@
 import { t2s } from '@slimr/util';
+import { addCss } from './addCss.js';
 import { expandShorthands } from './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
- */
-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;
 /**
  * Joins class names and omits falsey props
  *
- * @param classes - class names to be joined
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -41,12 +19,25 @@ export function classJoin(...classes) {
     return classes.filter(c => c && typeof c === 'string').join(' ');
 }
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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);

package/esm/createClass.js.map

@@ -1 +1 @@
-{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":"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"}
+{"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,37 +1,14 @@
 import {T2SProps, t2s} from '@slimr/util'
 
+import {addCss} from './addCss.js'
 import {expandShorthands} from './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
- */
-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
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -45,12 +22,25 @@ export function classJoin(...classes: (string | 0 | null | undefined)[]) {
 }
 
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimr/css",
-  "version": "2.1.12",
+  "version": "2.1.14",
   "author": "Brian Dombrowski",
   "license": "ISC",
   "private": false,
@@ -34,6 +34,6 @@
     "prepack": "run-s build"
   },
   "dependencies": {
-    "@slimr/util": "2.2.8"
+    "@slimr/util": "3.2.10"
   }
 }

package/src/addCss.ts

@@ -0,0 +1,33 @@
+/**
+ * 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
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+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

package/src/createClass.ts

@@ -1,37 +1,14 @@
 import {T2SProps, t2s} from '@slimr/util'
 
+import {addCss} from './addCss.js'
 import {expandShorthands} from './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
- */
-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
+ * @param classes
+ * class names to be joined
+ *
  * @returns a string of joined class names
  *
  * @example
@@ -45,12 +22,25 @@ export function classJoin(...classes: (string | 0 | null | undefined)[]) {
 }
 
 /**
- * Injects css and creates unique class names
+ * Upserts and returns a unique css class for a given css string
  *
- * - Skips if already added
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
  *
- * @param cssString - string or template string, to be injected
  * @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)