@slimr/css 2.1.11 → 2.1.12

package/esm/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>()

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>;

package/esm/shorthandProps.js

@@ -0,0 +1,47 @@
+/**
+ * Expand short-hand css props to full
+ */
+export function expandShorthands(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();
+}
+/**
+ * Map shorthand props to their full css prop
+ */
+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',
+};
+//# sourceMappingURL=shorthandProps.js.map

package/esm/shorthandProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthandProps.js","sourceRoot":"","sources":["../src/shorthandProps.ts"],"names":[],"mappings":"AAoEA;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA,CAAC,4CAA4C;IAC7D,gCAAgC;IAChC,GAAG,GAAG,GAAG;SACN,OAAO,CAAC,kBAAkB,EAAE,iBAAiB,CAAC;SAC9C,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAA;IAClD,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE;QACnD,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IAClE,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;AACnB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,EAAE,EAAE,aAAa;IACjB,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,YAAY;IAChB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,MAAM;IACT,EAAE,EAAE,gBAAgB;IACpB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,iBAAiB;IACrB,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,eAAe;IACnB,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,WAAW;IACjB,CAAC,EAAE,SAAS;IACZ,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,gBAAgB;IACpB,GAAG,EAAE,UAAU;IACf,EAAE,EAAE,YAAY;IAChB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,SAAS;CACb,CAAA"}

package/esm/shorthandProps.ts

@@ -0,0 +1,118 @@
+/**
+ * All the shorthand props that can be used in the css prop
+ */
+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
+}
+
+/**
+ * Expand short-hand css props to full
+ */
+export function expandShorthands(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()
+}
+
+/**
+ * Map shorthand props to their full css prop
+ */
+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',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimr/css",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "author": "Brian Dombrowski",
   "license": "ISC",
   "private": false,
@@ -32,5 +32,8 @@
     "build:cjs": "OUT=cjs; tsc -d -m commonjs --outDir $OUT --noEmit false && cp -r src/* $OUT",
     "clean": "rm -rf esm cjs",
     "prepack": "run-s build"
+  },
+  "dependencies": {
+    "@slimr/util": "2.2.8"
   }
 }