@slimr/css 2.0.2 → 2.0.5

package/README.md

@@ -73,9 +73,9 @@ export function App() {
 }
 ```
 
-### Comparisons
+## Comparisons
 
-#### [Emotion](https://emotion.sh/docs/introduction)
+### [Emotion](https://emotion.sh/docs/introduction)
 
 - A popular css-in-js lib that inspired this lib
 
@@ -89,7 +89,7 @@ Cons
 - Many features require addons, which make bundle even larger
 - Does not support zx prop or css shorthand props
 
-#### [Astroturf](https://astroturfcss.github.io/astroturf/)
+### [Astroturf](https://astroturfcss.github.io/astroturf/)
 
 - A popular css-in-js lib similar to Emotion but compiles out the css into css stylesheets
 
@@ -104,6 +104,6 @@ Cons
 - Does not support zx prop or css shorthand props
 - Is not progressive -- all styles for all components is loaded and blocks initial page paint
 
-#### [Linaria](https://linaria.dev/)
+### [Linaria](https://linaria.dev/)
 
 - Pretty much identical to Astroturf, but maybe better Vite support

package/{src → cjs}/core.d.ts

@@ -1,9 +1,9 @@
 /** Breakpoints like chakra */
-declare const breakPoints: string[];
+export declare const breakPoints: string[];
 type allowableAny = any;
 /** Joins class names and filters out blanks */
-declare function classJoin(...classes: allowableAny[]): string;
-interface ShorthandProps {
+export declare function classJoin(...classes: allowableAny[]): string;
+export interface ShorthandProps {
     /** shorthand for css:align-items */
     ai?: string;
     /** shorthand for css:border */
@@ -67,8 +67,8 @@ interface ShorthandProps {
     /** shorthand for css:z-index */
     z?: number | string;
 }
-declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
-declare const shorthandProps: 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.
  *
@@ -81,8 +81,8 @@ declare const shorthandProps: string[];
  * myFoo`hello ${name}` => 'hello world'
  * myFoo(`hello ${name}`) => 'hello world'
  */
-declare function t2s(...tsp: TemplateStringProps): string;
-type TemplateStringProps = [
+export declare function t2s(...tsp: TemplateStringProps): string;
+export type TemplateStringProps = [
     strings: TemplateStringsArray | string,
     ...placeHolders: string[]
 ];
@@ -94,8 +94,8 @@ type TemplateStringProps = [
  * @param css - css to be injected
  * @returns void
  */
-declare function addCss(css: string): void;
-declare namespace addCss {
+export declare function addCss(css: string): void;
+export declare namespace addCss {
     var que: Set<string>;
     var count: number;
 }
@@ -107,10 +107,9 @@ declare namespace addCss {
  * @param css - string or template string, to be injected
  * @returns a unique class name
  */
-declare function createClass(...p: TemplateStringProps): string;
-declare namespace createClass {
+export declare function createClass(...p: TemplateStringProps): string;
+export declare namespace createClass {
     var count: number;
     var history: Map<string, string>;
 }
-
-export { ShorthandProps, TemplateStringProps, addCss, breakPoints, classJoin, createClass, shorthandProps, shorthandPropsMap, t2s };
+export {};

package/cjs/core.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createClass = exports.addCss = exports.t2s = exports.shorthandProps = exports.shorthandPropsMap = exports.classJoin = exports.breakPoints = void 0;
+/** Breakpoints like chakra */
+exports.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
+/** Joins class names and filters out blanks */
+function classJoin(...classes) {
+    return classes.filter(c => c && typeof c === 'string').join(' ');
+}
+exports.classJoin = classJoin;
+/** delete css comments **/
+function deleteComments(css) {
+    return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
+}
+/**
+ * Expands array values into media queries
+ *
+ * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
+ */
+function expandArrayValues(css) {
+    if (!css.includes('['))
+        return css;
+    return css
+        .split('\n')
+        .map(l => {
+        // eslint-disable-next-line no-useless-escape
+        const [, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? [];
+        if (vals) {
+            return vals
+                .split(',')
+                .map((val, i) => {
+                val = val.trim();
+                if (!val || val === 'null' || val === 'undefined')
+                    return '';
+                if (i === 0) {
+                    return `${prop}: ${val};`;
+                }
+                return `@media (min-width: ${exports.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
+            })
+                .join('\n');
+        }
+        return l;
+    })
+        .join('\n');
+}
+exports.shorthandPropsMap = {
+    ai: 'align-items',
+    b: 'border',
+    br: 'border-radius',
+    bg: 'background',
+    c: 'color',
+    d: 'display',
+    f: 'flex',
+    fd: 'flex-direction',
+    i: 'inset',
+    h: 'height',
+    jc: 'justify-content',
+    m: 'margin',
+    ml: 'margin-left',
+    mr: 'margin-right',
+    mt: 'margin-top',
+    mb: 'margin-bottom',
+    maxW: 'max-width',
+    minW: 'min-width',
+    p: 'padding',
+    pl: 'padding-left',
+    pr: 'padding-right',
+    pt: 'padding-top',
+    pb: 'padding-bottom',
+    pos: 'position',
+    ta: 'text-align',
+    w: 'width',
+    z: 'z-index',
+};
+exports.shorthandProps = [...Object.keys(exports.shorthandPropsMap), 'mx', 'my', 'px', 'py'];
+/** Expand short-hand css props to full */
+function expandProps(css) {
+    css = '\n' + css; // inject a newline to make the regex easier
+    // Handle 'mx', 'my', 'px', 'py'
+    css = css
+        .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
+        .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2');
+    Object.entries(exports.shorthandPropsMap).forEach(([k, v]) => {
+        css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`);
+    });
+    return css.trim();
+}
+/** Find @keyframes, @media, @container queries in css **/
+function findQueries(css) {
+    const queries = [];
+    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 trim(css) {
+    return css
+        .split('\n')
+        .map(l => l.trim())
+        .filter(l => l)
+        .join('\n');
+}
+/**
+ * Assemble a string from a template string array and a list of placeholders.
+ *
+ * - If the first argument is a string, it is returned as is.
+ *
+ * i.e.
+ * myFoo(...props: TemplateStringProps) => {
+ *  const inputStr = t2s(...props);
+ * }
+ * myFoo`hello ${name}` => 'hello world'
+ * myFoo(`hello ${name}`) => 'hello world'
+ */
+function t2s(...tsp) {
+    const [s, ...p] = tsp;
+    return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('');
+}
+exports.t2s = t2s;
+/**
+ * Injects css to the page
+ *
+ * - Batches adds for performance
+ *
+ * @param css - css to be injected
+ * @returns void
+ */
+function addCss(css) {
+    addCss.que.add(css);
+    setTimeout(() => {
+        const css = [...addCss.que].join('\n');
+        if (css) {
+            addCss.que.clear();
+            const s = document.createElement('style');
+            s.id = `u${addCss.count++}`;
+            s.innerHTML = css;
+            document.head.appendChild(s);
+        }
+    }, 0);
+}
+exports.addCss = addCss;
+addCss.que = new Set();
+addCss.count = 0;
+/**
+ * Injects css and creates unique class names
+ *
+ * - Skips if already added
+ *
+ * @param css - string or template string, to be injected
+ * @returns a unique class name
+ */
+function createClass(...p) {
+    let css = t2s(...p);
+    if (!css)
+        return '';
+    let className = createClass.history.get(css);
+    if (!className) {
+        className = 's' + createClass.count++;
+        createClass.history.set(css, className);
+        css = deleteComments(css);
+        css = expandProps(css);
+        css = expandArrayValues(css);
+        const qs = findQueries(css);
+        for (const q of qs.reverse()) {
+            css = css.slice(0, q.start) + css.slice(q.end);
+        }
+        css = `.${className}{\n${css}\n}\n`;
+        css += qs
+            .map(q => {
+            if (q.query.startsWith('&')) {
+                return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
+            }
+            if (q.query.startsWith('@keyframes')) {
+                return q.outerBody;
+            }
+            return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
+        })
+            .join('\n');
+        css = trim(css) + '\n\n';
+        addCss(css);
+    }
+    return className;
+}
+exports.createClass = createClass;
+createClass.count = 0;
+createClass.history = new Map();
+//# sourceMappingURL=core.js.map

package/cjs/core.js.map

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

package/cjs/core.ts

@@ -0,0 +1,290 @@
+/** Breakpoints like chakra */
+export const breakPoints = ['30em', '48em', '62em', '80em', '96em']
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type allowableAny = any
+
+/** Joins class names and filters out blanks */
+export function classJoin(...classes: allowableAny[]) {
+  return classes.filter(c => c && typeof c === 'string').join(' ')
+}
+
+/** delete css comments **/
+function deleteComments(css: string) {
+  return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '')
+}
+
+/**
+ * Expands array values into media queries
+ *
+ * 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, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
+      if (vals) {
+        return vals
+          .split(',')
+          .map((val, i) => {
+            val = val.trim()
+            if (!val || val === 'null' || val === 'undefined') return ''
+            if (i === 0) {
+              return `${prop}: ${val};`
+            }
+            return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`
+          })
+          .join('\n')
+      }
+      return l
+    })
+    .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 = []
+  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 trim(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/index.d.ts

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

package/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.css = void 0;
+__exportStar(require("./core.js"), exports);
+var core_js_1 = require("./core.js");
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return core_js_1.createClass; } });
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,4CAAyB;AACzB,qCAA4C;AAApC,8FAAA,WAAW,OAAO"}

package/cjs/index.ts

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