purse-styles 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Tanishq Kancharla
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# Purse
+
+A basic styling solution for web apps with an emphasis on simplicity and purity. The goal is to build a CSS-in-JS version of Tailwind's classname composition model.
+
+```tsx
+// Define styles outside your components
+ const truncate = style({
+	overflow: "hidden",
+	lineClamp: 1,
+	textOverflow: "ellipsis",
+})
+
+// Compose styles together
+const actionButton = style(
+  truncate,
+  text[14],
+  fonts.interface,
+  border[1]
+)
+
+// Use pseudo or other complex selectors
+const button = style({
+  "&:disabled": {
+		backgroundColor: indigo.indigo8,
+	},
+	"&:hover[disabled=false]": {
+		backgroundColor: indigo.indigo10,
+	},
+})
+
+// Use styles in your components dynamically
+const buttonClassName = useStyles(props.quiet ? quietButtonStyles : buttonStyles)
+
+// Can also use CSS properties directly
+const blueTextClassName = useStyles({
+  backgroundColor: "blue",
+})
+```
+
+## Setup
+
+```sh
+npm i purse-styles
+```
+
+Wrap your app in `PurseProvider`:
+
+```tsx
+<PurseProvider>
+  <App/>
+</PurseProvider>
+```
+
+That's all! No build step.
+
+## Exports
+
+```ts
+// Declare styles outside React component
+export declare function style(...styleElementsOrCSS: (CSSProperties | StyleElement)[]): StyleElement;
+
+// Use declared styles or ad-hoc styles inside react component and get back a classname
+export declare function useStyles(...styleElementsOrCSS: (CSSProperties | StyleElement)[]): string;
+
+// Inject global styles into the app, you may want to do this as an escape hatch
+export declare function useInjectGlobalStyles(
+  selector: string,
+  cssProperties: BaseCSSProperties & CSSVarDeclarations,
+  deps: DependencyList
+): void;
+
+// Wrap your app in this so Purse can inject styles into the app
+export declare function PurseProvider(props: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+
+// An in-memory style API for testing
+export type InMemoryStyleApi = {
+    styleRulesRef: {
+        current: string[];
+    };
+    addStyleElement: StyleApi["addStyleElement"];
+    addGlobalStyle: StyleApi["addGlobalStyle"];
+};
+export declare function createInMemoryStyleApi(): InMemoryStyleApi;
+```
+
+## TODO
+- [ ] E2E tests with Playwright
+- [ ] Consider exporting a simple `styled` alternative

package/dist/clsx.d.ts

@@ -0,0 +1 @@
+export declare function clsx(...classNames: (string | undefined | false | null)[]): string;

package/dist/cssVar.d.ts

@@ -0,0 +1,2 @@
+export type CSSVar = `var(--${string})`;
+export declare function createCssVar(name: string): CSSVar;

package/dist/destructors.d.ts

@@ -0,0 +1,2 @@
+export type Destructor = () => void;
+export declare function joinDestructors(destructors: Destructor[]): () => void;

package/dist/hashObject.d.ts

@@ -0,0 +1 @@
+export declare const hashObject: (value: Object) => string;

package/dist/hyphenateStyleName.d.ts

@@ -0,0 +1 @@
+export declare function hyphenateStyleName(name: string): string;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { CSSProperties, InMemoryStyleApi, PurseProvider, StyleApi, StyleElement, createInMemoryStyleApi, style, useInjectGlobalStyles, useStyles, } from "./purse";

package/dist/index.js

@@ -0,0 +1,411 @@
+// src/purse.tsx
+import { entries, isObject, mapValues } from "lodash-es";
+import {
+  createContext,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo
+} from "react";
+
+// src/clsx.ts
+function clsx(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+// src/destructors.ts
+function joinDestructors(destructors) {
+  return () => {
+    destructors.forEach((destructor) => destructor());
+  };
+}
+
+// src/hashObject.ts
+function toAlphabeticChar(code) {
+  return String.fromCharCode(code + (code > 25 ? 39 : 97));
+}
+function toAlphabeticName(code) {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0)
+    name = toAlphabeticChar(x % 52) + name;
+  return toAlphabeticChar(x % 52) + name;
+}
+function toPhash(h, x) {
+  let i = x.length;
+  while (i) {
+    i--;
+    h = h * 33 ^ x.charCodeAt(i);
+  }
+  return h;
+}
+var hashObject = (value) => toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0);
+
+// src/hyphenateStyleName.ts
+var uppercasePattern = /[A-Z]/g;
+var msPattern = /^ms-/;
+var cache = {};
+function toHyphenLower(match) {
+  return "-" + match.toLowerCase();
+}
+function hyphenateStyleName(name) {
+  if (cache.hasOwnProperty(name)) {
+    return cache[name];
+  }
+  var hName = name.replace(uppercasePattern, toHyphenLower);
+  return cache[name] = msPattern.test(hName) ? "-" + hName : hName;
+}
+
+// src/useRequiredContext.tsx
+import { useContext } from "react";
+function useRequiredContext(context) {
+  const value = useContext(context);
+  if (value === void 0) {
+    throw new Error(`Expected value of ${context} to be defined`);
+  }
+  return value;
+}
+
+// src/purse.tsx
+import { jsx } from "react/jsx-runtime";
+var UNITLESS_NUMBER_PROPS = [
+  "animation-iteration-count",
+  "border-image-outset",
+  "border-image-slice",
+  "border-image-width",
+  "box-flex",
+  "box-flex-group",
+  "box-ordinal-group",
+  "column-count",
+  "columns",
+  "flex",
+  "flex-grow",
+  "flex-positive",
+  "flex-shrink",
+  "flex-negative",
+  "flex-order",
+  "grid-row",
+  "grid-row-end",
+  "grid-row-span",
+  "grid-row-start",
+  "grid-column",
+  "grid-column-end",
+  "grid-column-span",
+  "grid-column-start",
+  "font-weight",
+  "line-clamp",
+  "line-height",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "z-index",
+  "zoom",
+  // SVG-related properties
+  "fill-opacity",
+  "flood-opacity",
+  "stop-opacity",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-miterlimit",
+  "stroke-opacity",
+  "stroke-width"
+];
+var PurseContext = createContext(void 0);
+var __style__ = Symbol("style-element");
+function isStyleElement(o) {
+  return "__style__" in o && o["__style__"] === __style__;
+}
+var DEV = true;
+function createInMemoryStyleApi() {
+  let styleRules = [];
+  const insertedStyleElementClassNames = /* @__PURE__ */ new Map();
+  function addStyleRule(rule) {
+    styleRules.push(rule);
+    return () => {
+      const ruleToRemove = rule;
+      styleRules = styleRules.filter((rule2) => rule2 !== ruleToRemove);
+    };
+  }
+  function removeStyleElement(styleElement) {
+    for (const composed of styleElement.composed) {
+      removeStyleElement(composed);
+    }
+    if (styleElement.owned) {
+      const { className } = styleElement.owned;
+      const maybeInsertedStyleElement = insertedStyleElementClassNames.get(className);
+      if (!maybeInsertedStyleElement) return;
+      const { refCount, destructor } = maybeInsertedStyleElement;
+      const newRefCount = refCount - 1;
+      if (newRefCount <= 0) {
+        insertedStyleElementClassNames.delete(className);
+        destructor();
+      } else {
+        insertedStyleElementClassNames.set(className, {
+          refCount: newRefCount,
+          destructor
+        });
+      }
+    }
+  }
+  function addStyleElement(styleElement) {
+    for (const composed of styleElement.composed) {
+      addStyleElement(composed);
+    }
+    if (styleElement.owned) {
+      const { className, styleRules: styleRules2 } = styleElement.owned;
+      const maybeInsertedStyleElement = insertedStyleElementClassNames.get(className);
+      if (maybeInsertedStyleElement) {
+        const { destructor, refCount } = maybeInsertedStyleElement;
+        insertedStyleElementClassNames.set(className, {
+          destructor,
+          refCount: refCount + 1
+        });
+      } else {
+        const destructors = styleRules2.map(addStyleRule);
+        const destructor = joinDestructors(destructors);
+        insertedStyleElementClassNames.set(className, {
+          destructor,
+          refCount: 1
+        });
+      }
+    }
+    return () => removeStyleElement(styleElement);
+  }
+  return {
+    addStyleElement,
+    addGlobalStyle: addStyleRule,
+    styleRulesRef: {
+      get current() {
+        return styleRules;
+      }
+    }
+  };
+}
+function PurseProvider(props) {
+  const htmlStyleElement = useMemo(() => document.createElement("style"), []);
+  const atRuleHtmlStyleElement = useMemo(
+    () => document.createElement("style"),
+    []
+  );
+  useInsertionEffect(() => {
+    document.head.appendChild(htmlStyleElement);
+    document.head.appendChild(atRuleHtmlStyleElement);
+    return () => {
+      document.head.removeChild(htmlStyleElement);
+      document.head.removeChild(atRuleHtmlStyleElement);
+    };
+  }, [htmlStyleElement, atRuleHtmlStyleElement]);
+  const styleApi = useMemo(() => {
+    const insertedStyleElementClassNames = /* @__PURE__ */ new Map();
+    function addStyleRule(rule) {
+      const styleSheet = htmlStyleElement.sheet;
+      if (!styleSheet)
+        throw new Error(`Could not get style sheet of style element`);
+      try {
+        const isAtRule = rule.startsWith("@");
+        const styleText = new Text(rule);
+        if (isAtRule) {
+          atRuleHtmlStyleElement.appendChild(styleText);
+          return () => atRuleHtmlStyleElement.removeChild(styleText);
+        } else {
+          htmlStyleElement.appendChild(styleText);
+          return () => {
+            htmlStyleElement.removeChild(styleText);
+          };
+        }
+      } catch (error) {
+        if (DEV) {
+          throw new Error(`Could not add style rule ${rule}`);
+        } else {
+          console.warn(`Could not add style rule ${rule}`);
+          return () => {
+          };
+        }
+      }
+    }
+    function removeStyleElement(styleElement) {
+      for (const composed of styleElement.composed) {
+        removeStyleElement(composed);
+      }
+      if (styleElement.owned) {
+        const { className } = styleElement.owned;
+        const maybeInsertedStyleElement = insertedStyleElementClassNames.get(className);
+        if (!maybeInsertedStyleElement) return;
+        const { refCount, destructor } = maybeInsertedStyleElement;
+        const newRefCount = refCount - 1;
+        if (newRefCount <= 0) {
+          insertedStyleElementClassNames.delete(className);
+          destructor();
+        } else {
+          insertedStyleElementClassNames.set(className, {
+            refCount: newRefCount,
+            destructor
+          });
+        }
+      }
+    }
+    function addStyleElement(styleElement) {
+      for (const composed of styleElement.composed) {
+        addStyleElement(composed);
+      }
+      if (styleElement.owned) {
+        const { className, styleRules } = styleElement.owned;
+        const maybeInsertedStyleElement = insertedStyleElementClassNames.get(className);
+        if (maybeInsertedStyleElement) {
+          const { destructor, refCount } = maybeInsertedStyleElement;
+          insertedStyleElementClassNames.set(className, {
+            destructor,
+            refCount: refCount + 1
+          });
+        } else {
+          const destructors = styleRules.map(addStyleRule);
+          const destructor = joinDestructors(destructors);
+          insertedStyleElementClassNames.set(className, {
+            destructor,
+            refCount: 1
+          });
+        }
+      }
+      return () => removeStyleElement(styleElement);
+    }
+    return { addStyleElement, addGlobalStyle: addStyleRule };
+  }, []);
+  return /* @__PURE__ */ jsx(PurseContext.Provider, { value: styleApi, children: props.children });
+}
+function compileDeclarations(declarations) {
+  return entries(declarations).map(([camelCaseProperty, value]) => {
+    const kebabProperty = hyphenateStyleName(camelCaseProperty);
+    const needToAddPixelsUnit = typeof value === "number" && !UNITLESS_NUMBER_PROPS.includes(kebabProperty);
+    if (needToAddPixelsUnit) {
+      return `${kebabProperty}:${value}px;`;
+    } else {
+      return `${kebabProperty}:${value};`;
+    }
+  }).join("");
+}
+function isObjectEmpty(obj) {
+  return Object.keys(obj).length === 0;
+}
+function mergeCSSProperties(...groups) {
+  const merged = {};
+  for (const group of groups) {
+    for (const _propertyOrSelector in group) {
+      const propertyOrSelector = _propertyOrSelector;
+      const isNestedRule = isObject(group[propertyOrSelector]);
+      if (isNestedRule) {
+        const selector = propertyOrSelector;
+        const existingStyles = merged[selector] || {};
+        merged[selector] = {
+          ...existingStyles,
+          ...group[selector]
+        };
+      } else {
+        const property = propertyOrSelector;
+        merged[property] = group[property];
+      }
+    }
+  }
+  return merged;
+}
+function groupCSSProperties(properties) {
+  const styleDeclarationsBySelector = { "": {} };
+  for (const _propertyOrSelector in properties) {
+    const propertyOrSelector = _propertyOrSelector;
+    const value = properties[propertyOrSelector];
+    if (value === void 0 || value === null) continue;
+    const isNestedRule = isObject(value);
+    if (isNestedRule) {
+      const selector = propertyOrSelector;
+      const existingStyles = styleDeclarationsBySelector[selector] || {};
+      styleDeclarationsBySelector[selector] = {
+        ...existingStyles,
+        ...properties[selector]
+      };
+    } else {
+      const property = propertyOrSelector;
+      const value2 = properties[property];
+      styleDeclarationsBySelector[""][property] = value2;
+    }
+  }
+  for (const selector in styleDeclarationsBySelector) {
+    const declarations = styleDeclarationsBySelector[selector];
+    if (declarations && isObjectEmpty(declarations)) {
+      delete styleDeclarationsBySelector[selector];
+    }
+  }
+  return styleDeclarationsBySelector;
+}
+function compileCSS(properties) {
+  if (isObjectEmpty(properties)) {
+    return void 0;
+  }
+  const groupedCSSProperties = groupCSSProperties(properties);
+  const compiledStyleDeclarationsByGroup = mapValues(
+    groupedCSSProperties,
+    compileDeclarations
+  );
+  const className = hashObject(compiledStyleDeclarationsByGroup);
+  const styleRules = entries(compiledStyleDeclarationsByGroup).map(
+    ([group, styles]) => {
+      if (group === "") {
+        return `.${className}{${styles}}`;
+      } else if (group.startsWith("@")) {
+        return `${group}{.${className}{${styles}}}`;
+      } else {
+        const selector = group.replace(/&/g, `.${className}`);
+        return `${selector}{${styles}}`;
+      }
+    }
+  );
+  return { styleRules, className };
+}
+function style(...styleElementsOrCSS) {
+  let composed = [];
+  let cssPropertyGroups = [];
+  for (const styleElementOrCSS of styleElementsOrCSS) {
+    if (isStyleElement(styleElementOrCSS)) {
+      composed.push(styleElementOrCSS);
+    } else {
+      cssPropertyGroups.push(styleElementOrCSS);
+    }
+  }
+  const cssProperties = mergeCSSProperties(...cssPropertyGroups);
+  const owned = compileCSS(cssProperties);
+  const composedClassNames = composed.map((composed2) => composed2.className);
+  const className = clsx(...composedClassNames, owned?.className);
+  return {
+    __style__,
+    composed,
+    className,
+    owned
+  };
+}
+function useInjectGlobalStyles(selector, cssProperties, deps) {
+  const styleApi = useRequiredContext(PurseContext);
+  useLayoutEffect(() => {
+    const styleRule = `${selector}{${compileDeclarations(cssProperties)}}`;
+    const destructor = styleApi.addGlobalStyle(styleRule);
+    return destructor;
+  }, deps);
+}
+function useStyles(...styleElementsOrCSS) {
+  const styleApi = useRequiredContext(PurseContext);
+  const styleElement = style(...styleElementsOrCSS);
+  useLayoutEffect(() => {
+    if (styleElement.className === "bpsHRa jwfJGj") {
+      console.log(styleElement);
+    }
+    const destructor = styleApi.addStyleElement(styleElement);
+    return destructor;
+  }, [styleElement.className]);
+  return styleElement.className;
+}
+export {
+  PurseProvider,
+  createInMemoryStyleApi,
+  style,
+  useInjectGlobalStyles,
+  useStyles
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../src/purse.tsx", "../src/clsx.ts", "../src/destructors.ts", "../src/hashObject.ts", "../src/hyphenateStyleName.ts", "../src/useRequiredContext.tsx"],
+  "mappings": "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",
+  "names": ["rule", "styleRules", "value", "composed"]
+}

package/dist/purse.d.ts

@@ -0,0 +1,42 @@
+import CSS from "csstype";
+import React, { DependencyList } from "react";
+import { CSSVar } from "./cssVar";
+import { Destructor } from "./destructors";
+type BaseCSSProperties = CSS.Properties<number | string, string & {}>;
+type CSSVarDeclarations = Record<CSSVar, string>;
+type NestedRuleKey = `&${CSS.SimplePseudos}` | `${CSS.AtRules}${string}` | `.${string}` | `&${string}`;
+export type CSSProperties = {
+    [Key in keyof BaseCSSProperties]?: BaseCSSProperties[Key];
+} & {
+    [Key in NestedRuleKey]?: BaseCSSProperties;
+};
+export type StyleApi = {
+    addStyleElement: (styleElement: StyleElement) => Destructor;
+    addGlobalStyle: (styleRule: string) => Destructor;
+};
+declare const __style__: unique symbol;
+type StyleRule = string;
+export type StyleElement = {
+    __style__: typeof __style__;
+    composed: StyleElement[];
+    owned?: {
+        styleRules: StyleRule[];
+        className: string;
+    };
+    className: string;
+};
+export type InMemoryStyleApi = {
+    styleRulesRef: {
+        current: string[];
+    };
+    addStyleElement: StyleApi["addStyleElement"];
+    addGlobalStyle: StyleApi["addGlobalStyle"];
+};
+export declare function createInMemoryStyleApi(): InMemoryStyleApi;
+export declare function PurseProvider(props: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function style(...styleElementsOrCSS: (CSSProperties | StyleElement)[]): StyleElement;
+export declare function useInjectGlobalStyles(selector: string, cssProperties: BaseCSSProperties & CSSVarDeclarations, deps: DependencyList): void;
+export declare function useStyles(...styleElementsOrCSS: (CSSProperties | StyleElement)[]): string;
+export {};

package/dist/useRequiredContext.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function useRequiredContext<T>(context: React.Context<T | undefined>): T;

package/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "purse-styles",
+	"type": "module",
+	"main": "./dist/index.js",
+	"version": "0.0.1",
+	"author": "Tanishq Kancharla <tanishqkancharla3@gmail.com>",
+	"description": "A basic styling solution for web apps with an emphasis on simplicity and purity.",
+	"keywords": [],
+	"license": "MIT",
+	"source": "./src/index.ts",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"src"
+	],
+	"repository": {
+		"url": "https://github.com/tanishqkancharla/npm-ts-boilerplate"
+	},
+	"scripts": {
+		"build": "tsx scripts/build.ts",
+		"check": "tsc --noEmit",
+		"test": "vitest",
+		"release": "npm run build; npm publish",
+		"bundlesize": "esbuild ./dist/index.js --minify --outfile=bundled; rm bundled"
+	},
+	"devDependencies": {
+		"@types/lodash-es": "^4.17.12",
+		"@types/node": "^20.14.2",
+		"@types/react": "^18.3.3",
+		"ansi-colors": "^4.1.3",
+		"esbuild": "^0.21.5",
+		"tsx": "^4.15.5",
+		"typescript": "^5.4.5",
+		"vitest": "^1.6.0"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1"
+	},
+	"dependencies": {
+		"csstype": "^3.1.3",
+		"extendable-expect": "^1.0.2",
+		"lodash-es": "^4.17.21"
+	}
+}

package/src/clsx.ts

@@ -0,0 +1,3 @@
+export function clsx(...classNames: (string | undefined | false | null)[]) {
+	return classNames.filter(Boolean).join(" ")
+}

package/src/cssVar.ts

@@ -0,0 +1,5 @@
+export type CSSVar = `var(--${string})`
+
+export function createCssVar(name: string): CSSVar {
+	return `var(--${name})`
+}

package/src/destructors.ts

@@ -0,0 +1,7 @@
+export type Destructor = () => void
+
+export function joinDestructors(destructors: Destructor[]) {
+	return () => {
+		destructors.forEach((destructor) => destructor())
+	}
+}