@manyducks.co/dolla-styled 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -50,41 +50,42 @@ function h(e) {
 }
 var g = 0;
 function _(i, a = {}) {
-	let o = {}, s = (a, ...s) => {
-		let c = h(a.join("||")), l = "", u = [];
+	let { __name: o, ...s } = a, c = (a, ...c) => {
+		let l = h(a.join("||")), u = "", d = [];
 		return a.forEach((e, t) => {
-			if (l += e, t < s.length) {
-				let e = s[t], n = "*", r = null;
+			if (u += e, t < c.length) {
+				let e = c[t], n = "*", r = null;
 				if (Array.isArray(e) && ([e, n, r = null] = e), typeof e == "function") {
-					let i = `--${c}-${t}`;
-					r === null ? l += `var(${i})` : (l += `var(${i}, ${r})`, n !== "*" && m.register(i, n, r)), u.push({
+					let i = `--${l}-${t}`;
+					r === null ? u += `var(${i})` : (u += `var(${i}, ${r})`, n !== "*" && m.register(i, n, r)), d.push({
 						varName: i,
 						fn: e,
 						initialValue: r
 					});
-				} else l += e;
+				} else u += e;
 			}
-		}), f.insert(c, l), (a, s) => {
-			let l = [c];
-			if (u.length > 0) {
+		}), f.insert(l, u), (a, c) => {
+			o && (c.name = o);
+			let u = [l];
+			if (d.length > 0) {
 				let e = `styled-inst-${(g++).toString(36)}`;
-				l.push(e);
+				u.push(e);
 				let t = p.createInstanceRule(e);
-				n(s, () => {
-					u.forEach(({ varName: e, fn: n, initialValue: r }) => {
+				n(c, () => {
+					d.forEach(({ varName: e, fn: n, initialValue: r }) => {
 						let i = n(a);
 						i == null || i === r ? t.removeProperty(e) : t.setProperty(e, i);
 					});
 				});
 			}
 			return t(typeof i == "string" && a.as || i, {
-				...o,
+				...s,
 				...a,
-				class: e(() => [a.class && r(a.class), ...l])
+				class: e(() => [a.class && r(a.class), ...u])
 			});
 		};
 	};
-	return s.with = () => s, s.defaults = (e) => _(i, Object.assign({}, a, e)), s;
+	return c.with = () => c, c.named = (e) => _(i, Object.assign({}, a, { __name: e })), c.defaults = (e) => _(i, Object.assign({}, a, e)), c;
 }
 var v = new Proxy(_, { get(e, t) {
 	return _(t);

package/dist/styled.d.ts

@@ -1,4 +1,9 @@
 import { type View } from "@manyducks.co/dolla";
+export type CoreCSSSyntax = "*" | "<length>" | "<percentage>" | "<length-percentage>" | "<color>" | "<image>" | "<url>" | "<integer>" | "<number>" | "<angle>" | "<time>" | "<resolution>" | "<transform-function>" | "<transform-list>" | "<custom-ident>";
+export type CSSSyntaxDescriptor = CoreCSSSyntax | (string & {});
+export type InterpolationValue = string | number | null | undefined;
+export type InterpolationFn<Props> = (props: Props) => InterpolationValue;
+export type Interpolation<Props> = InterpolationValue | InterpolationFn<Props> | [InterpolationFn<Props>, CSSSyntaxDescriptor, InterpolationValue];
 type StyledProps = {
     as?: keyof JSX.IntrinsicElements | string;
 };
@@ -8,18 +13,30 @@ type Flatten<T> = {
     [K in keyof T]: T[K];
 } & {};
 interface TypedTemplateFn<Props> {
-    (strings: TemplateStringsArray, ...interpolations: any[]): StyledView<Props>;
+    (strings: TemplateStringsArray, ...interpolations: Interpolation<Props>[]): StyledView<Props>;
+    /**
+     * Provides a name for the underlying view.
+     */
+    named(name: string): TypedTemplateFn<Props>;
     /**
      * Provides default props that are passed to all instances unless overridden.
      */
-    defaults<D extends Partial<Props>>(defaultProps: D): (strings: TemplateStringsArray, ...interpolations: any[]) => StyledView<Flatten<ApplyDefaults<Props, D>>>;
+    defaults<D extends Partial<Props>>(defaultProps: D): (strings: TemplateStringsArray, ...interpolations: Interpolation<Props>[]) => StyledView<Flatten<ApplyDefaults<Props, D>>>;
 }
 interface TemplateFn<BaseProps = {}> {
-    (strings: TemplateStringsArray, ...interpolations: any[]): StyledView<BaseProps>;
+    (strings: TemplateStringsArray, ...interpolations: Interpolation<BaseProps>[]): StyledView<BaseProps>;
+    /**
+     * Provides a name for the underlying view.
+     */
+    named(name: string): TemplateFn<BaseProps>;
     /**
      * Defines additional props the resulting view takes.
      */
     with<T>(): TypedTemplateFn<BaseProps & T>;
+    /**
+     * Provides default props that are passed to all instances unless overridden.
+     */
+    defaults<D extends Partial<BaseProps>>(defaultProps: D): (strings: TemplateStringsArray, ...interpolations: any[]) => StyledView<Flatten<ApplyDefaults<BaseProps, D>>>;
 }
 declare function createBuilder<Tag extends keyof JSX.IntrinsicElements>(tag: Tag, boundDefaults?: Partial<JSX.IntrinsicElements[Tag]>): TemplateFn<JSX.IntrinsicElements[Tag]>;
 declare function createBuilder<Props>(view: View<Props>, boundDefaults?: Partial<Props>): TemplateFn<Props>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manyducks.co/dolla-styled",
   "description": "Styled Components for Dolla",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {