@slimr/css 2.1.74 → 2.1.76

package/esm/createClass.ts

@@ -1,7 +1,7 @@
-import {T2SProps, t2s} from '@slimr/util'
+import { type T2SProps, t2s } from "@slimr/util"
 
-import {addCss} from './addCss.js'
-import {expandShorthands} from './shorthandProps.js'
+import { addCss } from "./addCss.js"
+import { expandShorthands } from "./shorthandProps.js"
 
 /**
  * Joins class names and omits falsey props
@@ -18,7 +18,7 @@ import {expandShorthands} from './shorthandProps.js'
  * ```
  */
 export function classJoin(...classes: (string | 0 | null | undefined)[]) {
-  return classes.filter(c => c && typeof c === 'string').join(' ')
+	return classes.filter((c) => c && typeof c === "string").join(" ")
 }
 
 /**
@@ -43,50 +43,50 @@ export function classJoin(...classes: (string | 0 | null | undefined)[]) {
  * ...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)
+	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)
+		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)
-    }
-    qs.reverse()
+		for (const q of qs.reverse()) {
+			css = css.slice(0, q.start) + css.slice(q.end)
+		}
+		qs.reverse()
 
-    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 = `.${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'
+		css = `${trimByLine(css)}\n\n`
 
-    addCss(css)
-  }
-  return className
+		addCss(css)
+	}
+	return className
 }
 /** Breakpoints like chakra */
-createClass.breakPoints = ['30em', '48em', '62em', '80em', '96em']
+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, '')
+	return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, "")
 }
 
 /**
@@ -95,82 +95,82 @@ function deleteComments(css: string) {
  * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
  */
 function expandArrayValues(css: string) {
-  if (!css.includes('[')) return css
-  return css
-    .split('\n')
-    .map(l => {
-      // eslint-disable-next-line no-useless-escape
-      const [, prop, valArrayStr] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
-      if (valArrayStr) {
-        return (
-          valArrayStr
-            // Replace commas inside css functions with a magic char (§) to prevent
-            // erroneous splitting
-            .replace(/\([^),]*,/g, m => m.replace(/,/g, '§'))
-            .replace(/\([^),]*,/g, m => m.replace(/,/g, '§'))
-            .replace(/\([^),]*,/g, m => m.replace(/,/g, '§'))
-            .split(',')
-            .map((val, i) => {
-              val = val.trim()
-              if (!val || val === 'null' || val === 'undefined') return ''
-              val = val.replace(/§/g, ',')
-              if (i === 0) {
-                return `${prop}: ${val};`
-              }
-              return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`
-            })
-            .join('\n')
-        )
-      }
-      return l
-    })
-    .join('\n')
+	if (!css.includes("[")) return css
+	return css
+		.split("\n")
+		.map((l) => {
+			// eslint-disable-next-line no-useless-escape
+			const [, prop, valArrayStr] = [...l.matchAll(/([A-Za-z-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
+			if (valArrayStr) {
+				return (
+					valArrayStr
+						// Replace commas inside css functions with a magic char (§) to prevent
+						// erroneous splitting
+						.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
+						.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
+						.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
+						.split(",")
+						.map((val, i) => {
+							val = val.trim()
+							if (!val || val === "null" || val === "undefined") return ""
+							val = val.replace(/§/g, ",")
+							if (i === 0) {
+								return `${prop}: ${val};`
+							}
+							return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`
+						})
+						.join("\n")
+				)
+			}
+			return l
+		})
+		.join("\n")
 }
 
 /** Find @keyframes, @media, @container queries in css **/
 function findQueries(css: string) {
-  const queries: {
-    start: number
-    end: number
-    query: string
-    outerBody: string
-    innerBody: string
-  }[] = []
-  for (const m of css.matchAll(/[@&]/gm)) {
-    let query = ''
-    let bodyStart = 0
-    let openCount = 0
-    for (let i = m.index!; i < css.length; i++) {
-      if (css[i] === '{') {
-        if (openCount === 0) {
-          query = css.slice(m.index, i).trim()
-          bodyStart = i + 1
-        }
-        openCount++
-      } else if (css[i] === '}') {
-        openCount--
-        if (openCount === 0) {
-          queries.push({
-            start: m.index!,
-            end: i + 1,
-            query,
-            outerBody: css.slice(m.index, i + 1),
-            innerBody: css.slice(bodyStart, i),
-          })
-          break
-        }
-      }
-    }
-    if (openCount !== 0) console.error(`${query} not closed: "${css}"`)
-  }
-  return queries
+	const queries: {
+		start: number
+		end: number
+		query: string
+		outerBody: string
+		innerBody: string
+	}[] = []
+	for (const m of css.matchAll(/[@&]/gm)) {
+		let query = ""
+		let bodyStart = 0
+		let openCount = 0
+		for (let i = m.index!; i < css.length; i++) {
+			if (css[i] === "{") {
+				if (openCount === 0) {
+					query = css.slice(m.index, i).trim()
+					bodyStart = i + 1
+				}
+				openCount++
+			} else if (css[i] === "}") {
+				openCount--
+				if (openCount === 0) {
+					queries.push({
+						start: m.index!,
+						end: i + 1,
+						query,
+						outerBody: css.slice(m.index, i + 1),
+						innerBody: css.slice(bodyStart, i),
+					})
+					break
+				}
+			}
+		}
+		if (openCount !== 0) console.error(`${query} not closed: "${css}"`)
+	}
+	return queries
 }
 
 /** Trims whitespace for every line */
 function trimByLine(css: string) {
-  return css
-    .split('\n')
-    .map(l => l.trim())
-    .filter(l => l)
-    .join('\n')
+	return css
+		.split("\n")
+		.map((l) => l.trim())
+		.filter((l) => l)
+		.join("\n")
 }

