ruscus 0.0.1 → 0.0.3

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="./assets/logo.svg" width="400" alt="Ruscus">
+  <img src="./assets/logo.svg" width="500" alt="Ruscus">
 </p>
 
 <br>
@@ -10,6 +10,11 @@
 
 ---
 
+[![Verify](https://github.com/justinlocsei/ruscus/actions/workflows/verify.yml/badge.svg)](https://github.com/justinlocsei/ruscus/actions/workflows/verify.yml)
+[![npm version](https://img.shields.io/npm/v/ruscus.svg)](https://www.npmjs.com/package/ruscus)
+[![License](https://img.shields.io/npm/l/ruscus.svg)](https://github.com/justinlocsei/ruscus/blob/main/LICENSE)
+
+
 <!-- <toc> -->
 - [Installation](#installation)
 - [Getting Started](#getting-started)

package/dist/index.mjs

@@ -67,49 +67,13 @@ function createVariantProjector(anchor, format, name) {
 	};
 }
 //#endregion
-//#region src/styles.ts
-/**
-* Convert a camel-cased value to kebab case
-*/
-function camelToKebab(camel) {
-	return camel.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
-}
-/**
-* Merge multiple styles on top of a base
-*/
-function mergeStyles(base, ...others) {
-	const merged = { ...base };
-	for (const other of others) Object.assign(merged, other);
-	return merged;
-}
-var PropertyProjector = class {
-	names;
-	/**
-	* Create a mapper of camel-cased values to CSS properties
-	*/
-	constructor() {
-		this.names = /* @__PURE__ */ new Map();
-	}
-	/**
-	* Project a camel-cased value as a CSS property
-	*/
-	project(camel) {
-		let prop = this.names.get(camel);
-		if (prop === void 0) {
-			prop = camelToKebab(camel);
-			this.names.set(camel, prop);
-		}
-		return prop;
-	}
-};
-//#endregion
 //#region src/projection/identifiers.ts
 /**
 * Project a component's identifiers as a map of labels to values
 */
 function projectIdentifiers(component) {
 	return Object.fromEntries(Object.entries(component.identifiers).map(([key, type]) => {
-		const scoped = `${component.id}--${camelToKebab(key)}`;
+		const scoped = `${component.id}--${key}`;
 		return [key, type === "variable" ? `--${scoped}` : scoped];
 	}));
 }
@@ -260,6 +224,42 @@ function useNaming(component, scheme = "verbose") {
 	return scheme === "compact" ? new CompactNaming(component) : new VerboseNaming(component);
 }
 //#endregion
+//#region src/styles.ts
+/**
+* Convert a camel-cased value to kebab case
+*/
+function camelToKebab(camel) {
+	return camel.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
+}
+/**
+* Merge multiple styles on top of a base
+*/
+function mergeStyles(base, ...others) {
+	const merged = { ...base };
+	for (const other of others) Object.assign(merged, other);
+	return merged;
+}
+var PropertyProjector = class {
+	names;
+	/**
+	* Create a mapper of camel-cased values to CSS properties
+	*/
+	constructor() {
+		this.names = /* @__PURE__ */ new Map();
+	}
+	/**
+	* Project a camel-cased value as a CSS property
+	*/
+	project(camel) {
+		let prop = this.names.get(camel);
+		if (prop === void 0) {
+			prop = camelToKebab(camel);
+			this.names.set(camel, prop);
+		}
+		return prop;
+	}
+};
+//#endregion
 //#region src/compilation.ts
 /**
 * Generate CSS for a component's styles
@@ -344,7 +344,7 @@ var ComponentCompiler = class {
 		const declarations = this.formatDeclarations(styles);
 		if (declarations) inner.push(declarations);
 		for (const [key, child] of nestedEntries) {
-			const rule = this.formatFragmentRules(key.startsWith("&") ? `${parentSelector}${key.slice(1)}` : key, child);
+			const rule = this.formatFragmentRules(key.includes("&") ? this.expandSelectorAnchor(parentSelector, key) : key, child);
 			if (rule) inner.push(rule);
 		}
 		if (!inner.length) return null;
@@ -367,10 +367,16 @@ var ComponentCompiler = class {
 		return `${selector} {\n${inner.map((rule) => rule.split("\n").map((line) => `${indent}${line}`).join("\n")).join("\n\n")}\n}`;
 	}
 	/**
+	* Replace every & in a nested key with the anchor selector
+	*/
+	expandSelectorAnchor(anchor, key) {
+		return key.replaceAll("&", anchor);
+	}
+	/**
 	* Build a selector for a nested rule key
 	*/
 	buildNestedSelector(anchor, key) {
-		if (key.startsWith("&")) return `${anchor}${key.slice(1)}`;
+		if (key.includes("&")) return this.expandSelectorAnchor(anchor, key);
 		else if (key === anchor) return anchor;
 		else return `${anchor} ${key}`;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruscus",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A TypeScript library for organizing and defining component styles",
   "keywords": [
     "css",