package/esm/index.d.ts

@@ -1,4 +1,4 @@
-export * from './addCss.js';
-export * from './createClass.js';
-export * from './shorthandProps.js';
-export { createClass as css } from './createClass.js';
+export * from "./addCss.js";
+export * from "./createClass.js";
+export { createClass as css } from "./createClass.js";
+export * from "./shorthandProps.js";

package/esm/index.js

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

package/esm/index.js.map

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

package/esm/index.ts

@@ -1,4 +1,4 @@
-export * from './addCss.js'
-export * from './createClass.js'
-export * from './shorthandProps.js'
-export {createClass as css} from './createClass.js'
+export * from "./addCss.js"
+export * from "./createClass.js"
+export { createClass as css } from "./createClass.js"
+export * from "./shorthandProps.js"

package/esm/shorthandProps.d.ts

@@ -72,4 +72,4 @@ export declare function expandShorthands(css: string): string;
 /**
  * Map shorthand props to their full css prop
  */
-export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
+export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, "mx" | "my" | "px" | "py">, string>;

package/esm/shorthandProps.js

@@ -2,13 +2,13 @@
  * Expand short-hand css props to full
  */
 export function expandShorthands(css) {
-    css = '\n' + css; // inject a newline to make the regex easier
+    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');
+        .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}:`);
+        css = css.replace(new RegExp(`([ \n\t;])${k}:`, "g"), `$1${v}:`);
     });
     return css.trim();
 }
@@ -16,32 +16,32 @@ export function expandShorthands(css) {
  * 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',
+    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

@@ -1 +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"}
+{"version":3,"file":"shorthandProps.js","sourceRoot":"","sources":["../src/shorthandProps.ts"],"names":[],"mappings":"AAoEA;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC3C,GAAG,GAAG,KAAK,GAAG,EAAE,CAAA,CAAC,4CAA4C;IAC7D,gCAAgC;IAChC,GAAG,GAAG,GAAG;SACP,OAAO,CAAC,kBAAkB,EAAE,iBAAiB,CAAC;SAC9C,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAA;IACjD,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE;QACpD,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACH,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;CACZ,CAAA"}

package/esm/shorthandProps.ts

@@ -2,117 +2,117 @@
  * 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
+	/** 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()
+	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
+	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',
+	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.74",
+  "version": "2.1.76",
   "author": "Brian Dombrowski",
   "license": "ISC",
   "private": false,
@@ -34,6 +34,6 @@
     "start": "nodemon -w src -e '*' -x 'npm run build && cd ../demo && npm start'"
   },
   "dependencies": {
-    "@slimr/util": "^3.2.67"
+    "@slimr/util": "^3.2.69"
   }
 }